Creating Cross-browser Compatible Wave Effects Using Javascript

May 24, 2011

2 47515

Wave effect with 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

[sociallocker]

download in package

[/sociallocker]

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:

Live Demo

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!