4

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

Ben
  • 47,286
  • 44
  • 159
  • 208
Greg
  • 2,937
  • 9
  • 47
  • 96

1 Answers1

7

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">
Prinzhorn
  • 20,711
  • 6
  • 54
  • 62
  • Thanks. Indeed I saw this example but did not understand it. Now with you're explanation I'm getting the concept! Thanks a lot! – Greg Sep 08 '13 at 11:32
  • 2
    +1 @Prinzhorn great documentation, particularly the section you linked to - that's hard to explain but it's clear! Great library too, thanks! – Ben Mar 28 '14 at 23:38