UIKit Web - Snippets: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „== Animationen mit Scrollspy in ProcessWire == UIKit Animationen und der Scrollspy lassen sich gut kombinieren. Damit kannst du die Animationen auslösen wenn…“) |
|||
| Zeile 3: | Zeile 3: | ||
'''Schritt 1:''' Festlegen, welche Animationen der Scrollspy auslösen soll. Das bietet sich in einem übergeordneten Container an. | '''Schritt 1:''' Festlegen, welche Animationen der Scrollspy auslösen soll. Das bietet sich in einem übergeordneten Container an. | ||
| + | <syntaxhighlight lang="html"> | ||
<div id="bd" uk-scrollspy="target: div.ani; cls: uk-animation-slide-bottom-small; delay: 300"> | <div id="bd" uk-scrollspy="target: div.ani; cls: uk-animation-slide-bottom-small; delay: 300"> | ||
| + | </syntaxhighlight> | ||
* Target legt fest welche Elemente überwacht werden sollen | * Target legt fest welche Elemente überwacht werden sollen | ||
* cls legt fest welche Animation abgespielt wird. | * cls legt fest welche Animation abgespielt wird. | ||
'''Schritt 2:''' Im Editor Stile festlegen die man als Redakteur einfach verwenden kann. | '''Schritt 2:''' Im Editor Stile festlegen die man als Redakteur einfach verwenden kann. | ||
Version vom 19. April 2024, 08:12 Uhr
Animationen mit Scrollspy in ProcessWire
UIKit Animationen und der Scrollspy lassen sich gut kombinieren. Damit kannst du die Animationen auslösen wenn ein Element in den View kommt.
Schritt 1: Festlegen, welche Animationen der Scrollspy auslösen soll. Das bietet sich in einem übergeordneten Container an.
<div id="bd" uk-scrollspy="target: div.ani; cls: uk-animation-slide-bottom-small; delay: 300">
- Target legt fest welche Elemente überwacht werden sollen
- cls legt fest welche Animation abgespielt wird.
Schritt 2: Im Editor Stile festlegen die man als Redakteur einfach verwenden kann.
