nicht angemeldet
Umsetzung
Hi ich habe eine Idee und würde sie gerne mit DHTML umsetzen....schaut mal auf meine Page www.akilion.de.
Da läuft eine Feder übers Pergament. Und ich möchte jetzt eine Art Buch erstellen, daß dynamisch einen Text auf die
Page schreibt, währen eine Feder jeweils am Ende des aktuellen Zeichens sich auf und abbewegt. Damit soll der
Eindruck entstehen jemand würde den Text in Echtzeit niederschreiben....
Meine Frage ist nun, wie man so etwas am besten realisiert...mir stellen sich da einige Schwierigkeiten in den Weg,
zumal ich nicht die Koordinaten des document.write() ja nicht ermitteln kann....und das ganze Alphabet als
Layer anlegen und dann daß Array ausgeben scheint mir etwas zu aufwendig...
Hilfe wäre cool,
Mendrik alias Andreas Prudzilko
-
Hallo,
stimmungsgerechte Seite. Nett.
Möchtest Du die Schrift aus Gifs zusammensetzen? Oder anders ausgedrückt: wie wäre es, die Schrift aus Gifs zusammen zu setzen, ähnlich wie Deine Überschriften? Soll ja schließlich eine ornamentale Schreibschrift werden.... meine "lockeren" Überlegungen, wie ich es versuchen würde.
-
Alle Buchstaben des Alphabetes als Gif vorladen. So lange dürfte das auch nicht dauern, und die Buchstaben sind sofort da....
-
Den Text in eine Variabel speichern, meinentwegen text="willkommen"
-
Den Text in einer Schleife durchgehen und Buchstabe für Buchstabe die Breite (width) des jeweiligen vorgeladenen Buchstaben ermitteln. Dann sofort ein entsprechendes unsichtbares-ein-Pixel-gif skaliert hintereiander weg darstellen. Damit hast Du 10 img unterschiedlicher Breite hintereinander auf dem Schirm bzw auf der Seite. (Bis jetzt sieht der Besucher noch nichts)Die img sollten durchnummerierte Namen bekommen.
-
jetzt noch einmal den Text Buchstabe für Buchstabe durchgehen und ein Img nach dem anderen mit den vorgeladenen Buchstaben dynamisch austauschen. Ach ja, die unsichtaberen Gif-img von Pos 3) sollten per Div/Layer pixelgenau positioniert sein. (Damit Du die Position des ersten Buchstaben hast)
jetzt kannst Du zwischen jedem Erscheinen der Buchstaben die Feder von links nach rechts Buchstabenweit vorrücken lassen. Die Höhe weist Du ja durch Dein grundlegende Positionierung. Die Breite ergibt sich aus dem width der jeweiligen unter Pos3) erstellten images. Wenn Du jetzt die Feder bei ihrer Wanderung immer noch etwas von oben nach unten wandern läst, sollte es nett aussehen...
Chräcker
-
Hallo,
stimmungsgerechte Seite. Nett.
Möchtest Du die Schrift aus Gifs zusammensetzen? Oder anders ausgedrückt: wie wäre es, die Schrift aus Gifs zusammen zu setzen, ähnlich wie Deine Überschriften? Soll ja schließlich eine ornamentale Schreibschrift werden.... meine "lockeren" Überlegungen, wie ich es versuchen würde.
-
Alle Buchstaben des Alphabetes als Gif vorladen. So lange dürfte das auch nicht dauern, und die Buchstaben sind sofort da....
-
Den Text in eine Variabel speichern, meinentwegen text="willkommen"
-
Den Text in einer Schleife durchgehen und Buchstabe für Buchstabe die Breite (width) des jeweiligen vorgeladenen Buchstaben ermitteln. Dann sofort ein entsprechendes unsichtbares-ein-Pixel-gif skaliert hintereiander weg darstellen. Damit hast Du 10 img unterschiedlicher Breite hintereinander auf dem Schirm bzw auf der Seite. (Bis jetzt sieht der Besucher noch nichts)Die img sollten durchnummerierte Namen bekommen.
-
jetzt noch einmal den Text Buchstabe für Buchstabe durchgehen und ein Img nach dem anderen mit den vorgeladenen Buchstaben dynamisch austauschen. Ach ja, die unsichtaberen Gif-img von Pos 3) sollten per Div/Layer pixelgenau positioniert sein. (Damit Du die Position des ersten Buchstaben hast)
jetzt kannst Du zwischen jedem Erscheinen der Buchstaben die Feder von links nach rechts Buchstabenweit vorrücken lassen. Die Höhe weist Du ja durch Dein grundlegende Positionierung. Die Breite ergibt sich aus dem width der jeweiligen unter Pos3) erstellten images. Wenn Du jetzt die Feder bei ihrer Wanderung immer noch etwas von oben nach unten wandern läst, sollte es nett aussehen...
Chräcker
Hi!
Alles mal zusammen:
Ja für ne Webpage müßte ich erst mal schauen wie flüssig/schnell sowas geht. Den letzten Vorschlag habe
ich mir auch schon durch den Kopf gehen lassen, ist wohl aber eher für kleinere Sachen brauchbar.
Das Teil mit dem Clip Dingsbums hört sich schon spannender an, wennauch ich die gleiche Befürchtung
habe, daß es für eine Homepage zu viel des Guten sein könnte.
Aber ich probier es trotzdem mal, schliesslich ist Webdesign nichts anderes als ne Spielerei, oder nicht? *G*Vielen Dank für Eure Hilfe,
Mendrik
-
-
-
Hi ich habe eine Idee und würde sie gerne mit DHTML umsetzen....schaut mal auf meine Page www.akilion.de.
Da läuft eine Feder übers Pergament. Und ich möchte jetzt eine Art Buch erstellen, daß dynamisch einen Text auf die
Page schreibt, währen eine Feder jeweils am Ende des aktuellen Zeichens sich auf und abbewegt. Damit soll der
Eindruck entstehen jemand würde den Text in Echtzeit niederschreiben....Meine Frage ist nun, wie man so etwas am besten realisiert...mir stellen sich da einige Schwierigkeiten in den Weg,
zumal ich nicht die Koordinaten des document.write() ja nicht ermitteln kann....und das ganze Alphabet als
Layer anlegen und dann daß Array ausgeben scheint mir etwas zu aufwendig...Hilfe wäre cool,
Hallo, das sieht echt spitze aus mit der Feder.
Wäre es nicht einfacher, aus dem entsprechenden teil der graphik, innerhalb der sich Feder und Schriftzug bewegen ein animiertes Gif zu machen?
Gruß, ReginaMendrik alias Andreas Prudzilko
-
Hi,
Da läuft eine Feder übers Pergament. Und ich möchte jetzt eine
Art Buch erstellen, daß dynamisch einen Text auf die
Page schreibt, währen eine Feder jeweils am Ende des aktuellen
Zeichens sich auf und abbewegt. Damit soll der
Eindruck entstehen jemand würde den Text in Echtzeit
niederschreiben....Also, ehrlich gesagt ist das vielleicht fuer eine Praesentation ganz
in Ordnung, aber als Website wuerde ich das nicht machen...Meine Frage ist nun, wie man so etwas am besten realisiert...mir
stellen sich da einige Schwierigkeiten in den Weg,
zumal ich nicht die Koordinaten des document.write() ja nicht
ermitteln kann....Mal ganz abgesehen davon kann man mit document.write auch schlecht
ganze Dokumente ausgeben, das maskieren wird eine Heidenarbeit ,)und das ganze Alphabet als
Layer anlegen und dann daß Array ausgeben scheint mir etwas zu
aufwendig...Ich wuerde das ganze Dokument in einen Layer packen. Dann schneidest
du den Clip-Bereich so zu, dass nur die erste Zeile zu sehen ist.
Ueber die Zeile legst du eine Grafik mit Hintergrundfarbe, die du
auf laenge der Zeile streckst. Dann schiebst du die Grafik immer
weiter nach rechts, aus dem sichtbaren Bereich. So wird immer mehr
Text sichtbar. Mit der Grafik zusammen bewegst du den Layer, in dem
die Feder ist, auch nach rechts, so sollte der gewuenschte Effekt
entstehen ,)mfg
CK1 -
Hi!
Wenn der Hintergrund auf dem der Text steht einfärbig ist, so kannst du den Text einfach mit zwei Layern (die die Hintergrundfarbe besitzen - einer wird zeilenweise nach unten bewegt, der andere langsam nach rechts) überdecken und Buchstabe für Buchstabe "freigeben".
Ist der Hintergrund, auf dem die Schrift steht, unregelmäßig, so könntest du mit document.write arbeiten. (allerdings müßtest du dann eine fixe Schriftgröße einstellen und "monospace" als Schrift verweden, damit die Buchstaben gleich breit sind und du somit weist wohin du die Feder bewegen mußt)
Du könntest auch jeden Buchstaben in einen Layer packen und entsprechend positionieren (ist allerdings nur bei wenigen Buchstaben praktikabel -> http://www.spotlight.de/ms/damian/home.html)
mfG
damian