Plaats de html code op jouw pagina waar de "ge-skewde" afbeelding moet verschijnen, en plaats het javascript zo laag als mogelijk in de body-sectie van jouw pagina. De variabelen in het script zijn duidelijk omschreven. Wijzig de naam van de afbeelding, de afmetingen/positie en de snelheid van de skew naar eigen inzicht en smaak. De skew-procedure is foutloos volgens JSLint.
<div id="skew_positie"><div id="skew_animatie"></div></div>
<script>
/*global window: false */
var skew_afbeelding = "http://static.dns5.nl/skew.jpg";
var hoogte_afbeelding = 140;
var breedte_afbeelding = 200;
var marge_links = 30;
var marge_bottom = 20;
var alt_skew_afbeelding = "skew animatie";
var totale_hoogte = marge_bottom + hoogte_afbeelding;
var het_skew_effect__plaatje = '<img src="' + skew_afbeelding + '" alt="' + alt_skew_afbeelding + '" width="' + breedte_afbeelding + '" height="' + hoogte_afbeelding + '">';
var skew_animatie_snelheid = 20;
var aantal_graden = null,
effect_timer,
m11 = 1,
m12 = 0.001,
m21 = 0.001,
m22 = 1,
effect__plaatje;
var richting = 1;
var de_css_effect_code = "#skew_animatie{position:absolute;z-index:-1}#skew_positie{margin-left:" + marge_links + "px;height:" + totale_hoogte + "px}",
skew_animatie_element = document.createElement("style");
skew_animatie_element.type = "text/css";
if (skew_animatie_element.styleSheet) {
skew_animatie_element.styleSheet.cssText = de_css_effect_code;
} else {
skew_animatie_element.appendChild(document.createTextNode(de_css_effect_code));
}
document.getElementsByTagName("head")[0].appendChild(skew_animatie_element);
function run_skew_effect() {
if (richting == 1) {
aantal_graden++;
}
if (richting === 0) {
aantal_graden--;
}
if (aantal_graden == 40) {
richting = 0;
}
if (aantal_graden === 0) {
richting = 1;
}
if (richting == 1) {
m11 = 1;
m12 = m12 + 0.005;
m21 = m21 + 0.005;
m22 = 1;
}
if (richting === 0) {
m11 = 1;
m12 = m12 - 0.005;
m21 = m21 - 0.005;
m22 = 1;
}
effect__plaatje.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + m11 + ",M12=" + m12 + ",M21=" + m21 + ",M22=" + m22 + ",sizingMethod='auto expand');";
document.getElementById('skew_animatie').style.MozTransform = 'skew(' + aantal_graden / 5 + 'deg,' + aantal_graden / 5 + 'deg) ';
document.getElementById('skew_animatie').style.webkitTransform = 'skew(' + aantal_graden / 5 + 'deg,' + aantal_graden / 5 + 'deg) ';
document.getElementById('skew_animatie').style.OTransform = 'skew(' + aantal_graden / 5 + 'deg,' + aantal_graden / 5 + 'deg) ';
effect_timer = setTimeout(function() {
run_skew_effect();
},
skew_animatie_snelheid);
}
function animeer_skew() {
if (document.getElementById) {
effect__plaatje = document.getElementById("skew_animatie");
effect__plaatje.innerHTML = het_skew_effect__plaatje;
run_skew_effect();
}
}
window.onload = animeer_skew;
</script>