Er is geen CSS ondersteuning.
Ik kan geen naam voor dit image-effect verzinnen. Vandaar dat het maar onder de noemer special effects gaat vandaag. Dit effect is niet erg geschikt voor slide-shows of soortgelijks, maar als aandacht-trekker op een pagina is het wel te gebruiken. Als je nog een paar effecten wilt zien kan je in de site-index van de dns5 kijken. Een paar heb ik hieronder gezet (die wel de moeite waard zijn).
Op de plaats waar je het plaatje met het effect wilt hebben plaats je een "<address></address>". En als je dan onder op de pagina (in de body) het hieronder-staande javascript hebt geplaatst, zal het effect bij jou werken.
<script type="text/javascript">
var hetplaatjeis="JOUW-PLAATJE.jpg";
var config;
var desnelheid = 64;
var img,
$plaatje,
imageeffect,
special_effect;
function position() {
for (var i = 0, length = arguments.length; i < length; ++i) {
arguments[i].top = arguments[i].left = "0px";
arguments[i].position = "absolute"; }
}
(function(round, window) {
function onload(config) {
(function onload() {
imageeffect.removeChild(img);
img = $plaatje = null;
config.interval = 0;
config.roephem = config.pause = config.play = null;
if (config.callback) {
config.callback(config);
}
})
var imageeffect = config.target.appendChild(config.document.createElement("div")),
div = imageeffect.cloneNode(true),
width = this.width,
height = this.height,
img = this,
$image__effect = imageeffect.style,
$div = div.style,
$plaatje = img.style,
scale = 2000,
left,
top,
$;
position($div, $plaatje);
$image__effect.position = "relative";
$image__effect.width = width + "px";
$image__effect.height = height + "px";
$image__effect.overflow = "hidden";
$plaatje.zIndex = 1;
$div.zIndex = 2;
scale /= 100;
$div.height = 0 + "px";
$div.width = width + "px";
$plaatje.top = (top = height) + "px";
img.setAttribute("width", width);
img.setAttribute("height", round(scale * height));
left = 0;
scale = desnelheid / scale;
config.interval = setTimeout(config.roephem = function() {
if (left < height) {
top -= desnelheid;
$plaatje.top = round(top + left) + "px";
if (top < 0) {
$div.height = round(left += scale) + "px";
}
config.interval = setTimeout(config.roephem, 1);
} else {
onload();
}
},
15);
$div.background = (config.background || "transparent") + " url(" + config.src + ") no-repeat " + (config.direction || "left");
imageeffect.appendChild(img);
imageeffect.appendChild(div);
}
function $onload(config) {
var div = config.target.getElementsByTagName("div"),
imageeffect = div[0],
img = config.document.createElement("img"),
$image__effect = imageeffect.style,
$div = div.style,
$plaatje = img.style,
width = parseInt($image__effect.width, 10),
height = parseInt($image__effect.height, 10),
scale = 2000,
left,
top,
$;
div = div[1];
position($plaatje);
$plaatje.zIndex = 1;
$div.backgroundPosition = config.direction || "left";
scale /= 100;
img.onload = function() {
img.setAttribute("width", width);
img.setAttribute("height", width = round(scale * height));
$plaatje.top = (top = -width + height) + "px";
left = 0;
scale = desnelheid / scale;
config.interval = setTimeout(config.roephem = function() {
if (top + left < height) {
top += desnelheid;
$plaatje.top = round(top + left) + "px";
if ( - height < ($ = round(left -= scale))) {
$div.height = (height + $) + "px";
}
config.interval = setTimeout(config.roephem, 15);
} else {
onload();
}
},
15);
};
imageeffect.insertBefore(img, div);
img.src = config.src;
}
function special_effect(config) {
if (config.achterstevoren) {
$onload(config);
} else {
var img = (config.document || (config.document = document)).createElement("img");
img.onload = function() {
img.removeAttribute("onload");
if (config.onload) {
config.onload(img);
}
onload.call(img, config);
};
img.src = config.src;
config.pause = function() {
clearTimeout(config.interval);
};
config.play = function() {
config.interval = setTimeout(config.roephem, 15);
};
}
return config;
}
window.special_effect = special_effect;
})(Math.round, window);
startt = function() {
var hetadres = document.getElementsByTagName("address"),
bottom = hetadres[0];
special_effect({
src: hetplaatjeis,
target: bottom,
direction: "bottom",
callback: function(config) {}
});
};
</script>
cache 15-10-2010