JSFiddle - React, Tailwind, and code Playground

by iDVB

HTML

<script src="http://stephband.info/jparallax/js/jquery.event.frame.js"></script>
 <div class="parallax-viewport" id="parallax">
        <div class="parallax-layer" style="width:920px; height:274px;">
            <img src="http://goo.gl/ias9w" alt="" />
        </div>
</div>

CSS

.parallax-viewport {
    position:relative; 
    overflow:hidden;
    width:600px;
    height:400px;
    background:silver;
}

.parallax-layer {
    position:absolute;
}
.parallax-layer.blue {
    background: blue;
}
.parallax-layer.green {
    background: green;
}
.parallax-layer.red {
    background: red;
}

JavaScript

(function(jQuery, undefined) {

    // Plugin name
    var plugin = "parallax";
    
    // VAR
    
    var options = {
            mouseport:    'body',    // jQuery object or selector of DOM node to use as mouse detector
            xparallax:    true,      // boolean | 0-1 | 'npx' | 'n%' - Sets axis of reaction and by how much they react
            yparallax:    true,      //
            xorigin:        0.5,       // 0-1 - Sets default alignment. Only has effect when parallax values are something other than 1 (or true, or '100%')
            yorigin:        0.5,       //
            decay:            0.66,      // 0-1 (0 instant, 1 forever) - Sets rate of decay curve for catching up with target mouse position
            frameDuration:    30,    // Int (milliseconds)
            freezeClass:    'freeze' // String - Class added to layer when frozen
        },
    
        value = {
            left: 0,
            top: 0,
            middle: 0.5,
            center: 0.5,
            right: 1,
            bottom: 1
        },
    
        regex = {
            px:            /^\d+\s?px$/,
            percent:    /^\d+\s?%$/
        },
    
        frameEvent = 'frame.'+plugin,
    
        abs = Math.abs,
    
        pointer = [0, 0];
    
    // FUNCTIONS
    
    function parseValue(value) { return this.lib[value]; }
    parseValue.lib = value;
    
    // Converts numbers or numbers in strings to boolean
    function parseBool(x) {
        return typeof x === "boolean" ? x : !!( parseFloat(x) ) ;
    }
    
    function parseCoord(x) {
        return (regex.percent.exec(x)) ? parseFloat(x)/100 : x;
    }
    
    // CONSTRUCTORS
    
    function Mouse(xparallax, yparallax, decay, pointer){
        
        // Convert parallax options to boolean values
        var parallax = [xparallax, yparallax];
        
        this.ontarget = false;
        this.decay = decay;
        this.pointer = pointer || [0.5, 0.5];
        this.update = function(pointer,...