Search code examples
javascriptparallaxskrollr

Wrong opacity start value using skrollr

I am trying to use skrollr for the first time and having trouble getting it right. All I want to do is say:

"When the top of .slide is at the top of the viewport set opacity to 1, then by the time the bottom of .slide is at the top of the viewport, it should have animated from 1 through to 0"

Basically the effect would be fade the text to nothing as the user scrolls passed .slide.

Problem is that the opacity is already less than 1 when the page loads.

body {
    height: 2000px;
    margin: 0;
}

.slide {
    position: relative;
    background-color: #f0f0f0;
    height: 500px;
}

h1 {
    position: absolute;
    bottom: -50px;
    left: 50px;
    font-size: 38px;
}

<section class="slide">
    <h1 data-anchor-target=".slide" data-bottom-top="opacity: 1" data-top-bottom="opacity: 0">I should fade out</h1>
</section>

var s = skrollr.init();

Fiddle: http://jsfiddle.net/wj2XG/1/

Edit:

I have fixed this by changing data-bottom-top="opacity: 1" to data-0="opacity: 1" but I would like to know why the former isn't working because I thought they would be the same thing?

Solution

  • When the top of .slide is at the top of the viewport set opacity to 1, then by the time the bottom of .slide is at the top of the viewport, it should have animated from 1 through to 0

    That would be

    <h1 data-anchor-target=".slide" data-top-top="opacity: 1" data-top-bottom="opacity: 0">I should fade out</h1>

    NOT

    <h1 data-anchor-target=".slide" data-top-bottom="opacity: 1" data-top-bottom="opacity: 0">I should fade out</h1>

    http://jsfiddle.net/wj2XG/2/