scrollme

Animate CSS properties on scroll

  

$3

* Nodejs
* Gulp

$3

``sh
$ 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);
``



[scss-lint]:
[Live demo]: