Search code examples
javascriptjqueryhtmlparallaxskrollr

Skrollr: how to start animation only once a certain point is reached?

I'm playing with skrollr plugin but can't achieve what I want so looking for assistance. I've been able to implement easy effects such as <div id="intro-left" data-0="opacity: 0" data-180="opacity: 1"> (means that my DIV called intro-left becomes visible once user scrolls down by 180)

The issue is that I don't like to use the scrolling distance since this would only makes sense if everone had the same screen resolution right?

What I'd like to do is to tell skrollr: "Change DIV from opacity 0 to opacity 1 once the DIV position becomes visible on the screen" (in other words "Change DIV from opacity 0 to opacity 1 once user reaches a certain point on the page by scrolling down)

Is this achievable with skrollr, and how?

Many thanks

Solution

  • Did you look at the documentation?

    There's even an example demonstrating different anchors

    In short:

    <div id="intro-left" data-bottom-top="opacity: 0" data-center="opacity: 1">