UIKit Web - Snippets: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
 
== Animationen mit Scrollspy in ProcessWire ==
 
== 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.
 
UIKit Animationen und der Scrollspy lassen sich gut kombinieren. Damit kannst du die Animationen auslösen wenn ein Element in den View kommt.
  

Version vom 19. April 2024, 08:13 Uhr

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.