scrollme

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);