Scrollspy

Trigger events and animations while scrolling your page.


Usage

Typically, classes from the Animation component are used together with the scrollspy.

NOTE: This example uses the repeat: true option. Scroll up and down to see the triggered animations.

Usage

  • Data Attributes

    Attribute Description
    [data-scrollspy] This is the identifier for the JavaScript to initialize the component.
  • In View

    Lorem ipsum dolor sit amet.

    In View

    Lorem ipsum dolor sit amet.

    In View

    Lorem ipsum dolor sit amet.

    In View

    Lorem ipsum dolor sit amet.

    In View

    Lorem ipsum dolor sit amet.

    In View

    Lorem ipsum dolor sit amet.

    In View

    Lorem ipsum dolor sit amet.

    In View

    Lorem ipsum dolor sit amet.

    In View

    Lorem ipsum dolor sit amet.

    In View

    Lorem ipsum dolor sit amet.

  • <div class="panel panel-box" data-scrollspy="{class:'animation-fade',repeat:true}">
    	...
    </div>

Groups

You can also group scrollspy elements, so you won't have to apply the data attribute to each of them. Just add the data-scollspy"{target:'MY-CLASS'}" attribute to a parent container, targetting the selector of its child items. When using a delay it will be applied cumulatively to the items within the row that scrolls into view. The delay will be resetted for the next row within the group when it scrolls into view.

Usage

  • <div data-scrollspy="{class:'animation-fade invisible',repeat:true,delay:300,target:'> div > .panel'}">
    	<div>
    		<div class="panel panel-box invisible">
    			...
    		</div>
    	</div>
    </div>