Inhalt der aktuellen Seite
JavaScript und CSS zum schönen Aufklappen eines Bildes
Mit ein wenig JavaScript und CSS kann man den oben dargestellten "Aufroll-Effekt" eines Bilder herzaubern. Wirkungsvoll und hübsch ist dieser Effekt nur, wenn es sich um ein Bild handelt. Hat man eine Galerie mit 10-20 Bildern ist das eher störend unruhig.
JavaScript
Das JavaScript besteht aus drei Funktionen. Die Funktion zeigeBild() erwartet
als Argumente die id des Bildes, sowie dessen Höhe und Breite. Ich verwende
die Variablen o, r, u und l für die vier Angaben (oben, rechts, unten, links) im
CSS der Eigenschaft clip.
Das "Fenster" wird mit o-- und u++ schonmal
leicht geöffnet, nachdem die display-Eigenschaft des Bildes auf block
gesetzt wurde.
Zum Schluss übergebe ich die aktuellen Variablen an die Funktion zeigeBildBreite() durch
ein setTimeout, damit man je nach Belieben den Effekt verzögern könnte.
function zeigeBild(id,breite,hoehe){
var bild = document.getElementById(id);
var o = Math.floor(hoehe/2);
var r = Math.floor(breite/2);
var u = o;
var l = r;
o--;
u++;
bild.style.display = 'block';
bild.style.clip = 'rect('+o+'px '+r+'px '+u+'px '+l+'px)';
setTimeout(function(){zeigeBildBreite(id,o,r,u,l)}, 1);
}
function zeigeBildBreite(id,o,r,u,l){
var bild = document.getElementById(id);
r++;
r++;
l--;
l--;
bild.style.clip = 'rect('+o+'px '+r+'px '+u+'px '+l+'px)';
if(r >= bild.width && l <= 0){
zeigeBildHoehe(id,o,r,u,l);
}
else{
setTimeout(function(){zeigeBildBreite(id,o,r,u,l)}, 1);
}
}
function zeigeBildHoehe(id,o,r,u,l){
var bild = document.getElementById(id);
u = u+3;
o = o-3;
bild.style.clip = 'rect('+o+'px '+r+'px '+u+'px '+l+'px)';
if(u >= bild.height && o <= 0){ bild.style.clip = 'rect(auto auto
auto auto)'; }
else{
setTimeout(function(){zeigeBildHoehe(id,o,r,u,l)}, 1);
}
}
social bookmarks
