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

javascript jquery html parallax skrollr
Greg picture Greg · Sep 8, 2013 · Viewed 9k times · Source

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

Answer

Prinzhorn picture Prinzhorn · Sep 8, 2013

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">

Related questions

HTML5 / Javascript Parallax Effect on single elements / div tags?

I have created a few sites in the past with the scrolldeck.js that have the standard full screen background with one layer ontop and text (the standard scroll parallax style) this is not what I am looking for. Im …

Read More
Jquery Parallax Scrolling effect - Multi directional

I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT I have the artwork ready and have found many …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More