UIKit Web - Snippets

Links

UIKit Framework - 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.

Mehrere Editoranimationen

Bei mehreren Animationen kann man den Scrollspy programmatisch nutzen und für jede Animation eine Instanz bauen. Leider funktioniert es nicht (bisher) wenn man das Selbe Target für die Instanzen nutzt. Deshalb muss man schauen wie man verschiedene Targets nutzt. So kann man ein Snippet z.B. in _main.php in ProcessWire einbauen, dass für mehrere Animationen sorgt. Hier für Links mit der Klasse .ani-link und Bilder mit der Klasse .ani-img. Als Selector für das target attribut nutzen wir einmal .bd und einmal .uk-section.

if($page->opt_1){
    $page->additionalFooterData .= '
    <script>
    var spy1 = UIkit.scrollspy(\'.bd\', {
        target: \'.ani-img\',
        cls: \'uk-animation-fade\',
        delay: 400,
        repeat: true
    });
    var spy2 = UIkit.scrollspy(\'.uk-section\', {
        target: \'.ani-link\',
        cls: \'uk-animation-slide-left-medium\',
        delay: 400,
        repeat: true
    });
    </script>
    ';
}