UIKit Web - Snippets

Animationen mit Scrollspy in ProcessWire

https://getuikit.com/docs/scrollspy
https://getuikit.com/docs/animation

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.