Er is geen CSS ondersteuning.
Deze image animatie is een beetje saai en stok- en stok-oud. Toch werkt de animatie nog in alle browsers
en valideert voor 100% op html(5), css en natuurlijk ook voor JSLint. Als je dit saaie doch degelijke
scriptje op jouw website wilt gebruiken hoef je alleen maar de body-tag te vervangen door:
<body onload="start_animatie();">
En ergens op de pagina een <img> te plaatsen met het id draai, en het onderstaande
javascript, wat je zo laag mogelijk in de body-sectie van jouw pagina moet plaatsen. Verder
niets meer te melden over deze procedure.
<script>
/*global window: false */
var animatie_tijd= 2.9;
var animatie_pauze = 3.5;
var alle_plaatjes = ["http://static.dns5.nl/animeer_1.jpg", "http://static.dns5.nl/animeer_4.jpg","http://static.dns5.nl/animeer_3.jpg", "http://static.dns5.nl/animeer_2.jpg"];
var animeer,
animatie = function() {};
animeer = function(i_komt_van, i_gaat_naar) {
this.plaatje_geladen = false;
this.begin_bij_laden = false;
this.is_bezig = false;
var init = this.start_de_boel(i_komt_van, i_gaat_naar);
if (!init) {
return;
}
return this;
};
animeer.prototype.isklaar = null;
animeer.prototype.deinterval = null;
animeer.prototype.background = null;
animeer.prototype.vertraging = 0.100;
animeer.prototype.dediepte = 1.900;
animeer.prototype.roteertijd = 0.010;
animeer.prototype.minresolutie = 120;
animeer.prototype.vertraging = 0.100;
animeer.prototype.maxresolutie = 120;
animeer.prototype.cursor = 0;
animeer.prototype.herhaal = true;
animeer.prototype.linksom = false;
animeer.prototype.start_de_boel = function(i_komt_van, i_gaat_naar) {
this.canvas = document.createElement("div");
this.canvas.style.position = "relative";
this.plaatje_base = new animeer.Image(this.canvas);
var deze_basis = this.plaatje_base.fromElement(i_komt_van);
if (!deze_basis) {
return;
}
this.canvas_breedte = deze_basis.offsetWidth;
this.canvasHeight = deze_basis.offsetHeight;
deze_basis.parentNode.insertBefore(this.canvas, deze_basis);
var plaatjes_lijst;
if (typeof(i_gaat_naar) == "string") {
plaatjes_lijst = [deze_basis.src, i_gaat_naar];
this.herhaal = false;
} else {
plaatjes_lijst = i_gaat_naar;
this.herhaal = true;
}
this.plaatjes_buffer = [];
var __this = this;
var __len = plaatjes_lijst.length;
var trigcheck = function(elem) {
for (var i = 0; i < __len; i++) {
if (!__this.plaatjes_buffer[i].loaded) {
return;
}
}
__this.plaatje_geladen = true;
if (__this.begin_bij_laden) {
__this.begin_bij_laden = false;
__this.beginanimatie();
}
};
for (var i = 0; i < plaatjes_lijst.length; i++) {
this.plaatjes_buffer[i] = new animeer.Image(this.canvas);
this.plaatjes_buffer[i].onLoad = trigcheck;
this.plaatjes_buffer[i].fromURL(plaatjes_lijst[i]);
}
return true;
};
animeer.ev_voeg_toe = function(elem, type, func) {
if (elem.addEventListener) {
return elem.addEventListener(type, func, false);
} else if (elem.attachEvent) {
return elem.attachEvent("on" + type, func);
}
};
animeer.prototype.roteer_het = function() {
if (this.is_bezig) {
return;
}
if (this.plaatje_geladen) {
this.beginanimatie();
} else {
this.begin_bij_laden = true;
}
};
animeer.prototype.beginanimatie = function() {
if (this.background) {
this.canvas.style.background = this.background;
}
var v_curs = this.volgende_cursor(this.cursor);
this.plaatje_base.elem.style.visibility = "hidden";
this.rotation = this.linksom ? 0.0: 1.0;
if (this.linksom) {
this.plaatje_links = this.plaatjes_buffer[this.cursor];
this.plaatje_rechts = this.plaatjes_buffer[v_curs];
} else {
this.plaatje_links = this.plaatjes_buffer[v_curs];
this.plaatje_rechts = this.plaatjes_buffer[this.cursor];
}
this.de_richting = this.linksom;
this.is_bezig = true;
this.timer = new animeer.Timer(this);
this.timer.start();
};
animeer.prototype.volgende_cursor = function(cur) {
if (this.linksom) {
cur++;
cur = cur % this.plaatjes_buffer.length;
} else {
cur--;
if (cur < 0) {
cur += this.plaatjes_buffer.length;
}
}
return cur;
};
animeer.prototype.doe_hoek = function() {
if (this.timer) {
if (this.timer.is_bezig()) {
this.timer.stop();
}
this.timer = null;
}
if (!this.is_bezig) {
return;
}
this.plaatje_links.verberg_clip(0);
this.plaatje_rechts.verberg_clip(0);
if (this.de_richting == this.linksom) {
this.cursor = this.volgende_cursor(this.cursor);
}
this.de_richting = null;
this.plaatje_base.elem.src = this.plaatjes_buffer[this.cursor].elem.src;
this.plaatje_base.elem.style.width = this.canvas_breedte + "px";
this.plaatje_base.elem.style.height = this.canvasHeight + "px";
this.plaatje_base.elem.style.visibility = "visible";
};
animeer.prototype.nextanimatie = function() {
this.doe_hoek();
var __this = this;
var func = function() {
if (!__this.is_bezig) {
return;
}
__this.beginanimatie();
};
if (this.deinterval) {
this.deinterval(this.cursor);
}
if (!this.is_bezig) {
return;
}
setTimeout(func, this.vertraging * 1000);
};
animeer.prototype.finish = function() {
this.doe_hoek();
this.is_bezig = false;
if (this.isklaar) {
this.isklaar(this.cursor);
}
};
animeer.prototype.loop = function(secs, diff, tellen) {
if (!this.is_bezig) {
return;
}
if (!this.linksom) {
diff = -diff;
}
this.rotation += diff * 0.001 / this.roteertijd;
var controleer = false;
if (this.rotation > 1.0) {
this.rotation = 1.0;
controleer = true;
} else if (this.rotation < 0.0) {
this.rotation = 0.0;
controleer = true;
}
this.display(this.rotation);
if (controleer) {
if (this.herhaal) {
this.nextanimatie();
} else {
this.finish();
}
return false;
} else {
return true;
}
};
animeer.prototype.display = function(prog) {
var alpha = (1.0 - 2.0 * prog) / 4.0 * Math.PI;
var de_sinus = Math.sin(alpha);
var de_cosinus = Math.cos(alpha);
var ah = this.dediepte / (this.dediepte + (de_cosinus + de_sinus));
var bh = 1;
var ch = this.dediepte / (this.dediepte + (de_cosinus - de_sinus));
var aw = de_cosinus * ah;
var bw = de_sinus;
var cw = -de_cosinus * ch;
var ow = 0;
if (aw > Math.SQRT1_2) {
ow = aw - Math.SQRT1_2;
}
if (cw < -Math.SQRT1_2) {
ow = cw + Math.SQRT1_2;
}
if (ow) {
aw -= ow;
bw -= ow;
cw -= ow;
}
if (aw > bw) {
this.laat_panel_zien(this.plaatje_rechts, bw, bh, aw, ah);
} else {
this.plaatje_rechts.verberg_clip(0);
}
if (cw < bw) {
this.laat_panel_zien(this.plaatje_links, cw, ch, bw, bh);
} else {
this.plaatje_links.verberg_clip(0);
}
};
animeer.prototype.laat_panel_zien = function(img, x1, h1, x2, h2) {
if (x1 > x2) {
var x0 = x1;
x1 = x2;
x2 = x0;
var h0 = h1;
h1 = h2;
h2 = h0;
}
var lx = Math.round(Math.SQRT1_2 * this.canvas_breedte * (x1 + Math.SQRT1_2));
var lh = Math.round(this.canvasHeight * h1);
var ly = Math.round((this.canvasHeight - lh) / 2);
var rx = Math.round(Math.SQRT1_2 * this.canvas_breedte * (x2 + Math.SQRT1_2));
var rh = Math.round(this.canvasHeight * h2);
var ry = Math.round((this.canvasHeight - rh) / 2);
var reso = this.canvas_breedte;
if (ry != ly) {
reso = Math.round(Math.abs(2.0 * (rx - lx) / (ry - ly)));
if (reso > this.maxresolutie) {
reso = this.maxresolutie;
}
if (reso < this.minresolutie) {
reso = this.minresolutie;
}
}
var ww = rx - lx;
var clipnum = 0;
for (var ix = lx; ix < rx; ix += reso) {
var prog = (ix - lx) / (rx - lx);
var iy = Math.round(ly + (ry - ly) * prog);
var ih = Math.round(lh + (rh - lh) * prog);
var iw = reso;
if (ix + iw > this.canvas_breedte) {
iw = this.canvas_breedte - ix;
}
img.show_clip(clipnum, ix, iy, iw, ih, prog, ww);
clipnum++;
}
img.verberg_clip(clipnum);
};
animeer.Image = function(werker) {
this.werker = werker;
this.elem = null;
this.onLoad = null;
this.clipbuf = [];
this.loaded = false;
this.lasthided = null;
return this;
};
animeer.Image.prototype.getClip = function(num) {
if (this.clipbuf[num]) {
return this.clipbuf[num];
}
var line = this.elem.cloneNode(true);
line.style.position = "absolute";
line.style.display = "";
line.style.visibility = "hidden";
this.clipbuf[num] = line;
return line;
};
animeer.Image.prototype.verberg_clip = function(num) {
var lastclip = this.clipbuf.length;
if (this.lasthided !== null) {
lastclip = this.lasthided;
}
for (var i = num; i < lastclip; i++) {
this.clipbuf[i].style.visibility = "hidden";
}
this.lasthided = num;
};
animeer.Image.prototype.show_clip = function(num, left, top, width, height, prog, xcomp) {
var line = this.getClip(num);
var offset = Math.round(xcomp * prog);
var lstyle = line.style;
lstyle.left = (left - offset) + "px";
lstyle.width = xcomp + "px";
lstyle.top = top + "px";
lstyle.height = height + "px";
lstyle.visibility = "visible";
lstyle.clip = "rect(0px," + (offset + width) + "px," + (height) + "px," + offset + "px)";
this.werker.appendChild(line);
};
animeer.Image.prototype.fromElement = function(elem) {
if (typeof elem == "string") {
elem = document.getElementById(elem);
}
if (!elem) {
return;
}
if (elem.tagName != "IMG") {
return;
}
this.elem = elem;
this.loaded = true;
return elem;
};
animeer.Image.prototype.fromURL = function(url) {
var elem = document.createElement("img");
elem.src = url;
elem.style.visibility = "hidden";
elem.style.position = "absolute";
this.werker.appendChild(elem);
this.check_of_geladen(elem);
this.elem = elem;
return elem;
};
animeer.Image.prototype.check_of_geladen = function(orig) {
var check = orig.cloneNode(true);
var __this = this;
var ldfunc = function(e) {
if (!e && window.event) {
e = window.event;
}
__this.loaded = true;
check.parentNode.removeChild(check);
if (__this.onLoad) {
__this.onLoad();
}
};
animeer.ev_voeg_toe(check, "load", ldfunc);
this.werker.appendChild(check);
};
animeer.Timer = function(target) {
this.target = target;
this.started = false;
this.is_gestopt = false;
this.tellen = 0;
var __this = this;
this.next = function() {
if (__this.is_gestopt) {
return;
}
var now_time = (new Date()).getTime();
if (!__this.begin_time) {
__this.begin_time = now_time;
}
if (!__this.vorige_keer) {
__this.vorige_keer = now_time;
}
var werk_tijd = now_time - __this.begin_time;
var diff_time = now_time - __this.vorige_keer;
__this.vorige_keer = now_time;
var flag = __this.target.loop(werk_tijd, diff_time, __this.tellen++);
if (flag) {
setTimeout(__this.next, 1);
} else {
__this.stop();
}
};
return this;
};
animeer.Timer.prototype.start = function() {
this.started = true;
this.is_gestopt = false;
this.next();
};
animeer.Timer.prototype.now = function() {
return (new Date()).getTime();
};
animeer.Timer.prototype.stop = function() {
this.is_gestopt = true;
};
animeer.Timer.prototype.is_bezig = function() {
return (this.started && !this.is_gestopt);
};
var de_run;
function regel_ini() {
de_run = new animeer("draai", alle_plaatjes);
de_run.roteertijd = animatie_tijd;
de_run.vertraging = animatie_pauze;
}
function start_animatie() {
if (!de_run) {
setTimeout(function() {
regel_ini();
},
200);
}
setTimeout(function() {
de_run.roteer_het();
},
200);
}
</script>
cache 22-02-2011