JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div id="water"></div>

CSS

#water{
    background-color : rgba(0,99,177,1);
}

.wave{
    background-repeat : repeat-x;
    background-position: 0% 50%;
    width : 100%;
    height : 100px;
}

.wave.left{
    background-image :  url('http://86.124.38.14:90/bogdang/img/wave2.png');
}
.wave.right{
    background-image :  url('http://86.124.38.14:90/bogdang/img/wave1.png');
}

JavaScript

function Wave(el, settings) {
    $(el).data('waveApi', this);
    this.init(el, $.extend({}, Wave.defaults, settings));
    Wave.instances.push(this);
}

Wave.instances = [];

Wave.defaults = {
    param: 2,
    pace: {
        left: 0.01,
        top: 0.2
    },
    delay: 100,
    amplitude: 100,
    autoplay: false,
    startAfter : null
}

Wave.prototype = new
function() {
    var waveApi = this;
    var originalPos;

    this.init = function(el, o) {
        this.options = o;
        this.el = el;
        originalPos = this.getPosition();
        if (this.options.autoplay) this.start.call(this);
    }

    this.getPosition = function() {
        var p = $(this.el).css('background-position').replace(/%/g, '').split(' ');
        return {
            left: +p[0],
            top: +p[1]
        };
    }

    this.setPosition = function(p) {
        $(this.el).css('background-position', p.left + '% ' + p.top + '%');
    }

    this.getNextPos = function() {
        var o = this.getPosition();
        o.left += this.options.pace.left;
        o.top = Math.cos(this.options.param) * 100 * this.options.amplitude;
        return o;
    }

    this.updatePosition = function() {
        this.options.param += this.options.pace.top;
        var newPos = this.getNextPos();
        this.setPosition(newPos);
    }

    this.start = function(quick) {
        var self = this;
        if(!quick && this.options.startAfter)
            setTimeout(function(){self.start(true)},self.options.startAfter);
        else
            this.interval = setInterval(function(){return self.updatePosition();}, self.options.delay);
    }

    this.stop = function() {
        clearInterval(this.interval);
    }
}


$(document).ready(function() {
    for(var i=0;i<10;i++)
        $('#water').append($('<div class="wave"></div>').addClass(Math.random() > 0.5 ? "left" : "right"));
    $('.wave').each(function(i, el) {
       var o = {
            param: 2,
            pace: {
                left:...