Image transition (OldSchool) (1/3)

Animated transition between images at oldschool style with setTimeout.

by Karl Tayfer

HTML

<div id="box">
    <img id="logo" src="http://www.google.com/logos/1999/googlepump.gif" alt="Google Doodle" />
</div>

CSS

#box {
    background:#000;
    text-align:center
}

JavaScript

/*
 * Image transition (OldSchool) (1/3)
 * More at http://jsfiddle.net/user/daPhyre/
 */
window.addEventListener('load', load, false);
var logo = null,
    opacity = 1,
    currentImage = 0,
    images = [
        'http://www.google.com/logos/1999/googlepump.gif',
        'http://www.google.com/logos/1999/turkey_home2.gif',
        'http://www.google.com/logos/1999/snowmanC.gif'];

function load(evt) {
    logo = document.getElementById('logo');
    setTimeout(darkLogo, 4000);
}

function darkLogo() {
    opacity -= 0.05;
    logo.style.opacity = opacity;
    if (opacity > 0) {
        setTimeout(darkLogo, 50);
    } else {
        setImage(currentImage + 1);
    }
}

function setImage(i) {
    if (i >= images.length) {
        i = 0;
    }
    currentImage = i;
    logo.src = images[currentImage];
    clearLogo();
}

function clearLogo() {
    opacity += 0.05;
    logo.style.opacity = opacity;
    if (opacity < 1) {
        setTimeout(clearLogo, 50);
    } else {
        setTimeout(darkLogo, 4000);
    }
}