Skrollr & relative mode fails to work

StackOverflow https://stackoverflow.com/questions/18204827

Question

I'm trying to use the skrollr library (https://github.com/Prinzhorn/skrollr) to create what I think it a simple bit of functionality which will mean that when the bottom-top attribute is triggered (when the top is 25px above the bottom viewport) opacity will be 0, and then as the user scrolls down further then opacity will increase to 1 when the bottom of the element is 25px above the bottom viewport.

However, when I load up the html file it states in the console that all the elements are either skrollable-after or skrollable-between, when this is certainly not the case for later two elements (at least when the viewport is obscuring the later two elements). The final element is stated as being skrollable-between when in reality it is far beneath the bottom of the viewport.

I did think it may be an issue with the loading of the various assets, but s.refresh() doesn't change anything (at least in the manner I am using it).

HTML is as follows, with skrollr.js being the latest source file on Github (0.6.11).

Any guidance would be greatly appreciated.

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="skrollr.js"></script>
</head>
<body>
<div class="column"><p>Column 1</p>
</div>

<div class="column"><p>Column 2</p>

    <div class="imp-text-one" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom="opacity: 1">This is important text</div>

    <div class="placeholder"></div>

    <div class="imp-text-two" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom="opacity: 1">This is also important text</div>

    <div class="placeholder"></div>

    <div class="imp-text-three" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom:"opacity: 1">
    This is VERY important text</div>

</div>

<script type="text/javascript">
   s = skrollr.init();
</script>
<script>
 window.onload = function(){
     s.refresh();
}
</script>
</body>
</html>

CSS is as below:

.column {
width: 50%; 
float: left;
}

body {
margin: 0;
padding: 0;
}

.imp-text-one {
padding: 50px 10px 50px 10px;
border-style: solid;
}

.imp-text-two {
padding: 50px 10px 50px 10px;
border-style: solid;
}

.placeholder {
height: 400px;
}

.imp-text-three {
padding: 50px 10px 50px 10px;
border-style: solid;
}
Was it helpful?

Solution

It's data-[offset]-(viewport-anchor)-[element-anchor] and not data-[offset]-(element-anchor)-[viewport-anchor].

For example your first element has two keyframes both relative to the bottom of the viewport. But it never even gets close to the bottom!

Correct:

<div class="imp-text-one" data--25-top-bottom="opacity: 0;" data--25-bottom-bottom="opacity: 1">This is important text</div>

<div class="placeholder"></div>

<div class="imp-text-two" data--25-top-bottom="opacity: 0;" data--25-bottom-bottom="opacity: 1">This is also important text</div>

<div class="placeholder"></div>

<div class="imp-text-three" data--25-top-bottom="opacity: 0;" data--25-bottom-bottom:"opacity: 1">
This is VERY important text</div>

Edit: You need to add a proper doctype, e.g. <!DOCTYPE html>. Otherwise browsers switch to quirks mode, which skrollr doesn't handle.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top