KOMPOOS.NL

animated jpg

home » javascripts » image-effects » animate-jpg.html

voorbeeld geanimeerde jpg-file

uitleg jpg animatie

Ik denk dat wel duidelijk is welk effect het jpg-plaatje heeft meegekregen (tenminste als jouw javascript ingeschakeld staat). Zoals gewoonlijk meld ik even dat de stylesheet in de head-sectie geplaatst dient te worden, de div met het id '' moet ergens in de body-sectie, en het javascript moet ook naar de body, maar wel liefst zo laag als mogelijk. Ik heb de javascript-code helemaal "uitgesponnen" zodat je eenvoudig de code (het effect) aan jouw eigen wensen kan aanpassen. Ondanks dat JSLint iets "strenger" is geworden, valideert het script geheel volgens de norm. Je kan trouwens allerlei andere zaken ook laten "draaien". Zolang je een id maar "aanspreekt" met de javascript-routine.

stylesheet van de animated jpg procedure


<style type="text/css">
        #positie_animatie{
                position:relative;
                margin-left:40px;
                height:160px;
                z-index:-1}
        #jpg_animatie_id{
                position:absolute}
</style>

html code voor de animated jpg


<div id="positie_animatie">
        <div id="jpg_animatie_id"></div>
</div>

javascript voor het geanimeerde jpg gebeuren


<script>
/*global clearTimeout: false */
/*global document: false */
/*global onload: true */
/*global setTimeout: false */
var het_jpg_plaatje = '<img src="animated.jpg" alt="geanimeerd plaatje" width="160" height="160">';
var animatie_snelheid = 5;
var het_aantal_graden = 0,
    animatie_timer, radius_a, cosinus_a, sinus_a, m11, m12, m21, m22, animatie_id, graden_naar_radius = Math.PI * 2 / 360;
var verminder_graden_met = 20;
var richting = 1;
function animeer_de_jpg() {
    if (richting === 14) {
        clearTimeout(animatie_timer);
    }
    if (richting === 13) {
        het_aantal_graden++;
    }
    if (het_aantal_graden === 359) {
        het_aantal_graden = 0;
        richting = 14;
    }
    if (richting === 1) {
        het_aantal_graden++;
    }
    if (richting === 0) {
        het_aantal_graden--;
    }
    if (verminder_graden_met === 16) {
        het_aantal_graden = 0;
        richting = 13;
    }
    if (het_aantal_graden === 0) {
        verminder_graden_met--;
    }
    if (richting < 13) {
        if (het_aantal_graden === verminder_graden_met) {
            richting = 0;
        }
        if (het_aantal_graden === -verminder_graden_met) {
            richting = 1;
        }
    }
    radius_a = het_aantal_graden * graden_naar_radius;
    cosinus_a = Math.cos(radius_a);
    sinus_a = Math.sin(radius_a);
    m11 = parseFloat(cosinus_a).toFixed(8);
    m12 = parseFloat(-sinus_a).toFixed(8);
    m21 = parseFloat(sinus_a).toFixed(8);
    m22 = parseFloat(cosinus_a).toFixed(8);
    animatie_id.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + m11 + ",M12=" + m12 + ",M21=" + m21 + ",M22=" + m22 + ",sizingMethod='auto expand');";
    document.getElementById('jpg_animatie_id').style.MozTransform = 'rotate(' + het_aantal_graden + 'deg) ';
    document.getElementById('jpg_animatie_id').style.webkitTransform = 'rotate(' + het_aantal_graden + 'deg) ';
    document.getElementById('jpg_animatie_id').style.OTransform = 'rotate(' + het_aantal_graden + 'deg) ';
    animatie_timer = setTimeout(function () {
        animeer_de_jpg();
    }, animatie_snelheid);
}
function animeren() {
    if (document.getElementById) {
        animatie_id = document.getElementById("jpg_animatie_id");
        animatie_id.innerHTML = het_jpg_plaatje;
        animeer_de_jpg();
    }
}
onload = animeren;
</script>