Parallax Effekte
Aus Wikizone
Version vom 2. Juli 2018, 10:50 Uhr von 37.49.33.174 (Diskussion)
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
Landing Elements
Multiple Direction Elements
- Elemente bewegen sich in unterschiedlichen Richtungen
- Elemente wandern zu bestimmten Positionen
Follow the rabbit
Zooming Elements
Spezielle Typen
Mouse Movement Parallax
Maus beeinflusst die Position (z .B. zwei Hintergrundlayer)
Thumbnailing FX
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/...