MediaWiki:Spaghetti.js
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Strg+F5
// fading
var fade = 0;
var fadeDelay = 5;
var fadeStep = 1;
var fadeObjects = new Array();
function fadeIn(n) {
el = fadeObjects[n];
fade += fadeStep;
el.style.opacity = fade/100;
if (fade < 100)
window.setTimeout("fadeIn(" + n + ")", fadeDelay);
else
window.setTimeout("fadeOut(" + n + ")", fadeDelay);
}
function fadeOut(n) {
el = fadeObjects[n];
fade -= fadeStep;
el.style.opacity = fade/100;
if (fade > 0)
window.setTimeout("fadeOut(" + n + ")", fadeDelay);
else
window.setTimeout("fadeIn(" + n + ")", fadeDelay);
}
function fadeInit() {
for (var i = 0; i < fadeObjects.length; i++) {
fadeIn(i);
}
}
// color rotation
var rotateObjects = new Array();
var rotateDelay = 100;
var rotateStep = 5;
function rotationInit() {
for (var i = 0; i < rotateObjects.length; i++) {
setTimeout("rotateColors(" + i + ", \"color\", " + rotateStep + ")",1000);
setTimeout("rotateColors(" + i + ", \"background-color\", " + rotateStep + ")",1000);
}
}
function rotateColors(n, att, deg) {
var el = rotateObjects[n];
var style_ = document.defaultView.getComputedStyle(el, null);
if (!style_) return;
var value = style_.getPropertyCSSValue(att);
if (!value) return;
var color = value.getRGBColorValue();
if (!color) return;
var red = parseInt(color.red.cssText);
var green = parseInt(color.green.cssText);
var blue = parseInt(color.blue.cssText);
// see [http://de.wikipedia.org/wiki/HSV-Farbraum]
red /= 255;
green /= 255;
blue /= 255;
var max = Math.max(red, green, blue);
var min = Math.min(red, green, blue);
if (max == min) return;
var h;
if (max == red) {
h = (0 + (green - blue) / (max - min)) * 60;
} else if (max == green) {
h = (2 + (blue - red) / (max - min)) * 60;
} else if (max == blue) {
h = (4 + (red - green) / (max - min)) * 60;
}
if (h < 0)
h += 360;
// rotation happens here
h = (h + deg) % 360;
var s = (max - min) / max;
var v = max;
// back to rgb
var hi = Math.floor(h / 60) % 6;
var f = h / 60 - hi;
var p = v * (1 - s);
var q = v * (1 - s*f);
var t = v * (1 - s*(1-f));
switch (hi) {
case 0:
red = v; green = t; blue = p; break;
case 1:
red = q; green = v; blue = p; break;
case 2:
red = p; green = v; blue = t; break;
case 3:
red = p; green = q; blue = v; break;
case 4:
red = t; green = p; blue = v; break;
case 5:
red = v; green = p; blue = q; break;
}
red = Math.floor(red*255);
green = Math.floor(green*255);
blue = Math.floor(blue*255);
var colorString = "rgb(" + red + "," + green + "," + blue + ")";
el.style.setProperty(att, colorString, null);
var args = "(" + n + ", \"" + att + "\" ," + deg + ")";
setTimeout("rotateColors" + args, rotateDelay);
}
function rotationInit() {
for (var i = 0; i < rotateObjects.length; i++) {
setTimeout("rotateColors(" + i + ", \"color\", " + rotateStep + ")",1000);
setTimeout("rotateColors(" + i + ", \"background-color\", " + rotateStep + ")",1000);
}
}
function spaghetti() {
var blinks = document.getElementsByTagName('blink');
for (var i = 0; i < blinks.length; i++) {
var b = blinks[i];
var s = document.createElement("span");
s.innerHTML = b.innerHTML;
b.parentNode.replaceChild(s, b);
fadeObjects.push(s);
}
var divs = document.getElementsByTagName('div')
for (var div in divs) {
rotateObjects.push(div);
}
window.setTimeout("fadeInit()", 1000);
window.setTimeout("rotationInit()", 1000);
}