Skrollr is a use of HTML5 and CSS3 parallax scrolling lightweight javascript library. It is not dependent on the independent libraries of other frameworks that lets you quickly create a parallax scrolling effect. It allows us to set the CSS property keyframes to any element, then it will automatically form animation. The more important point is that the use of these libraries do not write complex JS code and compatible with mainstream browsers, mobile phones and other mobile terminal adapter and other features.
How to use?
First added skrollr library page [/body] before, you can download the latest library file https://github.com/Prinzhorn/skrollr#rd. Then use skrollr.init () call skrollr library.
<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>
</body> Next, we demonstrate the next page elements background color change effect. When the user scrolls down the page 500 pixels, div background color from # 00f changed to # f00.
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div> See the demo: Demo1
Note that you can not use # 00f or # 0000ff to define the background color should be used to define color values rgb, of course, you do not have to worry about low version ie browser does not support rgb, skrollr compatibility deal has been done.
Here we look at the effect of rotation, using transform: rotate (0deg) allow page elements to produce rotation, following demo page when scrolling div will do a 360-degree rotation effect.
<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);"
data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div> See the demo: Demo2
skrollr library also provides non-linear animation calls and elastic buffering effect, you can use the cache function easings options such as: bounce, swing and so on.
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);"
data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div> See the demo: Demo3
Next we put "data-500" replaced by "data-top"! skrollr can not only deal with the absolute position, relative position can handle!
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);"
data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div> See the demo: Demo4
From the above, we can see a few examples, using the element attribute: data-xxx, add more such attributes, skrollr actually can automatically create the animation process.
When setting up data-xxx, skrollr provide a relative (relative) and absolute (absolute) view of the two methods, see illustration:
Skrollr provides a rich use of documentation, as well as commentary javascript method, the details can read the project's official website: https: //github.com/Prinzhorn/skrollr, but the site will introduce richer Skrollr application results page to explain the article, please looking forward!
