Verzögerung
Deaktivierte Elemente die erst nach einer Zeit aktiv werden
Einfache Version
Elemente können angezeigt aber erst später aktiviert werden. Dafür stehen verschiedene Zeiten zur Verfügung.
Hier werden nacheinander sechs Buttons aktiv.
<button class="deaktiviert-verzoegert--5">Hallo, Welt</button>
<button class="deaktiviert-verzoegert--10">Hallo, Welt</button>
<button class="deaktiviert-verzoegert--20">Hallo, Welt</button>
<button class="deaktiviert-verzoegert--30">Hallo, Welt</button>
<button class="deaktiviert-verzoegert--60">Hallo, Welt</button>
<button class="deaktiviert-verzoegert--120">Hallo, Welt</button>
Die Zahl in der CSS-Klasse gibt dabei Sekunden an. Es stehen 5, 10, 20, 30, 60 und 120 Sekunden zur Verfügung.
Das funktioniert natürlich auch mit ganzen Boxen, hier muss der Tag summary die Klasse erhalten:
Aufklappbutton 1
Inhalt der eigentlichen Box.
Aufklappbutton 2
Inhalt der eigentlichen Box.
Aufklappbutton 3
Inhalt der eigentlichen Box.
<details class="information">
<summary class="deaktiviert-verzoegert--5">Aufklappbutton 1</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
<details class="information">
<summary class="deaktiviert-verzoegert--10">Aufklappbutton 2</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
<details class="information">
<summary class="deaktiviert-verzoegert--20">Aufklappbutton 3</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
Umfangreichere Version mit Animation der Zeit und verschiedenen Texten je nach Status
Diese Version funktioniert bisher nur mit Buttons, nicht mit den details/summary-Abschnitten.
Über das Attribut data-dauer kann die Dauer (in s) beliebig angegeben werden.
Über das Attribut data-textdanach kann der Text nach der Animation angegeben werden.
Über das Attribut data-zeigeanimation kann die Animation ausgeblendet werden. Die Veränderung beschränkt sich dann nur auf die Optik und den neuen Text nach Ablauf der Zeit.
Dies ist eine Hilfe, die ein- und ausgeblendet werden kann.
<button class="schalter animated-button" data-dauer="5" data-textdanach="Hier gibts einen Tipp!" schalterref="verzoegerung-ref">Bitte warten...</button>
<div class="versteckt" id="verzoegerung-ref">
<p>Dies ist eine Hilfe, die ein- und ausgeblendet werden kann.</p>
</div>
Natürlich ist es trotzdem möglich, über diesen Weg ganze Boxen später per Klick einzublenden:
Inhalt der Box
<p>
<button class="schalter animated-button" data-dauer="5" data-textdanach="Hier gibts einen Tipp!" schalterref="verzoegerung-ref-2">Bitte warten...</button>
<div class="versteckt information" id="verzoegerung-ref-2">
<p>
Inhalt der Box
</p>
</div>
</p>
Der Button kann auch inline eingebunden werden.
Inhalt der Box
<p>
Der Button kann auch inline <button class="inline-button schalter inline-button animated-button" data-dauer="5" data-textdanach="Hier gibts einen Tipp!" schalterref="verzoegerung-ref-3">Bitte warten...</button> eingebunden werden.
<div class="versteckt information" id="verzoegerung-ref-3">
<p>
Inhalt der Box
</p>
</div>
</p>
Beispiel für einen ohne Animation der Zeit.
Inhalt der Box
<p>
Beispiel für einen <button class="inline-button schalter animated-button" data-dauer="5" data-textdanach="Hier gibts einen Tipp!" data-zeigeanimation="false" schalterref="verzoegerung-ref-4">Button</button> ohne Animation der Zeit.
<div class="versteckt information" id="verzoegerung-ref-4">
<p>
Inhalt der Box
</p>
</div>
</p>
Verzögert erscheinde Elemente
Elemente können später eingeblendet werden. Dafür stehen verschiedene Zeiten zur Verfügung.
Hier erscheinen nacheinander sechs Buttons.
<button class="verzoegert--5">Hallo, Welt</button>
<button class="verzoegert--10">Hallo, Welt</button>
<button class="verzoegert--20">Hallo, Welt</button>
<button class="verzoegert--30">Hallo, Welt</button>
<button class="verzoegert--60">Hallo, Welt</button>
<button class="verzoegert--120">Hallo, Welt</button>
Die Zahl in der CSS-Klasse gibt dabei Sekunden an. Es stehen 5, 10, 20, 30, 60 und 120 Sekunden zur Verfügung.
Das funktioniert natürlich auch mit ganzen Boxen:
Aufklappbutton 1
Inhalt der eigentlichen Box.
Aufklappbutton 2
Inhalt der eigentlichen Box.
Aufklappbutton 3
Inhalt der eigentlichen Box.
<details class="information verzoegert--5">
<summary>Aufklappbutton 1</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
<details class="information verzoegert--10">
<summary>Aufklappbutton 2</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
<details class="information verzoegert--20">
<summary>Aufklappbutton 3</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
Für geschachtelte Boxen ist es sogar möglich, dass weitere Tipps jeweils nach z.B. 10 Sekunden erscheinen. Dabei startet die Zeit erst, wenn die Elternbox sichtbar ist.
Aufklappbutton 1
Inhalt der eigentlichen Box.
Aufklappbutton 2
Inhalt der eigentlichen Box.
Aufklappbutton 3
Inhalt der eigentlichen Box.
Die Animation funktioniert jedoch nur einmal nach Auslösung.
<details class="information verzoegert--10">
<summary>Aufklappbutton 1</summary>
<p>Inhalt der eigentlichen Box.</p>
<details class="information verzoegert--10">
<summary>Aufklappbutton 2</summary>
<p>Inhalt der eigentlichen Box.</p>
<details class="information verzoegert--10">
<summary>Aufklappbutton 3</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
</details>
</details>
