JSFiddle - React, Tailwind, and code Playground

by wookiehangover

HTML

<script src="http://webdev.stephband.info/jparallax/js/jquery.jparallax.js"></script>
<div id="parallax"> 
    <div style="width:978px; height:325px; font-size:112px;"></div> 
    <div style="width:987px; height:328px; font-size:122px;"></div> 
    <div style="width:1001px; height:333px; font-size:132px;"></div>  
    <div style="width:1031px; height:343px; font-size:142px;"></div> 
    <div style="width:1067px; height:355px; font-size:152px;"></div>  
    <div style="width:1120px; height:373px; font-size:162px;"></div> 
    <div style="width:1200px; height:400px; font-size:172px;"></div> 
</div>

CSS

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

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

#parallax div {
    //background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.1));
    color: rgba(0,0,0,0.2);
    text-align:center;
    -webkit-transition: all 0.1s ease-out;
}

JavaScript

// parallax test

$(function() {
    var stuff = '<img src="http://brodingo.com/img/whale.gif">';
        
    $('#parallax').jparallax().children().html(stuff).each(function(i){
        var a = 11 - i,
            scale = 'scale(' + (a/8) + ') translateZ(0)';
        
        $(this).css({'-webkit-transform':scale});
    });
});