Zynga 3d Parallax Scroler

by mrmartineau

HTML

<script src="https://raw.github.com/doctyper/scroller/master/src/Scroller.js"></script>
<script src="https://raw.github.com/doctyper/scroller/master/src/Raf.js"></script>
<script src="https://raw.github.com/doctyper/scroller/master/src/Animate.js"></script>
<div id="container">
    <div id="content" data-scrollable="y">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consequat neque vel mi pellentesque laoreet. Praesent in nisi ut lacus fringilla fringilla id eget orci. Maecenas eget varius dolor. Pellentesque dignissim, libero at convallis aliquet, nibh mauris aliquam lacus, nec ornare libero arcu eget risus. Quisque quis nulla quis felis convallis feugiat sed tempus erat. Cras nec ante leo, vel aliquam dui. Vestibulum ut magna velit, eget luctus mi. Nullam eget sapien sit amet velit sagittis gravida ut in neque. Sed fermentum dui sed lorem malesuada nec adipiscing diam tempor. Etiam at augue ut ipsum scelerisque ullamcorper. Integer vehicula orci posuere sem tristique ac tempus odio facilisis. In mattis felis sed lacus consequat aliquet mollis lacus porta. Nullam ullamcorper risus et purus vulputate nec dignissim mauris imperdiet.<div class="layer2"></div></p>
        <p>Nam sem lorem, porttitor posuere elementum et, mattis non diam. Donec non augue odio, at pellentesque augue. Integer egestas, sapien lacinia ullamcorper suscipit, purus orci mollis nisl, eget vulputate elit libero vel diam. Suspendisse sodales nisl in est volutpat vitae tempus mauris vulputate. Pellentesque purus augue,<div class="layer2"></div> scelerisque sit amet rutrum non, lobortis sed magna. Proin ultricies, nisl id cursus dignissim, odio erat feugiat erat, sed mollis libero nisl sit amet ante. Aliquam ante urna, ultricies id euismod sed, gravida ultrices neque. Curabitur viverra odio ultrices quam dapibus a cursus mi malesuada.</p>
        <p>Sed iaculis, felis non rhoncus accumsan, augue lectus condimentum ligula, in lacinia ipsum nibh id velit. Nam...

SCSS

body { background-color: #EEE; overflow: hidden; padding: 0; }
#container {
    background-color: #FFF;
    border: 5px solid #000;
    height: 480px;
    margin: 10% auto 0 auto;
    overflow: hidden;
    width: 80%;
    position: relative;
    
    -webkit-perspective: 300px;
    perspective: 300px;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

#content {
    padding: 10px;
    position: absolute;
    
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.layer2 {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: magenta;
    position: relative;
    left: 50%;
    margin-left: -50px;
    margin-top: -100px;
    
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
}

JavaScript

var EasyScroller = function(content, options) {
    
    this.content = content;
    this.container = content.parentNode;
    this.options = options || {};

    // create Scroller instance
    var that = this;
    this.scroller = new Scroller(function(left, top, zoom) {
        that.render(left, top, zoom);
    }, options);

    // bind events
    this.bindEvents();

    // the content element needs a correct transform origin for zooming
    this.content.style[EasyScroller.vendorPrefix + 'TransformOrigin'] = "left top";

    // reflow for the first time
    this.reflow();

};

EasyScroller.prototype.render = (function() {
    
    var docStyle = document.documentElement.style;
    
    var engine;
    if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
        engine = 'presto';
    } else if ('MozAppearance' in docStyle) {
        engine = 'gecko';
    } else if ('WebkitAppearance' in docStyle) {
        engine = 'webkit';
    } else if (typeof navigator.cpuClass === 'string') {
        engine = 'trident';
    }
    
    var vendorPrefix = EasyScroller.vendorPrefix = {
        trident: 'ms',
        gecko: 'Moz',
        webkit: 'Webkit',
        presto: 'O'
    }[engine];
    
    var helperElem = document.createElement("div");
    var undef;
    
    var perspectiveProperty = vendorPrefix + "Perspective";
    var transformProperty = vendorPrefix + "Transform";
    
    if (helperElem.style[perspectiveProperty] !== undef) {
        
        return function(left, top, zoom) {
            this.content.style[transformProperty] = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')';
        };    
        
    } else if (helperElem.style[transformProperty] !== undef) {
        
        return function(left, top, zoom) {
            this.content.style[transformProperty] = 'translate(' + (-left) + 'px,' + (-top) + 'px) scale(' + zoom + ')';
        };
        
    } else {
        
        return function(left, top,...