JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<script src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/js/jquery.zlayer.min.js"></script>
<div class="block">
<div class="outer">
    <div class="cub"></div>
    <div class="cub"></div>
    <div class="cub"></div>
    <div class="cub"></div>
    <div class="cub"></div>
    <div class="cub"></div>    
</div>
</div>

CSS

.block {
    width: 400px;
    height: 100px;
    overflow: hidden;
}

.outer {
    width: 700px;
    height: 100px;
    outline: 3px solid red;
    overflow: hidden;
}

.cub {
    width: 100px;
    height: 100px;
    float: left;
}

.cub:nth-child(odd) {
    background-color: red;
}

.cub:nth-child(even) {
    background-color: green;
}

JavaScript

$('.outer').zlayer([
    {
        layer:'.cub:even',
        mass:15,
        confine:'y',
        force:'push'
    },
    {
        layer:'.cub:odd',
        mass:5,
        confine:'y',
        force:'push'
    }    
]);

$('.cub')