Animationen mit Javascript und CSS

Unter Bewegungsparallaxe versteht man in der Wahrnehmungspsychologie den Effekt, der sich optisch ergibt, wenn verschiedene Objekte unterschiedlich von einander entfernt in einer Landschaft verteilt sind und sich der Beobachter parallel zu diesen Objekten seitlich fortbewegt und dabei in Richtung Horizont blickt. Dieser Effekt tritt beispielsweise auf, wenn man aus dem Seitenfenster eines fahrenden Autos oder Zuges schaut.

Das Resultat ist, dass diejenigen Objekte, die nahe beim Betrachter sind, sich schneller bewegen als die weit vom Betrachter entfernten. Die Bewegung der Objekte geht approximativ gegen Null, je näher sie dem Horizont sind, der sich nur minimal bewegt (in Abhängigkeit von der Gesamtgeschwindigkeit).

Quelle: Wikipedia

Animationen sind was schönes. Animationen kennt man im Web jedoch oft nur in 2 Dimensionaler. Das man aber durch bewegungs Parallaxe auch 3D Animationen hinbekommt ist aus alter Zeit her auch nichts neues und wurde schon n-mal in Spielen Realisiert.

JQuery  jParallax

jParallax erstellt aus einem ausgewähltem Element in einem Fenster oder Viewport, mit deren Kind-Elementen eine Parallax-Animation. Die Kind-Elemente werden in Schichten/Layer unterteilt. Diese Schichten bewegen sich in Reaktion auf die Maus und je nach ihren Abmessungen (und Optionen für Schicht-Initialisierung). Dadurch entsteht ein eindrucksvoller Parallax-Effekt.

http://webdev.stephband.info/parallax.html

MooTools mParallax

mParallax funktioniert genau wie jParallax, ist jedoch wie der Name es andeutet auf MooTools basierend

http://www.piksite.com/mParallax/

JavaScript (No Framework)

Ohne jeglichen Framework und in puristischem Javascript hat Brett Taylor ein sehr schönes Beispiel für ein Parallax-Effekt hervorgebracht.

Ein weiteres Beispiel für Himmels, bzw, Sternen Animationen findet man  bei esqsoft

CSS

CSS-Tricks hat sich auch diesem Thema angenommen und ebenso ein anschauliches Beispiel mit der Einbettung von Content und einer Hintergrund-Parallaxe implementiert

Eine weitere Möglichkeit Parallax Animationen rein in CSS zu realiseren findet man auf der Seite von contentwithstyle.co.uk. Hier wurden auf  GIF-Animationen über ein ander geschichtet und dadurch auch eine Animation erstellt, die an die 16-Bit Konsolen erinnert.

Gesucht und gefunden durch:

• parallax js
• parallax javascript
• javascript parallax
• js parallax
• javascript animationen
• parallax animation
• javascript Parallaxe
• parallaxe javascript
• parallaxe animation
• paralax js