Dateiversion:
|
diesen Beitrag diskutieren,ergänzen, eine Frage stellen |
|
|
Homepagebau |
|
|
||
|
|
||||||
Fly-In Effekt
Schwierigkeit: für Anfänger
|
Fly-In Effekt: |
Sicher eine der eindrucksvollsten Spielereien im Web sind Effekte, wie Schrift oder Bilder einschweben zu lassen. Vielerorts wird das mit aberwitzigen Skripten bewerkstelligt - ich zeige ihnen eine einfache Methode.
Wir machen es uns zunutze, dass Tabellen die Angewohnheit haben, stets so breit zu sein, wie dringend erforderlich aber eben nicht mehr. Ein 'Blank-Picture' (ein transparentes Gif von 1 Pixel Größe) hilft uns dabei den Abstand zu verändern. Ziel: wir wollen einen Text von rechts einschweben lassen. Also erstellen wir zunächst eine simple Tabelle mit dem Text und unserem aufgeblähten Dummy, sodass der Text zu Beginn außer Sichtweite ist.
Hinweis:
' ' ist eine so genannte Entity.
Entities sind kodierte Sonderzeichen. In diesem Fall ein "geschütztes Leerzeichen" (NonBreakingSPace), welches verhindert, damit unser Text einfach umbricht.
<table align="left">
<tr><td>
<!-- Blank Picture -->
<img src="blank.gif" id="myBlankPic"
height="1" width="1200">
<!-- BEGIN Target(s) -->
</td><td>
TESTEINTRAG TESTEINTRAG TESTEINTRAG
<!-- END Target(s) -->
</td></tr>
</table>
Nun ist es kein größeres Problem ein kurzes Skript zu verfassen, dass unseren Dummy beim Laden der Seite schrumpfen und den Text einschweben lässt.
Hinweis:
Das Objekt "document" besitzt als nur lesbare Eigenschaft das Array "images". Dieses enthält Referenzen auf alle Grafiken der HTML-Seite. Die Funktion "setTimeout" des Objekts "window" erlaubt es JavaScript-Code zeitlich verzögert auszuführen und liefert als Rückgabewert eine Referenz, die mit der Funktion "clearTimeout(referenz)" die Ausführung unterbrechen kann.
function FlyIn() {
myImage=document.images["myBlankPic"];
myImage.width -= 10;
if (myImage.width >10) {
timer=window.setTimeout("flyIn()",50);
};
};Fehlt nur noch der Aufruf der Funktion...
<script language="JavaScript">flyIn()</script>Diese Animation kann man noch etwas sanfter gestalten. Dazu greifen wir auf das "Math"-Objekt zurück.
Die Funktion "ceil(wert)" des Objektes "Math" liefert den nach oben aufgerundeten Wert zurück (round(wert) für normales runden und floor(wert) rundet nach unten ab).
function FlyIn() {
document.images["myBlankPic"].width -=
Math.ceil(Math.sqrt(document.images["myBlankPic"].width));
if (document.images["myBlankPic"].width > 10) {
timer = window.setTimeout("flyIn()", 50);
};
};Wie sie sehen, ziehen wir jetzt jeweils den Wurzelbetrag der Restbreite ab. Unser Text wird dadurch 'sanft' einschweben - dann langsamer werden und zum Stillstand kommen.
|
Autor: Thomas Meyer |
Home: www.All-Community.de |
Kontakt: |