Scrollspy

Trigger events and animations while scrolling your page.

The scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element.

Fade

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Scale up

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Scale down

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide top

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Groups

You can also group scrollspy elements, so you won’t have to apply the data attribute to each of them. 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.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Purchase theme $49

Deep Soul is a creative, stylish, modern and fully functional theme. If you are a fashion blogger, a traveler, a photographer or a creative person who knows a lot and would like to share with people your skills, our WordPress Blog Theme is perfect for YOU!

Purchase today for $49

Need our help?

If you need help installing a demo package or customizing our theme please let us know and we will help you.

Get Support