Iris - Lamellenblende mit echter Mechanik

Iris ist eine SVG-Lamellenblende mit echter Mechanik: starre Lamellen, die sich um feste Drehpunkte unter dem Ring schwenken. Die Öffnung ist durchsichtig - dahinter liegt die Seite oder ein Bild. Konfiguration deklarativ über data-iris-* oder per JavaScript, Auto-Init beim DOM-ready inklusive.

Eine Datei

Es gibt kein separates Stylesheet. Beim ersten Einsatz setzt iris.js einmal ein kleines <style id="iris-tokens"> an den Anfang des <head>. Darin stehen ausschließlich Theme-Tokens (--iris-*) am Host .iris. Weil das Element ganz vorn steht, überschreibt jedes Seiten-CSS diese Tokens schon mit gleicher Spezifität.

Das gesamte Painting liegt gekapselt im Shadow Root jeder Instanz. Alle Instanzen teilen sich ein CSSStyleSheet-Objekt (adoptedStyleSheets); wo das nicht geht, greift automatisch ein <style>-Fallback. Seiten-CSS auf nackte Tags erreicht die Blende nicht.

Quick Start

<script src="iris.js" defer></script>

<div class="iris"
     data-iris-shape="klassisch"
     data-iris-blades="8"
     data-iris-open="60"></div>

Die Größe steuerst du über --iris-size (Standard 100% der Breite) oder einfach über die Breite des Elements; die Blende ist immer quadratisch.

<div class="iris" style="--iris-size: 240px" data-iris-animate="breathe"></div>

Mechanik

Jede Lamelle ist ein starres Blech - ein Kreis, aus dem der sogenannte Arbeitskreis ausgeschnitten ist - und schwenkt um einen festen Drehpunkt unter dem Ring. Aus der gewünschten Öffnung folgt der Schwenkwinkel über den Kosinussatz. Die Öffnung dreht sich dabei mit, wie bei einer echten Blende.

Jede Lamelle wird von ihren (bis zu) drei Nachfolgerinnen verdeckt. Diese Stapelung ist ringsum gleich - es gibt keine erste oder letzte Lamelle. Alle Formen sind für 3 bis 24 Lamellen durchgerechnet: in jeder Stellung ohne Lücke und mit genau einer obersten Lamelle an jedem Punkt.

Lamellenformen

Die Formen unterscheiden sich durch die Krümmung der Arbeitskante. Sie bestimmt die Öffnungsform und zugleich die Fugenlinien, denn die sichtbare Grenze zwischen zwei Lamellen ist die Fortsetzung der Arbeitskante der oberen.

Data-Attribute

Bild hinter der Öffnung

Ein Bild wird immer passend eingesetzt: die kürzere Bildseite füllt die Öffnung, die längere wird mittig beschnitten - wie object-fit: cover. Ein Querformat verliert also links und rechts, ein Hochformat oben und unten.

<div class="iris" data-iris-image="landschaft.jpg"></div>

// oder zur Laufzeit
el._iris.setImage('landschaft.jpg');
el._iris.setImage(null);   // entfernen

Ohne Bild ist die Öffnung durchsichtig. Willst du dort eine Farbe, setze --iris-backdrop.

JavaScript-API

const iris = new Iris(element, {
  shape: 'rund',
  blades: 11,
  open: 40,
  interactive: true,
  onChange: (d) => console.log(d.open, d.diameter)
});

iris.setOpen(75);                 // sofort
await iris.animateTo(0, 800);     // weich, liefert ein Promise
iris.play();                      // atmen
iris.stop();
iris.update({ shape: 'vieleck', blades: 6, theme: 'messing' });
const svg = iris.toSVG();         // eigenständiges SVG als String
iris.destroy();

// Alle .iris-Elemente nachträglich initialisieren (idempotent):
Iris.init();

// Optional: jQuery-Bridge
$('.iris').iris({ blades: 12 });

Die Optionen heißen wie die Data-Attribute ohne Präfix (shape, blades, open, mirror, theme, edge, image, ring, mechanism, interactive, animate, duration, min, max, label) plus onChange. Übergebene Optionen haben Vorrang vor den Attributen. Die Instanz hängt als element._iris am Element. Ein zweites new Iris(element, options) liefert dieselbe Instanz und wendet die Optionen per update() an.

