Creating a Photo Scrambler grid in javascript

Photo grid with javascript. Today we continue JavaScript examples, and today we will create effect of splitting image to pieces (transforming image into grid), plus – our pieces will moving when we will move our mouse pointer. This will pretty interesting demonstration. As we using pure javascript, our result will quite crossbrowser. I already checked it in most major browsers.

Here are sample and downloadable package:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/main.css
Step 3. JS
js/script.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 our main page code of our sample.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  
<html> 
  
<head> 
  
<title>Photo grid (random pieces) example | Script Tutorials (2011)</title> 
  
<link rel="stylesheet" href="css/main.css" type="text/css" /> 
  
<script src="js/script.js"></script> 
  
</head> 
  
<body> 
  
    <h3><a href="#">Photo grid (random pieces) example</a></h3> 
  
    <div class="example" id="example"> 
  
        <div id="grid"></div> 
  
        <img id="src_img" src="data_images/01.jpg" style="visibility:hidden"> 
  
    </div> 
  
    <hr style="clear:both;" /> 
  
    <h4><a href="https://www.script-tutorials.com/photo-grid-in-javascript/">back to original article page</a></h4> 
  
</body> 
  
</html>

Step 2. CSS

Here are used CSS styles.

css/main.css

body{background:#eee;margin:0;padding:0} 
  
h3 {text-align:center} 
  
.example{background:#FFF;width:900px;height:600px;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius:3px;-webkit-border-radius:3px;overflow: hidden} 
  
#grid {position:relative;width:100%;height:100%} 
  
#grid .span {overflow:hidden;font-size:1px;position:absolute;left:-9999px}

Step 3. JS

Here are our main control JS file. Most inportant functionality here.

js/script.js

function CObj(y,x){ 
  
    this.obj = document.createElement('span'); 
  
    this.obj.className='span'; 
  
    this.img = document.createElement('img'); 
  
    this.img.style.position='absolute'; 
  
    this.img.src = rgrid.doot.src; 
  
    this.obj.appendChild(this.img); 
  
    rgrid.mobj.appendChild(this.obj); 
  
    this.x = x; 
  
    this.y = y; 
  
    this.L = 0; 
  
    this.T = 0; 
  
    this.xr = (this.x / 2) % 1 ? 1 : -1; 
  
    this.yr = (this.y / 2) % 1 ? 1 : -1; 
  
    this.xf = Math.random() * 4 + 1; 
  
    this.yf = Math.random() * 4 + 1; 
  
    //initialization function 
  
    this.init = function (){ 
  
        this.L  = Math.round(this.x * rgrid.Nx); 
  
        this.T  = Math.round(this.y * rgrid.Ny); 
  
        this.obj.style.width  = Math.round(rgrid.Nx + 1) + 'px'; 
  
        this.obj.style.height = Math.round(rgrid.Ny + 1) + 'px'; 
  
        this.img.style.left   = Math.round(-this.L) + 'px'; 
  
        this.img.style.top    = Math.round(-this.T) + 'px'; 
  
    } 
  
    // update object positions 
  
    this.draw = function (){ 
  
        this.obj.style.left   =  Math.round(this.L + (-rgrid.nx / 4 + rgrid.xm) * (this.xr * this.xf)) + 'px'; 
  
        this.obj.style.top    =  Math.round(this.T + (-rgrid.ny / 4 + rgrid.ym) * (this.yr * this.yf)) + 'px'; 
  
    } 
  
 } 
  
var rgrid = { 
  
    // external variables 
  
    NX  : 5, // amount X elements 
  
    NY  : 5, // amount Y elements 
  
    // internal variables 
  
    mobj : null, 
  
    doot : null, 
  
    objects : new Array(), 
  
    nx  : 0, 
  
    ny  : 0, 
  
    nxp  : 0, 
  
    nyp  : 0, 
  
    Ix  : 0, 
  
    Iy  : 0, 
  
    Ox  : 0, 
  
    Oy  : 0, 
  
    xm  : 0, 
  
    ym  : 0, 
  
    // main initialization function 
  
    init : function(){ 
  
        this.mobj  = document.getElementById('grid'); 
  
        this.doot = document.getElementById('src_img'); 
  
        var k = 0; 
  
        for(var i=0; i<this.NY; i++) 
  
            for(var j=0;j<this.NX;j++) 
  
                this.objects[k++] = new CObj(i,j); 
  
        this.nxp = this.mobj.parentNode.offsetLeft / 2; 
  
        this.nyp = this.mobj.parentNode.offsetTop / 2; 
  
    }, 
  
    // resize function 
  
    resize : function(){ 
  
        this.nx = this.mobj.offsetWidth; 
  
        this.ny = this.mobj.offsetHeight; 
  
        this.nxp = this.mobj.parentNode.offsetLeft / 2; 
  
        this.nyp = this.mobj.parentNode.offsetTop / 2; 
  
        this.Ix = this.doot.width; 
  
        this.Iy = this.doot.height; 
  
        this.Nx = Math.round(this.Ix / this.NX); 
  
        this.Ny = Math.round(this.Iy / this.NY); 
  
        this.Ox = (this.nx - this.Ix) / 2; 
  
        this.Oy = (this.ny - this.Iy) / 2; 
  
        var css = this.mobj.style; 
  
        css.left   = Math.round(this.Ox) + 'px'; 
  
        css.top    = Math.round(this.Oy) + 'px'; 
  
        css.width  = Math.round(this.Ix) + 'px'; 
  
        css.height = Math.round(this.Iy) + 'px'; 
  
        var i = 0, o; 
  
        while (o = this.objects[i++]) 
  
            o.init(); 
  
    }, 
  
    // main loop drawing function 
  
    run : function(){ 
  
        var i = 0, o; 
  
        while (o = rgrid.objects[i++]) 
  
            o.draw(); 
  
        setTimeout(rgrid.run, 20); 
  
    } 
  
} 
  
// page onload 
  
window.onload = function() { 
  
    rgrid.init(); // perform initialization 
  
    rgrid.resize(); // perform resizing 
  
    rgrid.xm = rgrid.nx / 4 - Math.random() * 50; 
  
    rgrid.ym = rgrid.ny / 4 - Math.random() * 50; 
  
    rgrid.run(); 
  
    // binding onresize event 
  
    window.onresize = rgrid.resize(); 
  
} 
  
// binding onmousemove event 
  
document.onmousemove = function(e){ 
  
    if (window.event) e = window.event; 
  
    rgrid.xm = ((e.x || e.clientX) / 2) - rgrid.nxp; 
  
    rgrid.ym = ((e.y || e.clientY) / 2) - rgrid.nyp; 
  
    if (Math.abs(2 * rgrid.xm - rgrid.nx / 2) < 2 && Math.abs(2 * rgrid.ym - rgrid.ny / 2) < 2){ 
  
        rgrid.xm = rgrid.nx / 4; 
  
        rgrid.ym = rgrid.ny / 4; 
  
    } 
  
}

Step 4. Images

Our sample image located in ‘data_images’ folder.

Live Demo

Conclusion

Hope that you was happy to investigate and play with our javascript lessons. I hope that today`s example looks fine 🙂 If is you were wondering – do not forget to thank. Will glad to listen your interesting comments. Good luck!