KOMPOOS.NL

image animatie script

home » javascripts » image-effects » image-rotation-animated.html

voorbeeld geanimeerde image rotatie

uitleg animatie_procedure

Om deze "draaiende dame" op jouw pagina te "zetten" moet je eerst de html code in jouw body sectie plaatsen, evenals het javascript, wat zo laag als mogelijk op de pagina geplaatst moet worden. Gebruik even de afbeelding die op deze pagina "staat" om deze procedure snel en eenvoudig op jouw website te testen. Als je jouw eigen afbeelding wilt gebruiken moet je de (file)naam in het script invullen bij de variabele naam_afbeelding. Voer bij de volgende twee variabelen (in het script) ook de hoogte en breedte van de afbeelding in. Vervang tot slot de <body> door het exemplaar wat hieronder staat. Als je rustig het scrip bestudeert, zal je zien dat het eenvoudig is om jouw eigen "show" te maken. Als je begrijpt hoe de huidige procedure werkt kan je zelf, om het even wat voor, animaties maken. Het javascript is foutloos volgens (Douglas Crockford's) JSLint.

de vervanging voor <body>


<body onload="animeer_rotatie();">

de html code van het animatie-gebeuren


<div id="roteer_id"></div><p class="animatie_hoogte"></p>

javascript van de plaatjes roteer animatie


<script>
var naam_afbeelding = "http://static.dns5.nl/geanimeerde-image.png";
var hoogte_afbeelding = 200;
var breedte_afbeelding = 200;
var de_css_code = "#roteer_id{position:absolute;}.animatie_hoogte{height:" + hoogte_afbeelding + "px}",
stylesheet_animatie = document.createElement("style");
stylesheet_animatie.type = "text/css";
if (stylesheet_animatie.styleSheet) {
    stylesheet_animatie.styleSheet.cssText = de_css_code;
} else {
    stylesheet_animatie.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stylesheet_animatie);
var rotatie_afbeelding = '<img src="' + naam_afbeelding + '" alt="geanimeerde rotatie" width="' + breedte_afbeelding + '" height="' + hoogte_afbeelding + '">';
var roteer_snelheid = 1;
var graden_roteren = 0,
animatie_timer,
de_radius,
de_cosinus,
de_sinus,
m11,
m12,
m21,
m22,
plaatje,
gradennaarradius = Math.PI * 2 / 360;
var hoe_vaak_animatie = 0;
var roteer_doel = 1;
function rotate_image() {
    if (hoe_vaak_animatie == 62) {
        hoe_vaak_animatie = 0;
        roteer_snelheid = 1;
        roteer_doel = 1;
    }
    if (roteer_doel == 1) {
        graden_roteren = graden_roteren + 90;
        if (graden_roteren > 359) {
            graden_roteren = 0;
            hoe_vaak_animatie++;
        }
        if (hoe_vaak_animatie == 60) {
            roteer_snelheid = 110;
            roteer_doel = 2;
        }
    }
    if (roteer_doel == 2) {
        graden_roteren = graden_roteren + 1;
        if (graden_roteren > 20) {
            roteer_doel = 3;
        }
    }
    if (roteer_doel == 3) {
        graden_roteren = graden_roteren - 1;
        if (graden_roteren < 2) {
            hoe_vaak_animatie++;
            roteer_doel = 2;
        }
    }
    de_radius = graden_roteren * gradennaarradius;
    de_cosinus = Math.cos(de_radius);
    de_sinus = Math.sin(de_radius);
    m11 = parseFloat(de_cosinus).toFixed(8);
    m12 = parseFloat( - de_sinus).toFixed(8);
    m21 = parseFloat(de_sinus).toFixed(8);
    m22 = parseFloat(de_cosinus).toFixed(8);
    plaatje.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + m11 + ",M12=" + m12 + ",M21=" + m21 + ",M22=" + m22 + ",sizingMethod='auto expand');";
    document.getElementById('roteer_id').style.MozTransform = 'rotate(' + graden_roteren + 'deg) ';
    document.getElementById('roteer_id').style.webkitTransform = 'rotate(' + graden_roteren + 'deg) ';
    document.getElementById('roteer_id').style.OTransform = 'rotate(' + graden_roteren + 'deg) ';
    animatie_timer = setTimeout(function() {
        rotate_image();
    },
    roteer_snelheid);
}
function animeer_rotatie() {
    if (document.getElementById) {
        plaatje = document.getElementById("roteer_id");
        plaatje.innerHTML = rotatie_afbeelding;
        rotate_image();
    }
}</script>