Methoden

Eigenschaften

Event

Bei jeder Änderung der Stellung feuert am Element iris:change (bubbelt). event.detail enthält open, diameter, blades, shape und source - user, api, animation oder breathe.

el.addEventListener('iris:change', e => {
  if (e.detail.source === 'user') label.textContent = e.detail.diameter + ' %';
});

Bedienung

Mit data-iris-interactive="true" wird die Blende zu einem Regler (role="slider"):

• Ziehen im Kreis - wie ein Blendenring. Drehst du in die Richtung, in die sich die Lamellen beim Öffnen drehen, öffnet sie. Eine halbe Umdrehung überstreicht den ganzen Bereich.
• Mausrad - etwa 3 % pro Raste, mit Shift 10 %. Trackpads regeln stufenlos. Am Anschlag (ganz auf bzw. ganz zu) scrollt die Seite normal weiter, Pinch-Zoom bleibt unberührt.
• Tastatur - Pfeiltasten ±1 (mit Shift ±10), Bild auf/ab ±10, Pos1 / Ende = ganz zu / ganz auf.

Themes

Drei vorgefertigte Themes via data-iris-theme, dazu der Standard ohne Attribut (Stahl mit Messing-Akzent):

• messing - warme Messingbleche und -ring
• hell - silbern, heller Ring
• icon - flach schwarz mit breiten weißen Fugen, ohne Schattierung

Eigene Themes per CSS-Variablen

.iris.mein-theme {
  --iris-blade:      #2d3b4a;   /* Grundfarbe der Lamellen */
  --iris-edge:       #9fc2e0;   /* Kantenlinien */
  --iris-edge-width: 3;         /* Linienstärke, Blende = 1000 Einheiten */
  --iris-shade:      0.7;       /* Stärke der Lichtschattierung, 0 = flach */
  --iris-ring-1:     #8aa3bb;   /* Ringverlauf, hell ... */
  --iris-ring-2:     #55697d;
  --iris-ring-3:     #2a3642;
  --iris-ring-4:     #4b5c6d;   /* ... dunkel */
  --iris-ring-line:  #10161c;   /* Ringkanten */
  --iris-ring-line-width: 3;    /* Linie zwischen Ring und Lamellen */
  --iris-ring-outer: #10161c;   /* äußere Ringkante, Default = --iris-ring-line */
  --iris-tick:       #a9c0d6;   /* Rändelung */
  --iris-backdrop:   transparent; /* Füllung der Öffnung ohne Bild */
  --iris-mech:       #e8b964;   /* Mechanik-Ansicht */
  --iris-focus:      #e8b964;   /* Fokusring */
}

Da das Painting gekapselt ist, ist das der einzige Weg zum Theming. CSS auf interne Klassen im Shadow Root wirkt nicht. toSVG() übernimmt die gerade gültigen Token-Werte in das exportierte SVG.

Hinweise

• Reduced Motion: bei prefers-reduced-motion: reduce startet data-iris-animate="breathe" nicht von selbst, und animateTo() springt ohne Übergang. Ein expliziter Aufruf von play() funktioniert weiter.
• Außerhalb des Bildschirms: eine atmende Blende zeichnet nicht, solange sie nicht sichtbar ist (IntersectionObserver). Events und Stellung laufen weiter.
• Mehrere Instanzen pro Seite arbeiten unabhängig und teilen sich ein Stylesheet. IDs im SVG sind pro Instanz eindeutig. toSVG() vergibt bei jedem Export eine eigene Zufalls-ID, sodass sich auch mehrere exportierte SVGs inline in einer Seite nicht in die Quere kommen.
• Kapselung: interne Knoten liegen in el.shadowRoot. Von außen erreichbar sind die Ebenen über ::part(): stack (Container aller Ebenen), image (Bild hinter der Öffnung), blades (Lamellen, weiterhin auch als svg), ring (Frontring und Fokusring) und mechanism (Mechanik-Ansicht).
• Container-Theming: Seiten-CSS direkt auf .iris (Breite, Rand, Schatten) wirkt weiterhin - das ist gewollt.