Image shaking effect with javascript. Today’s lesson quite entertaining, we’ll learn how to construct a shaking effect. For clarity, we will apply this effect to the picture. You will need to hold down by mouse a certain area in the image and move it to another location (drag). Now, I sure that better to see our online demonstration. How did it achieve? In principle, simply enough, the entire ‘image’ divided into 4 sectors. Place, where we will begin to drag by mouse – is the boundary separating of our four pictures. And shaking effect itself – will only change the sizes of our sectors and pictures in them. Read more.
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>Image shaking effect 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"> <div class="tl"><img alt="" src="image.jpg"></div> <div class="tr"><img alt="" src="image.jpg"></div> <div class="bl"><img alt="" src="image.jpg"></div> <div class="br"><img alt="" src="image.jpg"></div> </div> </div> </body> </html>
Here are main object with 4 images inside
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:900px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px} #main_object{position:relative;width:900px;height:675px;overflow:hidden;cursor:pointer} #main_object div{position:absolute;overflow:hidden} #main_object img{position:absolute;-ms-interpolation-mode:nearest-neighbor} #main_object .tl,#main_object .tl img{top:0;left:0} #main_object .tr,#main_object .tr img{top:0;right:0} #main_object .bl,#main_object .bl img{bottom:0;left:0} #main_object .br,#main_object .br img{right:0;bottom:0}
Step 3. JS
Here are our main Javascript:
js/main.js
var ishk = { // variables speedD : .98, // degree of attenuation speedX : 50, // speed by X speedY : 60, // speed by X // inner variables xm : 0, ym : 0, sx : 1, sy : 1, svx : 0, svy : 0, xd : 1, yd : 1, drag : false, // initialization init : function() { // firstly we will pass through all inner div`s and its images and collect styles this.mobj = document.getElementById('main_object'); var div = this.mobj.getElementsByTagName('div'); this.d = []; this.i = []; for (var i = 0; i<4; i++) { this.d[i] = div[i].style; this.i[i] = div[i].getElementsByTagName('img')[0].style; } // set initial params of our generated result this.resize(); // prevent text selection in IE document.onselectstart = function() { return false; } // prevent IE from trying to drag an image this.mobj.ondrag = function() { return false; } // mouse down event, we will set 'drag flag to true, change cursor and positions this.mobj.onmousedown = function() { ishk.drag = true; ishk.mobj.style.cursor = 'move'; ishk.xd = ishk.xm - ishk.nx; ishk.yd = ishk.ym - ishk.ny; return false; } // on mouse up - release 'drag' flag, change pointer document.onmouseup = function() { ishk.drag = false; ishk.mobj.style.cursor = 'pointer'; return false; } // set max sizes to last image this.i[3].width = ishk.nw; this.i[3].height = ishk.nh; // and initial positions too ishk.sx = ishk.nx; ishk.sy = ishk.ny; // start looping this.shake(); }, // refreshing mouse positions mousemove : function(e) { this.xm = e.clientX; this.ym = e.clientY; }, // sub init of initial positions, plus, in case of window resizing - repeat too resize : function() { var o = ishk.mobj; for (ishk.nx = 0, ishk.ny = 0; o != null; o = o.offsetParent) ishk.nx += o.offsetLeft, ishk.ny += o.offsetTop; ishk.nw = ishk.mobj.offsetWidth; ishk.nh = ishk.mobj.offsetHeight; }, // main shaking function shake : function() { // in case of mouse move and dragging - change center position if (ishk.drag) { ishk.sx = ishk.xm; ishk.sy = ishk.ym; } else { // otherwise - attenuation ishk.svx = ishk.speedD * ishk.svx - (ishk.sx - ishk.xd - ishk.nx) / ishk.speedX; ishk.svy = ishk.speedD * ishk.svy - (ishk.sy - ishk.yd - ishk.ny) / ishk.speedY; ishk.sx += ishk.svx; ishk.sy += ishk.svy; } // calculation new widths and heights of our div`s and images var w0 = Math.max(0, Math.round(ishk.sx) - ishk.nx); var h0 = Math.max(0, Math.round(ishk.sy) - ishk.ny); var w1 = Math.max(0, ishk.nw - (Math.round(ishk.sx) - ishk.nx)); var h1 = Math.max(0, ishk.nh - (Math.round(ishk.sy) - ishk.ny)); var w2 = Math.max(0, Math.round((w0 * ishk.nw) / ishk.xd)); var h2 = Math.max(0, Math.round((h0 * ishk.nh) / ishk.yd)); var w3 = Math.max(0, Math.round((w1 * ishk.nw) / (ishk.nw - ishk.xd))); var h3 = Math.max(0, Math.round((h1 * ishk.nh) / (ishk.nh - ishk.yd))); // apply new widths ishk.d[0].width = w0 + 'px'; ishk.d[1].width = w1 + 'px'; ishk.d[2].width = w0 + 'px'; ishk.d[3].width = w1 + 'px'; ishk.d[0].height = h0 + 'px'; ishk.d[1].height = h0 + 'px'; ishk.d[2].height = h1 + 'px'; ishk.d[3].height = h1 + 'px'; ishk.i[0].width = w2 + 'px'; ishk.i[1].width = w3 + 'px'; ishk.i[2].width = w2 + 'px'; ishk.i[3].width = w3 + 'px'; ishk.i[0].height = h2 + 'px'; ishk.i[1].height = h2 + 'px'; ishk.i[2].height = h3 + 'px'; ishk.i[3].height = h3 + 'px'; // looping current function setTimeout(ishk.shake, 20); // 1/50*1000 = 20ms (for 50 fps) :) } }; window.onload = function() { ishk.init(); // first initialization // binding mouse move event document.onmousemove = function(e) { if (window.event) e = window.event; // for IE ishk.mousemove(e); } // binding onresize event window.onresize = ishk.resize; }
It is rather simple. When the page loads – I initialize our main object, and link all the necessary events. Then, after initialization, I loop our main ‘shake’ function, which changing sizes of all our 4 images (sectors).
Step 4. Images
For our demo I used only one image:
Live Demo
Conclusion
Today I told you how to create easy shaking effect to images. Commonly – you can try to play with any another objects too. Hope our javascript lessons still interesting for you. Good luck!
WOW that was awesome!!!!
Thank you very much!
Hi,
Thanks for the awesome script.
What if I want to retain the image once it is skewed by the user? This was the user can perform multiple skew on the image.
Hi Murtaza,
It could be difficult to achieve because of the logic of this script. Pay attention that this is not a single object, but four objects.