Animate css properties on scroll.
npm install scrollmesh
$ npm install scrollme --save
`
#### AMD
`js
define(['scrollme'], function(ScrollMe){
var scrollMe = ScrollMe;
});
`
#### CommonJS
`js
var scrollMe = require('scrollme');
`
#### Global namespace
`js
var scrollMe = window.ScrollMe;
`
$3
$3
* Write proper documentation
$3
* $ npm test
$3
`js
//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;
});
`
`js
//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
});
`
`js
//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%'
});
`
`js
//add rendering loop
function renderLoop() {
//updates scroll value
scrollMe.render(scrollY);
requestAnimationFrame(renderLoop);
};
requestAnimationFrame(renderLoop);
``