home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het javascript-menu

Een paar regeltjes code om deze (cross-browser) skew-transition op jouw website te "zetten". In dit voorbeeld laat ik twee plaatjes elkaar afwisselen, maar met een beetje kunst- en vlieg-werk kan je natuurlijk een ongelimiteerde hoeveelheid images gebruiken. Eerst zet ik hieronder de CSS:

<style type="text/css">
	#skew_div{
		position:absolute;z-index:-1;top:280px;left:150px}
</style>
		

Gevolgd door het stukje javascript, wat je zo laag mogelijk in de body-sectie moet plaatsen:

<script type="text/javascript">
var isie=0,skew_object,dit_id;
if (navigator.userAgent.indexOf("MSIE")!=-1){isie=1;}
var hetplaatje='<img id="skew_transition" src="http://static.dns5.nl/skew-1.jpg" alt="skew" width="240" height="340">';
var desnelheid=30;
var wissel=1;
var skew_img=document.getElementById('skew_transition');
var skew_breedte=skew_img.clientWidth;
var stapje=skew_breedte/99;
var aantalgraden=null,doen,m11=1,m12=0.001,m21=0.001,m22=1,plaatje;
var richting=1;
var deze_skew=99;
function doe_skew(){
	var skew_object = document.getElementById('skew_transition');
	if (richting==1){aantalgraden++;}
	if (richting===0){aantalgraden--;}
	if (aantalgraden==98) {
		if (wissel===0) {
			wissel=2;
			skew_object.src="http://static.dns5.nl/skew-1.jpg";}
		if (wissel==1){
			wissel=3;
			skew_object.src="http://static.dns5.nl/skew-2.jpg";}
		richting=0;}
	if (wissel==2){
		wissel=1;}
	if (wissel==3) {
		wissel=0;}
	if (aantalgraden===0){
		richting=1;}
	if (richting==1){
		deze_skew--;
		skew_breedte=skew_breedte-stapje;
		m11=m11-0.01;
		m12=m12-0.005;
		m21=m21-0.001;
		m22=1;}
	if (richting===0){
		deze_skew++;
		skew_breedte=skew_breedte+stapje;
		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_div');
	document.getElementById('skew_div').style.MozTransform = 'skew(' + aantalgraden / 6 + 'deg,' + aantalgraden / 8 + 'deg) ';
	document.getElementById('skew_div').style.webkitTransform = 'skew(' + aantalgraden / 6 + 'deg,' + aantalgraden / 8 + 'deg) ';
	if(isie===0){
		skew_object.style.width=skew_breedte+'px';}
	document.getElementById('skew_div').style.OTransform='skew(' + aantalgraden / 6 + 'deg,' + aantalgraden / 8 + 'deg) ';
	doen=setTimeout(function(){
		doe_skew();},
	desnelheid);}
function animeer_skew() {
	if (document.getElementById) {
		plaatje=document.getElementById("skew_div");
		plaatje.innerHTML=hetplaatje;
		doe_skew();}}
</script>
		

En tot slot de div die je ergens in de body van jouw pagina kan plaatsen:

<div id="skew_div"><img id="skew_transition" src="http://static.dns5.nl/skew.jpg" alt="skew" width="240" height="340"></div>
		

De gehele procedure valideert html(5) en CSS, en ook het stukje javascript is "goedgekeurd" door JSLint.

cache 10-02-2011