Creating Cross-browser Compatible Wave Effects Using Javascript

Creating Cross-browser Compatible Wave Effects Using Javascript

2 753
Crossbrowser wave effect

Cross-browser effect of waves using javascript

Today’s lesson quite entertaining, we’ll learn how to construct a wave effect. For clarity, we will apply that effect to the picture. I will explain how it works directly in our tutorial, now, its time to see our online demonstration.

Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !


Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<html>
<head>
    <title>Effect of waves using pure JavaScript</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/main.js"></script>
</head>
 <body>
    <div class="example">
        <div id="main_object">
            <img id="source_img" src="image.jpg">
            <div id="wave_zone"></div>
        </div>
    </div>
 </body>
</html>

Here are prepared object, with 2 elements inside – image itself and bottom area for waving effect

Step 2. CSS

Here are single CSS file with all necessary styles:

css/main.css

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:800px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

#main_object {
    position: relative;
}
#main_object img {
    display: block;
}
#main_object #wave_zone img {
    position:absolute;
    left:-9999px;
}
#main_object span {
    position:absolute;
    font-size:0px;
}
#main_object #wave_zone {
    position:relative;
    display:block;
    overflow:hidden;
    background-color:#000;
}

Step 3. JS

Here are our main Javascript:

js/main.js

// wave sub objects
function WSubObj(num, img, object, iwidth, iheight){
    this.S = num;
    var o = document.createElement("span");
    o.style.overflow = "hidden";
    o.style.width = iwidth + "px";
    o.style.height = iheight + "px";
    o.style.top = (num-1) + "px";
    var oI = document.createElement("img");
    oI.src = img.src;
    oI.style.left = "0px";
    oI.style.top = (-iheight + num) + "px";
    oI.style.width = iwidth + "px";
    oI.style.height = iheight + "px";
    o.appendChild(oI);
    document.getElementById("wave_zone").appendChild(o);
    this.spa = o.style;
    this.ddx = 0
    this.PX  = 0
    this.x   = 0
    if (num > 0) this.prev = object[num - 1];
}

WSubObj.prototype.main = function(power){
    var x0 = (this.S == 0) ? Math.random() * power : this.prev.x;
    this.x = this.PX += (this.ddx += ( (x0 - this.PX - this.ddx) * 2 ) / 2.8) / 1.4;
    this.spa.left = Math.round(this.x) + "px";
}

// wave effect object
var weff = {
    // variables
    power : 2.2,

    // inner variables
    object : new Array(),
    simg : null,
    iwidth  : 0,
    iheight  : 0,

    // initialization function
    init : function() {
        for (var i = 0; i < this.iheight/4; i++)
            this.object[i] = new WSubObj(i, this.simg, this.object, this.iwidth, this.iheight);
    },

    // main loop function of water effect
    run : function() {
        var i = 0, o;
        while (o = weff.object[i++]) o.main(weff.power);
        setTimeout(weff.run, 40);
    }
};

// on page load
window.onload = function() {
    weff.simg = document.getElementById("source_img");
    weff.iwidth = weff.simg.width;
    weff.iheight = weff.simg.height;

    // set necessary width and height for wave zone element
    var css = document.getElementById("wave_zone").style;
    css.height = (weff.iheight/4 - 1) + "px";
    css.width  = weff.iwidth + "px";

    weff.init();
    weff.run();
}

It is rather simple. When the page loads – I initialize our main object, and create multiple subimages (in spans) for each row of second half of our sample, then, periodically gently increase the amplitude of oscillations. So, in result – we can see effect of waves.

Step 4. Images

For our demo I used only one image:

img_01


Live Demo
download in package

Conclusion

Today I told you how to create easy wave effect to images. You always can play with different variables of this demo ot archive different funny results. Hope our javascript lessons still interesting for you. Good luck!

SIMILAR ARTICLES

Practice with Text Shadows

0 642

2 COMMENTS

Leave a Reply