nicht angemeldet
Eine einfache Animationsfrage
hallo,
ich schlage mich derzeit mit den ersten gehversuchen
mit html herum. so weit, so gut...
jetzt habe ich folgende vorstellung, was ich machen möchte:
aaaalso: man stelle sich vor:
leere seite > ein balken rutscht (von recht, links, oder von wo auch immer...) ins blickfeld > auf den balken lässt sich ein kleines bild und ein schriftzug nieder > dann baut sich die eigentliche seite (unter dem balken) auf und darunter thumbs und anderer kram.
ist das so schwer? ich finde explizit dazu nichts...
also jetzt schonmal 1000-dank für hilfe!
-
Hallo Craig,
leere seite > ein balken rutscht (von recht, links, oder von wo auch immer...) ins blickfeld > auf den balken lässt sich ein kleines bild und ein schriftzug nieder > dann baut sich die eigentliche seite (unter dem balken) auf und darunter thumbs und anderer kram.
ist das so schwer? ich finde explizit dazu nichts...
Ja, das wäre wahrscheinlich einfacher mit Flash zu realisieren, geht aber im Prinzip auch mit DHTML. Du positionierst alle deine Elemente, die du in den Bildschirm hineinfahren lassen willst, erst einmal in absolut positionierten DIV-Elementen mit ID außerhalb des Bildschirmbereichs. Dann veränderst du die CSS-Werte über setInterval() in einem bestimmten Zeittakt schrittweise, bis sie Ihre Endposition erreicht haben und brichst das Intervall dann mit clearInterval()
ab.Die Funktion, die du mit diesem Intervall immer wieder aufrufst (ich schlage ein Intervall von nicht weniger als 83 Sekunden vor, weil das dann 12 Bildern pro Sekunde und der üblichen Flash-Framerate entspricht) sieht z.B. so aus:
function bewegen () {
elemX = document.getElementById('meinBalken').style.left;x = elem.substring(0,x.length-2);
// das schneidet die Buchstabem "px" der Einheitenbezeichnung abx = parseInt(x);
// wandelt die verbliebenen Zeichen in eine Zahl umx += 2;
// erhöht den Zahlenwert um jeweils 2 in jedem Intervallschritt.elemX = x + "px";
// fügt die Einheitenbezeichnung wieder hinzu
// wandelt alles wieder in eine Zeichenkette um
// und weist deinem Element somit einen um zwei Pixel
// nach rechts verschobenen Wert zu.}
Wenn alles dann auch noch in älteren Browsern laufen soll, die kein DOM verstehen, wird es erst richtig kompliziert, aber das würde hier den Rahmen sprengen.
Mit den Stichwörtern DIV und bewegen solltest du ohnehin fündig werden. Da gibt es schon mehr als genug.
Woran du bei dem Ganzen Kram aber evtl. auch noch denken musst, ist die aktuelle Bildschirmaufauflösung und/oder Fenstergröße für die Start und Endposition auszulesen, es sei denn du veränderst prozentuale Werte statt Pixelwerte bei der Positionierung.
Bei Veränderung der Fenstergröße musst du evtl. auf resizeTo() zurückgreifen, womit du dir aber auch einige Besucher deiner Seite vergraulen kannst, die lieber die Kontrolle über ihre Fenster behalten.
Alles ziemlich viel Aufwand und ziemlich zweischneidig für so einen Schnickschnack.
also jetzt schonmal 1000-dank für hilfe!
Gruß Gernot
-
Craig,
Ein typischer Fall für Flash.Ein typischer Fall, um Nutzer zu nerven.
Zitat:
Wir sollten also damit aufhören, Flash nur dazu zu benutzen, Introanimationen zu produzieren, deren größte und nützlichste Errungenschaft der „Skip-Into“-Button ist.
(S. Prosek, S. Ehrmann, Skip Intro: Funk vs. Funktionalität?, In: M. Beier, V. von Gizycki (Hrsg.), Usability – Nutzerfreundliches Web-Design, Springer, Berlin, Heidelberg, 2002)Gunnar
--
"Nobody wins unless everybody wins." (Bruce Springsteen) -
...PUH...
ob`s das wert ist...
scheint doch nicht so einfach zu sein.
aber vielen dank für eure hilfe!-
Hallo Craig,
...PUH...
ob`s das wert ist...
scheint doch nicht so einfach zu sein.
aber vielen dank für eure hilfe!Jetzt gib mal nicht gleich auf. Dies hier war meine erste DHTML-Studie vor drei Jahren. Hätte ich die nicht gemacht, hätte ich nie JS-Blut geleckt. Heute würde ich natürlich vieles anders und besser machen. Aber schwimm ruhig auch mal gegen den Strom, auch wenn es in manchen Browsern schwierig ist.
Gruß Gernot
-