Scrollspy

Met het UIkit component "Scrollspy" kan je allerlei elementen met een tekst of een afbeelding of een video op een leuke (animated) manier in je website laten weergeven. Hieronder is te zien welke dit zijn en hoe dit eenvoudig is te doen.

Hoe te gebruiken

Door simpel het data-uk-scrollspy attribute met één van onderstaande opties toe te voegen!

Data attribute Beschrijving
cls:'MY-CLASS' Laat de animatie alleen de 1e keer dat je de pagina van de website laad zien!
repeat: true Laat de animatie elke keer dat je de pagina van de website laad zien!
delay:600 Animatie vertraging in milliseconden.

Voorbeeld met tekst

Onderstaand voorbeeld gebruikt de repeat: true optie. Scrol de website op en neer om het resultaat te zien!

Fade

Fade: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Scale up

Scale up: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Scale down

Scale down: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide top

Slide top: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide bottom

Slide bottom: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide right

Slide right: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide left

Slide left: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

Hieronder de gebruikte code van bovenstaand voorbeeld (om het goed te kunnen waarnemen is in dit voorbeeld de vertraging op 1300 milliseconden gezet).

<div class="uk-grid">
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true, delay:1300}">
            <p><strong><span style="font-size: 14pt;">Fade:</span></strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4 uk-push-1-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true, delay:1300}">
            <p><strong><span style="font-size: 14pt;">Scale up:</span></strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4 uk-push-2-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true, delay:1300}">
            <p><strong><span style="font-size: 14pt;">Scale down:</span></strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4 uk-push-3-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true, delay:1300}">
            <p><strong><span style="font-size: 14pt;">Slide top:</span></strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4 uk-push-2-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true, delay:1300}">
            <p><strong><span style="font-size: 14pt;">Slide bottom:</span></strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4 uk-push-1-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true, delay:1300}">
            <p><strong><span style="font-size: 14pt;">Slide right:</span></strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay:1300}">
            <p><span style="font-size: 14pt;"><strong>Slide left:</strong></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

Voorbeeld met afbeelding.

Onderstaand voorbeeld gebruikt de repeat: true optie. Scrol de website op en neer om het resultaat te zien!

Fade

6 280x210

Scale up

algera1 280x200

Scale down

China 280x131

Slide top

China 297x200

Slide bottom

image 250x166

Slide right

tang dynasty art garden 280x186

Slide left

travel china guide 340x191

Markup

Hieronder de gebruikte code van bovenstaand voorbeeld (op het goed te kunnen waarnemen is in dit voorbeeld de vertraging op 1300 milliseconden gezet).

<div class="uk-grid">
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true, delay:1300}">
            <p><img src="/images/Resized/6_280x210.jpg" width="200" height="149" /></p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4 uk-push-1-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true, delay:1300}">
           <p><img src="/images/Resized/algera1_280x200.jpg" width="200" height="143" /></p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4 uk-push-2-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true, delay:1300}">
            <p><img src="/images/Resized/China_280x131.png" width="200" height="93" /></p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4 uk-push-3-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true, delay:1300}">
            <p><img src="/images/Resized/China_297x200.jpg" width="200" height="135" /></p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4 uk-push-2-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true, delay:1300}">
            <p><img src="/images/Resized/image_250x166.jpg" width="200" height="133" /></p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4 uk-push-1-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true, delay:1300}">
            <p><img src="/images/Resized/tang-dynasty-art-garden_280x186.jpg" width="200" height="133" /></p>
        </div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay:1300}">
            <p><img src="/images/Resized/travel-china-guide_340x191.jpg" width="200" height="112" /></p>
        </div>
    </div>
</div>

 

Groepen

Ook is het mogelijk om groepen van elementen van "Srollspy" te voorzien, op deze manier is het niet nodig om elk element apart van "Scrollspy" te voorzien, handig toch! Om dit voor elkaar te krijgen plaatst je de data-uk-scollspy"{target:'MY-CLASS'}" attribute in een "container" element. Bij het gebruik van een vertragings optie zal dit voor alle elementen na elkeaar te zien zijn.

Voorbeelden

 

Item1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item4

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item5

Item6

Item7

Item8

Example

Hieronder de gebruikte code van bovenstaand voorbeeld (op het goed te kunnen waarnemen is in dit voorbeeld de vertraging op 1300 milliseconden gezet).

<div class="uk-grid" data-uk-grid-margin="" data-uk-scrollspy="{cls:'uk-animation-fade uk-invisible', target:'&gt; div &gt; .uk-panel', delay:1300, repeat: true}">
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box uk-invisible">
            <h3 class="uk-panel-title">Item1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box uk-invisible">
            <h3 class="uk-panel-title">Item2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box uk-invisible">
            <h3 class="uk-panel-title">Item3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box uk-invisible">
            <h3 class="uk-panel-title">Item4</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box uk-invisible">
            <h3 class="uk-panel-title">Item5</h3>
            <p><img src="/images/Resized/shanghai-suzhou_280x169.png" width="200" height="121" /></p>
        </div>
    </div>
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box uk-invisible">
            <h3 class="uk-panel-title">Item6</h3>
            <p><img src="/images/china/Resized/jinghu-high-speed-rail-way-map_280x233.jpg" width="200" height="121" /></p>
        </div>
    </div>
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box uk-invisible">
            <h3 class="uk-panel-title">Item7</h3>
            <p><img src="/images/Resized/image-map-of-china_270x200.jpg" width="200" height="121" /></p>
        </div>
    </div>
    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box uk-invisible">
            <h3 class="uk-panel-title">Item8</h3>
            <p><img src="/images/china/Resized/110_280x186.jpg" width="200" height="121" /></p>
        </div>
    </div>
</div>