scrollme
v0.1.1
Published
Animate css properties on scroll.
Downloads
21
Maintainers
Readme
scrollme
Animate CSS properties on scroll
Requires:
- Nodejs
- Gulp
Installation
$ npm install scrollme --save
AMD
define(['scrollme'], function(ScrollMe){
var scrollMe = ScrollMe;
});
CommonJS
var scrollMe = require('scrollme');
Global namespace
var scrollMe = window.ScrollMe;
Live demo
TODO:
- Write proper documentation
Testing:
- $ npm test
Code:
//store scroll position
var scrollY = 0;
var scrollMe = new ScrollMe();
//get total scroll area
var totalScrollAreaHeight = $('body').height();
//get total visible area
var clientHeight = $(window).innerHeight();
//init the lib
scrollMe.init(totalScrollAreaHeight, clientHeight);
//add listener to update scrollY position
$(window).scroll(function() {
//get scroll position
scrollY = window.scrollY || window.pageYOffset;
});
//add animation to element
scrollMe.addAnimation({
init: 0, //scroll start point percent values
end: 20, //scroll end point percent values
onUpdate: function(data, value) {
//TweenLite used for demo
TweenLite.to($('.box-opacity'), .3, {opacity:value});
},
propStart: 0,
propEnd: 1
});
//add animation with percentage string values
scrollMe.addAnimation({
init: 0, //scroll start point percent values
end: 20, //scroll end point percent values
onUpdate: function(data, value) {
//TweenLite used for demo
TweenLite.to($('.box'), .3, {width:value});
},
propStart: '0%',
propEnd: '100%'
});
//add rendering loop
function renderLoop() {
//updates scroll value
scrollMe.render(scrollY);
requestAnimationFrame(renderLoop);
};
requestAnimationFrame(renderLoop);