Creating Cross-browser Compatible Wave Effects Using Javascript

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:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/main.css
Step 3. JS
js/main.js
Step 4. Images
Conclusion

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!