Website - Animieren?

[nextvision]

Hey PCGHX'ler
ich fange mal gleich mit meiner Frage an:

Ich arbeite schon länger mit den Programmen wie After Effekts und Photoshop. Bis jetzt hab ich nur Kenntnisse von HTML und ein bisschen von Java. Jetzt ist die Frage ob es möglich ist, um eine Website zu animieren, Projekte und Bilder von After Effekts, zb in Form von Videos, swf oder ähnlichen Formaten so in einer Website einzubinden dass es wie ein script wirkt? (Oder kann man das als script aus After Effects raushohlen?) Wenn ja nach welcher "Sprache" müsste ich mich umschauen. Css, java oder reicht HTML?

Zur Verdeutlichung kann ich ja mal einem Beispiel erklären was ich Vorhabe:
-Wenn man auf die Website geht, erscheint erstmal ein Intro/Opener. Durch eine kleine Animation entsteht sozusagen das Design der Website. Wo zb der Titel steht, vier Überschriften zum weiter leiten, Bilder etc. An der Stelle würde das Video enden und durch ein Bild ersetzt werden (Optisch wie das Video nur als Bild ).
(Ab da an ist es theoretisch kein Problem mehr. Das Bild als Hintergrund, und da es ja nur vier Überschriften zum weiterleiten sind könnte man einfach Links, bzw button machen die Durchsichtig sind.)

Aber würde das Obere irgendwie zum realisieren gehen? Wenn es was nützt kann ich auch noch ein paar Bilder anhängen (Ich hoff ich hab das in dem richtigen Forum gepostet).
Danke schon im Voraus
Gruß Tobias

 

[Supeq]

Hey,

die Geschichte mit dem Video welches dann in die Seite "übergeht" ist doch relativ einfach zu realisieren. Ich sehe hier aber große Schwierigkeiten auf dich zukommen, sobald der Anwender die Seite anders skaliert als du es dir vorgestellt hast (da das Video ja eine feste Auflösung hat).
--> Nicht zu empfehlen

Heutzutage realisiert man sowas über HTML5 und den Canvas Container. Canvas Container kannst du dir als "Spezialausgabe" eines DIV vorstellen, in dem du zeichnen/animieren kannst.
Dazu brauchst du Kenntnisse in HTML(5), CSS und einer beliebigen Skriptsprache ... üblicherweise Javascript. Das wäre auf jeden Fall meine Empfehlung, ein gutes Tutorial zu der Materie gibt es hier: HTML5 Canvas Basic Tutorials Introduction

Damit sind so schöne Sachen wie http://www.feedtank.com/labs/html_canvas/ möglich

LG

 

[Ahab]

Mit Javascript (resp. JQuery) und CSS sollte sich bereits einiges umsetzen lassen. Damit kannst du beispielsweise auch das DOM manipulieren, um Elemente in deinem HTML zu verschieben, verschwinden zu lassen, oder Elemente hinzuzufügen.

 

[nextvision]

Also Danke erstmal für die schnellen antworten. Über das Problem der Skalierung hab ich mir auch schon Gedanken gemacht, dachte allerdings solange man es nicht über ein Handy/Tablet abruft würde das keine Probleme geben. (Ich glaube heute hat fast jeder einen großen Bildschirm mit hoher Auflösung. Man könnte die Website für 1280x720 bauen und bei allem Größer wäre ein schwarzer Rand außen rum.

Canvas Container sieht sehr interessant aus und die Ergebnisse der Tutorial gefallen mir. Auf jeden Fall mal ein Gedanke an dem ich für späteres festhalten will.
Allerdings war mein Gedanke, da ich schnell und sehr gut mit meinen Programmen umgehen kann und erstmal ein Grundgerüst steht schnell durch auswechseln von den Bildern Videos ein ganz neues Design machen kann und Informationen Updaten. Gibt es keine Möglichkeit durch Vektorgraphiken oder wie oben gesagt mit geringere Auflösung das zu lösen?