Voor deze transitie heb je minimaal acht afbeeldingen nodig, een stuk javascript, en een paar regels html-code. Plaats de html-regels op de plaats waar je de transitie wilt laten zien. en "zet" het javascript zo laag als mogelijk in de body-sectie van de pagina. Plaats jouw eigen (image) files in het script, en geef de hoogte, breedte, snelheid etc. aan in de daarvoor bestemde variabelen. Het script is foutloos volgens de JSLint-norm en voor het overige valideert de pagina op alle mogelijke manieren.
<div id="skew_transitie">
<img id="skew_transition"
src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII='
alt="skew transitie" width="200" height="200">
</div>
<script>
var hoogte_skew_afbeelding = 200;
var breedte_skew_afbeelding = 200;
var marge_onder_skew_afbeelding = 40;
var marge_links_skew_afbeelding = 100;
var pauze_transition = 2000;
var skew_images = [];
skew_images[0] = "skew_image_0.jpg";
skew_images[1] = "skew_image_1.jpg";
skew_images[2] = "skew_image_2.jpg";
skew_images[3] = "skew_image_3.jpg";
skew_images[4] = "skew_image_4.jpg";
skew_images[5] = "skew_image_5.jpg";
skew_images[6] = "skew_image_6.jpg";
skew_images[7] = "skew_image_7.jpg";
var lengte_skew_array = skew_images.length,
skew_spacer = hoogte_skew_afbeelding + marge_onder_skew_afbeelding;
var css_transition = "#skew_transitie{margin-left:" + marge_links_skew_afbeelding + "px;position:absolute;}.transitie_spacer{height:" + skew_spacer + "px;}",
skew_style_element = document.createElement("style");
skew_style_element.type = "text/css";
if (skew_style_element.styleSheet) {
skew_style_element.styleSheet.cssText = css_transition;
} else {
skew_style_element.appendChild(document.createTextNode(css_transition));
}
document.getElementsByTagName("head")[0].appendChild(skew_style_element);
var is_even;
if (lengte_skew_array % 2 === 0) {
is_even = 1;
} else {
is_even = 0;
}
var tijdelijke_skew_image = [],
transition_pauze = 0,
is_ie = 0,
transition_object,
dit_id,
eerste_skew = 0,
tweede_skew = 1,
skew_wissel = 0;
tijdelijke_skew_image[0] = skew_images[eerste_skew];
tijdelijke_skew_image[1] = skew_images[tweede_skew];
if (navigator.userAgent.indexOf("MSIE") != -1) {
is_ie = 1;
}
var hetplaatje = '<img id="skew_transition" src="' + skew_images[eerste_skew] + '" alt="skew transition" width="' + breedte_skew_afbeelding + '" height="' + hoogte_skew_afbeelding + '">',
desnelheid = 20,
wissel = 1,
skew_img = document.getElementById('skew_transition'),
skew_breedte = skew_img.clientWidth,
skew_pixels = skew_breedte / 96,
aantalgraden = null,
doen,
m11 = 1,
m12 = 0.001,
m21 = 0.001,
m22 = 1,
plaatje,
skew_richting = 1;
function pauze(milli_seconde) {
var tijd = new Date();
while ((new Date()) - tijd < milli_seconde) {}
}
function skew_transition() {
var transition_object = document.getElementById('skew_transition');
if (skew_richting == 1) {
aantalgraden++;
}
if (skew_richting === 0) {
aantalgraden--;
}
if (aantalgraden == 96) {
if (wissel === 0) {
wissel = 2;
transition_object.src = tijdelijke_skew_image[0];
}
if (wissel == 1) {
wissel = 3;
transition_object.src = tijdelijke_skew_image[1];
}
skew_richting = 0;
}
if (wissel == 2) {
wissel = 1;
}
if (wissel == 3) {
wissel = 0;
}
if (aantalgraden === 0) {
if (is_even == 1) {
if (eerste_skew > lengte_skew_array - 1) {
skew_wissel = 0;
eerste_skew = -2;
tweede_skew = -1;
}
} else {
if (tweede_skew > lengte_skew_array - 1) {
eerste_skew = -1;
tweede_skew = 0;
} else if (eerste_skew > lengte_skew_array - 1) {
skew_wissel = 0;
eerste_skew = -2;
tweede_skew = -1;
}
}
if (skew_wissel == 5) {
skew_wissel = 4;
eerste_skew = eerste_skew + 2;
} else if (skew_wissel == 4) {
skew_wissel = 5;
tweede_skew = tweede_skew + 2;
} else if (skew_wissel == 3) {
skew_wissel = 4;
tweede_skew = tweede_skew + 1;
eerste_skew = eerste_skew + 2;
} else if (skew_wissel == 2) {
skew_wissel = 3;
tweede_skew = tweede_skew + 1;
} else if (skew_wissel == 1) {
skew_wissel = 2;
eerste_skew = eerste_skew + 2;
} else if (skew_wissel === 0) {
skew_wissel = 1;
eerste_skew = eerste_skew + 2;
tweede_skew = tweede_skew + 2;
}
tijdelijke_skew_image[0] = skew_images[eerste_skew];
tijdelijke_skew_image[1] = skew_images[tweede_skew];
transition_pauze = 1;
skew_richting = 1;
}
if (skew_richting == 1) {
skew_breedte = skew_breedte - skew_pixels;
m11 = m11 - 0.01;
m12 = m12 - 0.005;
m21 = m21 - 0.001;
m22 = 1;
}
if (skew_richting === 0) {
skew_breedte = skew_breedte + skew_pixels;
m11 = m11 + 0.01;
m12 = m12 + 0.005;
m21 = m21 + 0.001;
m22 = 1;
}
plaatje.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + m11 + ",M12=" + m12 + ",M21=" + m21 + ",M22=" + m22 + ",sizingMethod='auto expand');";
dit_id = document.getElementById('skew_transitie');
document.getElementById('skew_transitie').style.MozTransform = 'skew(' + aantalgraden / 6 + 'deg,' + aantalgraden / 8 + 'deg) ';
document.getElementById('skew_transitie').style.webkitTransform = 'skew(' + aantalgraden / 6 + 'deg,' + aantalgraden / 8 + 'deg) ';
if (is_ie === 0) {
transition_object.style.width = skew_breedte + 'px';
}
document.getElementById('skew_transitie').style.OTransform = 'skew(' + aantalgraden / 6 + 'deg,' + aantalgraden / 8 + 'deg) ';
if (transition_pauze == 1) {
clearTimeout(doen);
pauze(pauze_transition);
transition_pauze = 0;
}
if (transition_pauze === 0) {
doen = setTimeout(function() {
skew_transition();
},
desnelheid);
}
}
function start_skew_transition() {
if (document.getElementById) {
plaatje = document.getElementById("skew_transitie");
plaatje.innerHTML = hetplaatje;
skew_transition();
}
}
setTimeout(function() {
start_skew_transition();
},
200);
</script>