Animationen

Animationen

Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

9. Juni 2014
von
Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

Seit CSS3 sind Animationen in HTML-Dokumenten kein Problem mehr. Mit der „@keyframes“-Regel werden verschiedene Eigenschaften wie Position oder Größe eines HTML-Elementes definiert. Die dazugehörige „animation“-Eigenschaft sorgt dafür, dass die in den Keyframes festgelegten Eigenschaften in Bewegung geraten. Ganz ohne JavaScript und Plug-ins erstellen Sie so auch durchaus komplexe Animationen, die in allen modernen Browsern problemlos laufen. Problematisch wird es, wenn JavaScript ins Spiel kommen...

Weiterlesen »

Animationen

Performantere JavaScript-Animationen mit requestAnimationFrame

7. Dezember 2012
von
Performantere JavaScript-Animationen mit requestAnimationFrame

Dank CSS3 sind Animationen ohne Flash und JavaScript kein Problem mehr. Aber nicht immer kommt man mit den Möglichkeiten von CSS3 aus. Vor allem, wenn Animationen berechnet werden müssen, ist der Einsatz von JavaScript unumgänglich. Es gibt jedoch eine wesentlich performantere Möglichkeit als den Einsatz von setTimeout und setInterval. Denn setTimeout und setInterval haben den Nachteil, dass sie eine Funktion immer nach einer fest definierten Zeitspanne...

Weiterlesen »

Animationen

Makisu – Sushi-inspiriertes CSS 3D Navigations-Konzept mit jQuery

2. November 2012
von
Makisu – Sushi-inspiriertes CSS 3D Navigations-Konzept mit jQuery

In den vergangenenen Monaten sind immer wieder mal CSS-Experimente in den Umlauf gebracht worden. Mir persönlich gefiel bis zum heutigen Tage stets Paperfold CSS am besten, aber auch Meny und andere, eher spielerische Ansätze stellten wir unseren Lesern vor. Makisu, ein ganz frisches Konzept für eine Dropdown-Navigation mit 3D Transforms, hat in meiner Gunst nun Paperfold CSS abgelöst; selten sowas schickes gesehen. Makisu –...

Weiterlesen »

Animationen

jCS Media Library: Komplexe Animationen mit jQuery

28. Mai 2012
von
jCS Media Library: Komplexe Animationen mit jQuery

Ein Bild sagt mehr als tausend Worte. Und ein bewegtes Bild ist noch viel sprechender. So ist es kein Wunder, dass sich in den letzten zwölf Jahren mit Adobes Flash ein Format durchsetzen konnte, das das Gegenteil eines offenen Standards repräsentiert. Die neue jCS Media Library ermöglicht nun die Erstellung flash-ähnlicher Animationen auf der Basis von jQuery. Der Entwickler verspricht sogar Kompatibilität für den...

Weiterlesen »

Animationen

CSS-Transitions: Timing ist alles

29. April 2012
von
CSS-Transitions: Timing ist alles

Dank CSS3 lassen sich Animationen ohne Flash und Javascript erstellen. Dabei kann der zeitliche Ablauf einer Animation komfortabel beeinflusst werden. Unter Verwendung der Eigenschaft „transition-timing-function“ lassen sich unterschiedliche Abläufe – mit und ohne Beschleunigung – definieren. Beschleunigen und abbremsen Neben der Einstellung „linear“, bei der eine Animation kontinuierlich dieselbe Geschwindigkeit hat, lassen sich Animationen auf unterschiedliche Weise beschleunigen und abbremsen. Die Standardeinstellung für eine...

Weiterlesen »

Animationen

jQuery-Tutorial (2): Wir optimieren unser schickes Sliding-Menü

28. Juli 2010
von
jQuery-Tutorial (2): Wir optimieren unser schickes Sliding-Menü

Wenn Sie den Code aus Teil I des Tutorials jetzt in eine Website einbauen, wird er zwar funktionieren. Um wirklich sicherzugehen, dass alles reibungslos läuft, sollten Sie noch die globalen Variablen loswerden. Diese in einer Klasse zu verstecken ist immer eine gute Idee, um Konflikte mit sonstigem JavaScript-Code zu vermeiden.

Weiterlesen »

Animationen

Zustände statt Tweenings – Catalyst-Workshop, Teil 2

26. Juli 2010
von
Zustände statt Tweenings – Catalyst-Workshop, Teil 2

Adobe Catalyst setzt auf eine Seiten-basierte Metapher, ähnlich wie Präsentationswerkzeuge, aber mit individuelleren Animationseffekten. In Teil 1 des Workshops haben wir ein statisches Interface erzeugt, in dem bis auf ein bisschen RollOver nichts passiert. Nun erzeugen wir verschiedene Animationsziele, für einen sanften Übergang von einer Navigationsposition zur nächsten.

Weiterlesen »

Animationen

Flash ohne Coding – Workshop Flash Catalyst, Teil 1

9. Juli 2010
von
Flash ohne Coding – Workshop Flash Catalyst, Teil 1

Mit Hilfe von Flash-Catalyst erstellen Sie im Handumdrehen kleinere interaktive Anwendungen, ohne sich mit ActionScript und der tieferen Flash-Mechanik auseinandersetzen zu müssen.

Weiterlesen »

Animationen

Webdesign-Trends auf Sport-Websites

29. Juni 2010
von
Webdesign-Trends auf Sport-Websites

Als Webworker sehen Sie tagein, tagaus sehr viel mehr oder weniger gutes Webdesign, und schauen, wie's die anderen machen. Sehen Sie sich auf der Suche nach Inspiration auch Fußball- oder Tennis-Websites an? Nicht?!? Dann holen wir das jetzt nach, denn die informationslastigen Sport-Websites haben in punkto Navigation, Interaktion und Benutzerfreundlichkeit viele gute Lösungen zu bieten.

Weiterlesen »

Animationen

HTML 5 & CSS 3: Tutorials, Tipps und Referenzen

24. Juni 2010
von
HTML 5 & CSS 3: Tutorials, Tipps und Referenzen

Die Entwicklung W3C-konformer, sprich Browser-übergreifender Standards geht voran. Nachdem nun auch Microsoft auf die Schiene einschwenkt und mit dem just vorgestellten Preview des Internetexplorer 9 sowohl HTML-5-Elemente wie canvas als auch CSS-3-Eigenschaften wie border-radius fehlerfrei unterstützt, ist es Zeit, die neuen Techniken einzusetzen.

Weiterlesen »