De checkerboard transition heeft een foutloos javascript (volgens JSLint). De pagina valideert overigens op elke mogelijke manier. Om de transitie op jouw pagina te plaatsen hoef je alleen maar het javascript (zo laag mogelijk) in de body-sectie te plaatsen en een div met het id "chess_transition" op de pagina te plaatsen (waar je de transitie weer wilt geven). Met een stylesheet kan je overigens dit id allerlei eigenschappen geven (positie etc.) In het script kan je de hoogte en breedte van de plaatjes bepalen. Ook de grootte van de "blokjes" kan je instellen (x_partjes en y_partjes). Tot slot kan je nog de snelheid van de transities en de pauze tussen twee wisselingen een gewenste waarde geven.
<div id="chess_transition"></div>
<script>
/*global window: false */
var img_naam = [];
img_naam[0] = "http://static.dns5.nl/checkerboard_1.jpg";
img_naam[1] = "http://static.dns5.nl/checkerboard_2.jpg";
img_naam[2] = "http://static.dns5.nl/checkerboard_3.jpg";
var img_breedte = 150;
var img_hoogte = 210;
var x_partjes = 5;
var y_partjes = 5;
var snelheid = 30;
var pauze = 3000;
var de_css_code = ".destijl{position:absolute}#chess_transition{display:block;height:" + img_hoogte + "px}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_code;
} else {
stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var i,
kl,
i_loop = 0,
timer,
tekstregel = "",
xypartjes = x_partjes * y_partjes,
willekeurig = [],
zpan = [],
i_images = 0,
breedtepartje = Math.floor(img_breedte / x_partjes),
hoogtepartje = Math.floor(img_hoogte / y_partjes),
klip_top = 0,
klip_bodem = hoogtepartje,
klip_links = 0,
klip_rechts = breedtepartje,
tempvar,
spanteller = 0;
for (i = 0; i <= xypartjes - 1; i++) {
zpan[i] = "naamspan" + i;
willekeurig[i] = i;
}
function doe_transition() {
if (i_loop <= xypartjes - 1) {
tempvar = document.getElementById(zpan[willekeurig[i_loop]]);
tempvar.innerHTML = "<img src='" + img_naam[i_images] + "'>";
i_loop++;
timer = setTimeout(function() {
doe_transition();
},
snelheid);
} else {
clearTimeout(timer);
timer = setTimeout(function() {
i_loop = 0;
i_images++;
if (i_images >= img_naam.length) {
i_images = 0;
}
doe_transition();
},
pauze);
}
}
function haal_in_willekeurige_volgorde(range) {
for (i = 0; i <= range; i++) {
var de_eerste = Math.floor(range * Math.random());
var de_tweede = Math.floor(range * Math.random());
var cachevalue = willekeurig[de_eerste];
willekeurig[de_eerste] = willekeurig[de_tweede];
willekeurig[de_tweede] = cachevalue;
}
}
function verander_plaatjes() {
haal_in_willekeurige_volgorde(xypartjes);
i_loop = 0;
i_images++;
if (i_images >= img_naam.length) {
i_images = 0;
}
doe_transition();
}
function doe_de_transition() {
spanteller = 0;
for (i = 0; i <= y_partjes - 1; i++) {
for (kl = 0; kl <= x_partjes - 1; kl++) {
tempvar = document.getElementById(zpan[spanteller]);
tempvar.style.clip = "rect(" + klip_top + "px " + klip_rechts + "px " + klip_bodem + "px " + klip_links + "px)";
klip_links = klip_links + breedtepartje;
klip_rechts += breedtepartje;
spanteller++;
}
klip_links = 0;
klip_rechts = breedtepartje;
klip_top += hoogtepartje;
klip_bodem += hoogtepartje;
}
for (i = 0; i <= xypartjes - 1; i++) {
tempvar = document.getElementById(zpan[i]);
tempvar.innerHTML = "<img src='" + img_naam[i_images] + "'>";
}
timer = setTimeout(function() {
verander_plaatjes();
},
pauze);
}
for (i = 0; i <= y_partjes - 1; i++) {
for (kl = 0; kl <= x_partjes - 1; kl++) {
var tekstregel = tekstregel + "<div id='naamspan" + spanteller + "' class='destijl'></div>";
document.getElementById("chess_transition").innerHTML = tekstregel;
spanteller++;
}
}
window.onload = function() {
setTimeout(function() {
doe_de_transition();
},
400);
};
</script>