Irgendwelche Tipps für gute Tutorials oder Diskussionen zur Animation von Webseiten? [geschlossen]

Der einfache Effekt, den ich letztendlich anstrebe, ist folgender:

  • Laden Sie ein Bild in die Mitte einer Webseite
  • Lassen Sie das Bild nach links schieben
  • Beginnen Sie dann damit, anderen Text und Bilder darum herum zu laden

Es ist mir egal, wie viele separate Webseiten dafür erforderlich sind oder wie viele separate Bilder, aber ich würde gerne wissen, welche Möglichkeiten ich habe. Ich bin eher Programmierer als Grafikdesigner, also suche ich vielleicht mit den falschen Fachbegriffen. Vielleicht ist "Animation" ein zu großer Begriff für einen so einfachen Effekt, aber "Folie" hat in diesem Zusammenhang andere Konnotationen, und zwischen diesen beiden Dingen kämpfe ich darum, einen klaren Weg zu einer klaren Antwort zu finden. Ich würde am Ende gerne Dinge verstehen wie:

  • Kann die obige Aufgabe mit einem Bild auf einer Seite in HTML ohne Skripterstellung erreicht werden?
  • Unterstützt HTML nur "statische" Elemente, die auf dem Bildschirm erscheinen und niemals ihre Position ändern? Wenn dies der Fall ist, beruhen alle Animationen daher darauf, entweder (statische) Elemente mit dynamischem Inhalt oder wiederholt geladene/gerenderte statische Elemente zu haben, die den Anschein von Bewegung erwecken?
  • Wie verbreitet ist die Browserunterstützung für die verschiedenen Animationsmöglichkeiten?

Wie die ursprüngliche Frage schon sagt, wäre vielleicht ein Tutorial gut. Ich habe auch noch keine anständige gefunden!

Ich verstehe nicht, wie dies eine Grafikdesign-Frage sein soll, wenn Sie nach einer Codierungslösung suchen (Nun, es gibt Flash .... aber ... ). Ich habe dafür gestimmt, dies zu schließen.

Antworten (2)

Für eine "reine HTML"-Lösung sollten Sie sich CSS3-Animationen ansehen: http://www.w3schools.com/css3/css3_animations.asp

Wenn Sie jedoch nach browserübergreifender Kompatibilität suchen, ist dies nicht der richtige Weg. Wie Sie auf dieser Seite sehen können, unterstützt IE dies noch nicht.

Ich würde Javascript für eine Cross-Browser-freundlichere Lösung verwenden. Eine gute Bibliothek könnte jqueryui sein: http://jqueryui.com

IE10 unterstützt tatsächlich ziemlich viel. msdn.microsoft.com/en-us/library/ie/hh673530(v=vs.85).aspx Das Tolle an CSS-Animationen ist, dass sie sich elegant verschlechtern und GPU-beschleunigt werden können (im Gegensatz zu jQuery). Aber ich stimme zu, wenn Sie alles unterstützen wollen, ist CSS vielleicht nicht die beste Option.
Wie viele Leute haben Javascript als Sicherheitsrisiko deaktiviert? Gibt es ein kleineres Übel?
@omatai Sie könnten verwenden: css3, jquery (oder eine andere Javascript-Bibliothek) oder Flash. Alle diese haben irgendeine Art von Schwäche. CSS3 = keine Cross-Browser-Unterstützung ( und keine Klick-Funktionalität, oder eine, die sowieso eine gute Browser-Unterstützung hat). jQuery (und js im Allgemeinen) = Dies ist eine browserübergreifende Methode. Der Prozentsatz der Menschen, die js deaktiviert haben, ist ziemlich gering, AFAIK. Ganz zu schweigen davon, dass Sie js so schreiben können, dass es auf eine einfachere Schnittstelle / Funktionalität zurückgreift, wenn eine Person es deaktiviert hat. Flash = ziemlich schwer, gute Browserunterstützung, außer einigen Tablets.. nämlich ios.
Ein gutes Beispiel für ein jquery-Plug-in mit einem soliden Fallback ist Lightbox. Normalerweise erhalten Sie ein modales Fenster, das sich an seinen Platz schiebt und eine schöne Navigation hat und so weiter und so weiter ... Wenn Javascript deaktiviert ist, können Sie immer noch auf die Bildlinks klicken, die sich wie normale HTML-Links zu Bildern öffnen.
@Joonas Was meinst du mit "Keine Klickfunktion"?
@MarcEdwards Ich meinte eine Pseudoklasse, die etwas tut, wenn auf ein Element geklickt wird. Obwohl ich annehme, wenn Sie CSS3-Animationen verwenden, können Sie genauso gut :target...
Also ... Ja, ignorieren Sie völlig den Teil, in dem ich sage, dass css3 keine Klickfunktionalität hat. :)
Wenn Sie sich für die CSS3-Animation entscheiden, kann Ihnen Adobe Edge Animate beim Erstellen dieser Animationen helfen, und das kostenlos! Und es kommt mit integrierten Tutorials!

Um diese Punkte speziell abzudecken:

Kann die obige Aufgabe mit einem Bild auf einer Seite in HTML ohne Skripterstellung erreicht werden?

Sie könnten es fast mit einem großen animierten GIF vortäuschen, das in eine HTML-Seite eingebettet ist, aber es wäre keine elegante Lösung. Dies erfordert wirklich Skripting und CSS.

Unterstützt HTML nur "statische" Elemente, die auf dem Bildschirm erscheinen und niemals ihre Position ändern?

Genau genommen ja. Eine HTML-Seite kann jedoch auch eingebetteten CSS- und Javascript-Code enthalten, der Animationen hinzufügen kann; Es wäre üblicher, den Großteil von CSS und Javascript in separaten Dateien zu haben.

Wenn dies der Fall ist, beruhen alle Animationen daher darauf, entweder (statische) Elemente mit dynamischem Inhalt oder wiederholt geladene/gerenderte statische Elemente zu haben, die den Anschein von Bewegung erwecken?

Eher statische Elemente (die Bilder, Textblöcke enthalten oder zunächst leer sind) mit Bewegung oder deren Inhalt, der von Skripten geladen wird.

Aber ich würde auf jeden Fall vorschlagen, HTML + CSS zu verwenden, um Elemente zuerst statisch zu positionieren, bevor Sie sich mit Skripten oder Animationen befassen.

Irgendwelche Tipps für gute Tutorials oder Diskussionen zur Animation von Webseiten? [geschlossen]
AntwortenHierDatenschutz-Bestimmungen1y, 0v