Petit script basé sur jQuery :
- découpe des images en damier (nombre de "cases" paramétrable)
- affiche ces cases en fadeIn avec des temps d'exécution différents
il suffit d'appeler jQuery et le script ci dessous, et d'affecter la classe "block-me" aux images sur lesquelles on veut affecter l'effet.
démo :
http://peekaboo-web.net/jblocks/
Source / Exemple :
/********************************************DO NOT REMOVE THIS PLEASE *********************************************
*
*
*
- l'utilisation et la modification de ce script sont libres et autorisées
*
- utilisation :
- -> téléchargez jQuery (http://docs.jquery.com/Downloading_jQuery)
- -> appelez jQuery dans votre page
- -> appelez jBlocks dans votre page
- -> les images sur lesquelles ce script agit ont pour class "block-me"
-
nb=10; //nombre de blocs /!\ un nombre trop élevé peut ralentir l'exécution du script
tmax=5000; //temps d'apparition max des blocs /!\ un nombre trop élevé peut ralentir l'exécution du script
max_=nb/2;
$(document).ready(function() {
$(".block-me").hide();
$(window).load(function () {
//on parcourt toutes les images de la page et voit si elle doivent être traîtées par le script (si elles ont pour classe "block-me")
var x = document.images;
for (var i=0;i<x.length;i++)
{
if(x[i].className == "block-me") {
x[i].setAttribute('id',"blocked-"+i);
x[i].setAttribute('name',"blocked-"+i);
block_it(i);
}
}
});
});
function block_it(i) {
//on crée une div à la place de l'image (même taille)...
var img="#blocked-"+i;
var img_src = $(img).attr("src");
var w=$(img).width()/max_;
var h=$(img).height()/max_;
var n_b_div = document.createElement("div");
n_b_div.className="j_content";
n_b_div.style.width= $(img).width();
n_b_div.style.height= $(img).height();
n_b_div.id="j_content_"+i;
n_b_div.style.cssFloat = "left";
n_b_div.style.styleFloat= "left";
n_b_div.style.margin = "0";
n_b_div.setAttribute("style", n_b_div.getAttribute("style") + "; float:left; ");
$(img).parent().append(n_b_div);
var j_c="j_content_"+i;
//... qui contient toutes les cases
for (var k=0; k<max_; k++) {
for (var j=0; j<max_; j++) {
//on crée les cases (div "n_div")...
var id_blocks="#blocked_blocks_"+i+"_"+k+"_"+j;
var n_div = document.createElement("div");
var n_div2 = document.createElement("div");
var b_l=-w*j;
var b_t=-h*k;
n_div.style.width= w;
n_div.style.height= h;
n_div.style.styleFloat= "left";
n_div.setAttribute("style", n_div.getAttribute("style") + "; float:left; ");
n_div.id="blocked_blocks_"+i+"_"+k+"_"+j;
var j_content="#j_content_"+i;
$(j_content).append(n_div);
//... qui contiennent chacune une div avec en image de fond l'image d'origine en position différente
n_div2.style.backgroundImage="url("+img_src+")";
n_div2.style.backgroundPosition=b_l+"px "+b_t+"px";
n_div2.style.width= w;
n_div2.style.height= h;
n_div2.style.display= "none";
n_div2.id="blocked_blocks2_"+i+"_"+k+"_"+j;
$(id_blocks).append(n_div2);
}
}
//en on appelle la fonction permettant l'effet fadeIn de jQuery
move_it(i);
}
function move_it(i) {
for (var k=0; k<max_; k++) {
for (var j=0; j<max_; j++) {
var t = Math.random()*tmax+1000;
var id_blocks2="#blocked_blocks2_"+i+"_"+k+"_"+j;
$(id_blocks2).fadeIn(t);
}
}
}
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.