Elke keer wordt er een patroon (random) aangemaakt. De volgorde (van het puzzle-schuiven) is daardoor nooit hetzelfde. Om een afbeelding dit effect op jouw webpagina te geven, moet je de onderstaande code (de div en het tussenliggende javascript) ergens in de body-sectie van jouw pagina plaatsen.
<div style="height:280px;">
<script>
var jigsaw_plaatje = "http://static.dns5.nl/jigsaw-transition.jpg",
transition_timer,
breedte_plaatje = 240,
hoogte_plaatje = 240,
positie_links_plaatje = 30,
positie_top_plaatje = 300,
kolommen = 6,
rijen = 6,
snelheid_transition = 3,
verplaats_pixels = 1,
schuif_stapjes = verplaats_pixels * hoogte_plaatje / breedte_plaatje,
schuiven_breedte = Math.round(breedte_plaatje / kolommen),
schuiven_hoogte = Math.round(hoogte_plaatje / rijen),
de_breedte_factor = 0,
de_hoogte_factor = 0,
stop_hier = 0,
neem_grote_stappen = 1,
kom_van_links = [],
kom_van_boven = [],
y,
i = "",
a = "";
function shuffle_jigsaw(top, bottom) {
if (!bottom) {
bottom = 0;
}
var num = Math.random();
num = bottom + Math.floor(num * (top - bottom + 1));
return num;
}
function jigsaw_effect() {
stop_hier = stop_hier + 1;
var het_blokje = [];
var array_links = [];
var array_boven = [];
for (var u = 1; u <= kolommen * rijen; u++) {
var het_id = "bloknummer" + u;
var waardea = parseInt((kom_van_links[u - 1]), 10);
var waardeb = parseInt((kom_van_boven[u - 1]), 10);
var waardec = parseInt((document.getElementById(het_id).style.left), 10);
var waarded = parseInt((document.getElementById(het_id).style.top), 10);
if (waardea != waardec || waardeb != waarded) {
het_blokje.length = het_blokje.length + 1;
var getalgeteld = het_blokje.length - 1;
het_blokje[getalgeteld] = het_id;
array_links.length = array_links.length + 1;
array_links[getalgeteld] = kom_van_links[u - 1];
array_boven.length = array_boven.length + 1;
array_boven[getalgeteld] = kom_van_boven[u - 1];
}
}
if (het_blokje.length > 0) {
for (i = 1; i <= het_blokje.length; i++) {
var vanlinksaktueel = array_links[i - 1];
var vanbovenaktueel = array_boven[i - 1];
var jigsaw_blok_x = parseFloat(document.getElementById(het_blokje[i - 1]).style.left);
var jigsaw_blok_y = parseFloat(document.getElementById(het_blokje[i - 1]).style.top);
if (jigsaw_blok_x != vanlinksaktueel || jigsaw_blok_y != vanbovenaktueel) {
var jigsaw_diff_xmov = 0;
var jigsaw_diff_ymov = 0;
var jigsaw_diff_x = 0;
var jigsaw_diff_y = 0;
if (jigsaw_blok_x != vanlinksaktueel) {
jigsaw_diff_xmov = (verplaats_pixels * neem_grote_stappen);
jigsaw_diff_x = vanlinksaktueel - jigsaw_blok_x;
if (jigsaw_diff_x <= 0) {
jigsaw_diff_x = -jigsaw_diff_x;
}
var jigsaw_diff_xb = vanlinksaktueel - jigsaw_blok_x;
if (jigsaw_diff_xb <= 0) {
jigsaw_diff_xmov = -jigsaw_diff_xmov;
}
}
if (jigsaw_blok_y != vanbovenaktueel) {
jigsaw_diff_ymov = (schuif_stapjes * neem_grote_stappen);
jigsaw_diff_y = vanbovenaktueel - jigsaw_blok_y;
if (jigsaw_diff_y <= 0) {
jigsaw_diff_y = -jigsaw_diff_y;
}
var jigsaw_diff_yb = vanbovenaktueel - jigsaw_blok_y;
if (jigsaw_diff_yb <= 0) {
jigsaw_diff_ymov = -jigsaw_diff_ymov;
}
}
if (Math.abs(jigsaw_diff_x) <= (verplaats_pixels * neem_grote_stappen)) {
jigsaw_blok_x = vanlinksaktueel;
} else {
jigsaw_blok_x += jigsaw_diff_xmov;
}
if (Math.abs(jigsaw_diff_y) <= (schuif_stapjes * neem_grote_stappen)) {
jigsaw_blok_y = vanbovenaktueel;
} else {
jigsaw_blok_y += jigsaw_diff_ymov;
}
document.getElementById(het_blokje[i - 1]).style.left = jigsaw_blok_x + "px";
document.getElementById(het_blokje[i - 1]).style.top = jigsaw_blok_y + "px";
}
}
if (stop_hier <= 1000) {
transition_timer = setTimeout(function() {
jigsaw_effect();
},
snelheid_transition);
}
}
}
for (a = 1; a <= (kolommen * rijen); a++) {
var fix_de_x = shuffle_jigsaw(breedte_plaatje + (positie_links_plaatje * 1) - schuiven_breedte, positie_links_plaatje);
var fix_de_y = shuffle_jigsaw(hoogte_plaatje + (positie_top_plaatje * 1) - schuiven_hoogte, positie_top_plaatje);
var idplaatje = "bloknummer" + a;
var plekjelinks = ((de_breedte_factor) * ( - 1) * (schuiven_breedte));
var berekenclipbreedte = (de_breedte_factor + (1 * 1)) * schuiven_breedte;
var clipbreedte = de_breedte_factor * schuiven_breedte;
var plekjetop = de_hoogte_factor * -1 * schuiven_hoogte;
var cliphoogte = de_hoogte_factor * schuiven_hoogte;
var bereken_cliphoogte = (de_hoogte_factor + (1 * 1)) * schuiven_hoogte;
var blijf_binnen_lijn_rechts = kom_van_links.length;
kom_van_links[blijf_binnen_lijn_rechts] = clipbreedte + (positie_links_plaatje * 1);
var blijf_binnen_lijn_beneden = kom_van_boven.length;
kom_van_boven[blijf_binnen_lijn_beneden] = cliphoogte + (positie_top_plaatje * 1);
document.write("<div id='" + idplaatje + "' style='position:absolute;left:" + fix_de_x + "px; top:" + fix_de_y + "px; width:" + schuiven_breedte + "px; height:" + schuiven_hoogte + "px; clip:rect(0px," + schuiven_breedte + "px," + schuiven_hoogte + "px,0px);overflow:hidden; z-index: 3'><img src=" + jigsaw_plaatje + " width=" + breedte_plaatje + "px height=" + hoogte_plaatje + "px style='position:absolute;left:" + plekjelinks + "px; top:" + plekjetop + "px;clip:rect(" + cliphoogte + "px," + berekenclipbreedte + "px," + bereken_cliphoogte + "px," + clipbreedte + "px);overflow:hidden;'></div>");
de_breedte_factor += 1;
if (de_breedte_factor >= kolommen) {
de_breedte_factor = 0;
de_hoogte_factor += 1;
}
}
window.onload = jigsaw_effect;
</script>
</div>