JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<script src="https://raw.githubusercontent.com/stephband/jparallax/master/js/jquery.parallax.min.js"></script>
<div class="block">
<div class="outer">
    <div class="layer one">
        <div class="cub"></div>
        <div class="cub"></div>
        <div class="cub"></div>
    </div>
    <div class="layer two">
        <div class="cub"></div>
        <div class="cub"></div>
        <div class="cub"></div>        
    </div>
</div>
</div>

CSS

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

.outer {
    width: 600px;
    height: 100px;
    /* outline: 2px solid blue; */
    overflow: hidden;
}

.layer {
    width: 300px;
    height: 100px;
    /* outline: 2px solid red; */
    float: left;
}

.cub {
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 50px;
}

.one .cub {
   background-color: red;
}

.two .cub {
   background-color: blue;
}

JavaScript

$('.layer').parallax({
    mouseport: $('.block'),
    xparallax: 400 + 'px',
    yparallax: false,
    xorigin: false,
    decay: 0.5
});