Square Animation

Coloriage aléatoire des carrés à chaque mouvement de la souris.

Vu sur squaredesign.com

HTML code :


Javascript code :


$(document).ready(function(){
    var cols = 20;

    var rows = 14;
    for(x=0; x<(cols * rows); x++) {
            $("<div>")
            .clone(false)
            .appendTo(".labSection .main")
            .addClass("square")
    }


    var demosquares = $('.labSection .main .square');
    $("body").mousemove(function(e) {
      pick = Math.round(demosquares.length * Math.random());
      
      var numRand = Math.floor(Math.random()*101)
      if(numRand < 30)
        $(demosquares[pick]).toggleClass("square1");
        else if(numRand > 70) $(demosquares[pick]).toggleClass("square2");
        else $(demosquares[pick]).toggleClass("square3");
    });



});

CSS code :


.square {
	float:left;
	width:5%;
	height:40px;
	background:#fff;
	margin:0;
}
.square1 {
	background: #93581C;
}

.square2 {
	background: #B908D9;
}

.square3 {
	background: #4d4d4d;
}

Comments are closed.