Html5.parallax

Html5.parallax Project

$("#myContainer").parallScroll({
    useEasing: true,    //boolean to using Easing effect (def: true)
    interval: 35,       //interval of scrolling page (def: 25)
    scrollLimit: 13660, //right scroll limit (def: 8000)
    scrollRatio: 500,   //rate ratio of scrolling page (def: 500)
    naviRatio: 800,     //rate ratio of navigation bar clicked (def: 800)
    naviLocate: { navi_demo: 0, navi_start: 1639, navi_document: 4644, navi_contact: 12040 },   //navi's id & start position
    scrollAxis: 'x',    //Set scrolling axis (def: 'x')
    horiScroll: true,   //Set scrolling to be horizontal scrolling (def: true)
    vertiScroll: false, //Set scrolling to be vertical scrolling (def: true)
    response: false,    //Refreshes parallax content on window load and resize (def: false)
    parallaxB: true,    //Enable or disable the Backgrounds of parallax (def: true)
    parallaxE: true,    //Enable or disable the Elements of parallax (def: true)
    hideElem: true,     //Hide parallax elements that move outside the viewport (def: true)
    hideType: function($elem){ $elem.fadeOut(); },      //Customise hidden
    showType: function($elem){ $elem.show(); },         //Customise shown
    refValueW: 1366,    //The reference value of browser width
    refValueH: 643,     //The reference value of browser height
    navId: '#navi_bar', //setting the navigation name to plugin
    formula: function(a, b){ return Math.round(a / b * 100) / 100; }    //proportional Formula
}, "#myContainer");

$("body").parallScroll(); //Start in a Tag 

$("#myContainer").parallScroll(settings, selector); //Start the plugin 

settings = Plugin setting selector = Element name 

<div data-stellar-ratio="1" data-animated='{"sdist":"0", "edist":"100", "css3":"swing"}'> 

    <div data-frame='{"sdist":"0", "edist":"100", "speed":"100"}'></div> 

    <img src="Frame.png"/> //Element Image 

</div>