Parallax Effekte

Links

Parallax Effekt selbst gemacht

jQuery - Blur by Scroll Effect

Externe Links:

https://www.youtube.com/watch?v=STwoa-9jxi0

Parallax Typen

Fixed Background Moving Body

Hintergrund bleibt und wird vom Content "überrollt"

Slow Elements

Hintergrund und Element bewegt sich in verschiedenen Geschwindigkeiten

Multiple Direction Elements

• Elemente bewegen sich in unterschiedlichen Richtungen
• Elemente wandern zu bestimmten Positionen

Spezielle Typen

Mouse Movement Parallax

Maus beeinflusst die Position (z .B. zwei Hintergrundlayer)

Video Scrolling

Video ansteuern durch Scrollposition

Story Telling

Elemente bewegen,

Tipps

• Gezielt Bewegung für Bedienelemente einsetzen
• Subtil arbeiten
• Agressive Strategien nur wenn es passt -> z.B. Organisation der Inhalte klar machen
• Nicht unlesbar machen
• Gezielt sparsame Elemente einsetzen (z.B. Diagonale Linie)
• Message muss im Focus bleiben
• Be pleasing not confusing (außer du willst es)
• Gib dem User Kontrolle (Beispiel 53 Pen)

Beispiele

## 1 - Fixed background, scrolling body
http://www.ok-studios.de/home/
http://themes.tvda.eu/demos/kutcherst...

## 2 - Slow Elements
http://jason-kenny.com/
http://unfold.no/
http://www.apple.com/macbook/

## 3 - Landing Elements
http://www.apple.com/macbook]
http://www.streamlineicons.com/
http://news.microsoft.com/stories/gar...

## 4 - Multiple direction elements
http://mainequarterly.com/thoreau/
https://carousel.dropbox.com/


## 5 - Mouse movements
http://stephband.info/jparallax/
http://www.alquimiawrg.com/#/home
http://travisneilson.com/rootbeer-tas...

## 6 - thumbnails
http://tympanus.net/Development/Hover...

## 7 - Follow the rabbit
http://poppyspend.britishlegion.org.uk/
http://lostworldsfairs.com/atlantis/
http://benthebodyguard.com/index.php
https://www.fiftythree.com/pencil

## 8 - Zooming elements
http://travisneilson.com/workflow-tools/
http://www.nytimes.com/projects/2013/...