skrollr set by js.md

Right now I am working on a project where I am using bootstrap 3 and skrollr, it did not make my life harder, just use skrollr like you would use it normally, still pay attention when you rewrite the css. What I suggest for the mobile version is to turn skrollr off and make it a static website, and also don`t manually type the data attributes in the markup, use javascript for it. if you use javascript you can recalculate the the value you give in the data attribute when the window is resized.

Script

//used to set dynamically the attributes for animations
var setSkrollr = function($el, data) {
    // loop all data entries (scroll positions + css property & value)
    for (var i = 0, l = data.length; i < l; i++) { 
         // the current data entry
        var d = data[i]
     // the scroll position (in pixels)
            px = d[0]; 
     // the css property + value to set
            css = d[1]; 
        $el.attr('data-' + px, css);
    }
}

Example of ussage:

setSkrollr($('.box1'),[[0, 'opacity:1;'],
                       [500, 'opacity:1;'],
                       [600, 'opacity:0;']]);

The markup will look like this:

<div class = "box1" data-0="opacity:1;" data-500="opacity:1;" data-600="opacity:0;"></div>

This Function was not made by me, I also found this method on the internet. I dont wanan take the credits for it.

https://stackoverflow.com/questions/28471788/using-skrollr-with-bootstrap3/28480359#28480359