ScrollMagic CLS Demo

by Louis Walch

HTML

<script src="https://rawgit.com/janpaepke/ScrollMagic/1678c394c0bed3e2d13ef7b61303d0180aa81855/scrollmagic/uncompressed/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-probe.min.js"></script>

<div id="scroll-container">
    <div id="scroll-wrapper">
        <section id="one">
            one
        </section>
        <section id="two">
            two
        </section>
        <section id="three">
            three
        </section>
        <section id="four">
            four
        </section>
    </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
}
html {
    position: fixed; /* prevents scrolling from selecting */
}
div#menu {
    height: 50px;
    position: absolute;
}
div#scroll-container {
    position: absolute;
    right: 0;
    top: 50px;
    left: 0;
    bottom: 0;
    overflow-y: scroll;
    margin-right: -20px; /* hiding the scrollbar */
}
div#scroll-wrapper {
    height: 400%;
    position: relative;
}
section {
    height: 25%;
    color: white;
    position: relative;
}
section#one {
    background-color: blue;
}
section#two {
    background-color: green;
}
section#three {
    background-color: red;
}
section#four {
    background-color: brown;
}
.iScrollVerticalScrollbar {
    right: 21px !important;
}

JavaScript

console.log("ScrollMagic v%s loaded", ScrollMagic.version);

// init
var ctrl = new ScrollMagic.Controller({
    container: '#scroll-container',
    globalSceneOptions: {
        triggerHook: 'onLeave',
        duration: '100%'
    }
});


// create scenes
var scenes = [];
scenes[0] = new ScrollMagic.Scene({
        triggerElement: "#one"
    })
    .setPin('#one', {pushFollowers: false})
    .addIndicators()
    .addTo(ctrl);
scenes[1] = new ScrollMagic.Scene({
        triggerElement: "#two"
    })
    .setPin('#two', {pushFollowers: false})
    .addIndicators()
    .addTo(ctrl);
scenes[2] = new ScrollMagic.Scene({
        triggerElement: "#three"
    })
    .setPin('#three', {pushFollowers: false})
    .addIndicators()
    .addTo(ctrl);
scenes[3] = new ScrollMagic.Scene({
        triggerElement: "#four"
    })
    .setPin('#four', {pushFollowers: false})
    .addIndicators()
    .addTo(ctrl);

// bind scroll to anchor links
$(document).on("click", "a[href^='#']", function (e) {
    var id = $(this).attr("href");
    if ($(id).length > 0) {
        e.preventDefault();
        
        // trigger scroll
        ctrl.scrollTo(id);
    }
});


// detect if mobile browser. regex -> http://detectmobilebrowsers.com
var isMobile = (function(a){return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1...