JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<script src="http://webdev.stephband.info/js/jquery.jparallax.js"></script>
<div id="parallax"> 
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

body {
    background-color: #ddd;
    font-family: sans-serif;
}

#parallax {
    position: relative;
    //overflow: hidden;
    width: 800px;
    height: 600px;
    margin: 0 auto;
    //background-color: #fff;
}

#parallax div {
    width: 640px;
    height: 480px;
    -webkit-transition: all 0s ease-out;
}

JavaScript

// parallax test

$(function() {
    var stuff = '<img src="http://brodingo.com/img/whale.gif">',
        zebra = function(i,s){
            var b = false;
            if(i % 2 === 0){
                b = true;
                if(s){
                    return s;
                }
                return b;
            } else if (s) {
                return '';
            }
            return b;
        },
        $parallax = $('#parallax');
        
    $parallax.jparallax().children().html(stuff).each(function(i){
        var rotate = ' rotate(' + zebra(i,'-') + Math.floor(Math.random() * 10) + 'deg)',
            scale = ' scale(' + ((10 - i) / 15) + ')',
            result = 'translateZ(0)' + rotate + scale;
        
        console.log(rotate);//zebra(i,'-'));
        
        $(this).css({'-webkit-transform' : result});
    });
});