Parallax Effekte: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „== Links == Parallax Effekt selbst gemacht == Externe Links: == https://www.youtube.com/watch?v=STwoa-9jxi0 == Parallax Typen == === Static Background…“) |
|||
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 3: | Zeile 3: | ||
[[Parallax Effekt selbst gemacht]] | [[Parallax Effekt selbst gemacht]] | ||
| + | [[jQuery - Blur by Scroll Effect]] | ||
== Externe Links: == | == Externe Links: == | ||
| Zeile 8: | Zeile 9: | ||
== Parallax Typen == | == Parallax Typen == | ||
| − | === | + | === Fixed Background Moving Body === |
Hintergrund bleibt und wird vom Content "überrollt" | Hintergrund bleibt und wird vom Content "überrollt" | ||
=== Slow Elements === | === Slow Elements === | ||
Hintergrund und Element bewegt sich in verschiedenen Geschwindigkeiten | 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 Scrolling === | ||
Video ansteuern durch Scrollposition | Video ansteuern durch Scrollposition | ||
| Zeile 18: | Zeile 29: | ||
| − | Tipps | + | == Tipps == |
* Gezielt Bewegung für Bedienelemente einsetzen | * Gezielt Bewegung für Bedienelemente einsetzen | ||
* Subtil arbeiten | * Subtil arbeiten | ||
| Zeile 25: | Zeile 36: | ||
* Gezielt sparsame Elemente einsetzen (z.B. Diagonale Linie) | * Gezielt sparsame Elemente einsetzen (z.B. Diagonale Linie) | ||
* Message muss im Focus bleiben | * Message muss im Focus bleiben | ||
| + | * Be pleasing not confusing (außer du willst es) | ||
| + | * Gib dem User Kontrolle (Beispiel 53 Pen) | ||
| + | |||
| + | == Beispiele == | ||
| + | <pre> | ||
| + | |||
| + | ## 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/... | ||
| + | </pre> | ||
Aktuelle Version vom 2. Juli 2018, 10:50 Uhr
Links[Bearbeiten]
Parallax Effekt selbst gemacht
jQuery - Blur by Scroll Effect
Externe Links:[Bearbeiten]
https://www.youtube.com/watch?v=STwoa-9jxi0
Parallax Typen[Bearbeiten]
Fixed Background Moving Body[Bearbeiten]
Hintergrund bleibt und wird vom Content "überrollt"
Slow Elements[Bearbeiten]
Hintergrund und Element bewegt sich in verschiedenen Geschwindigkeiten
Landing Elements[Bearbeiten]
Multiple Direction Elements[Bearbeiten]
- Elemente bewegen sich in unterschiedlichen Richtungen
- Elemente wandern zu bestimmten Positionen
Follow the rabbit[Bearbeiten]
Zooming Elements[Bearbeiten]
Spezielle Typen[Bearbeiten]
Mouse Movement Parallax[Bearbeiten]
Maus beeinflusst die Position (z .B. zwei Hintergrundlayer)
Thumbnailing FX[Bearbeiten]
Video Scrolling[Bearbeiten]
Video ansteuern durch Scrollposition
Story Telling[Bearbeiten]
Elemente bewegen,
Tipps[Bearbeiten]
- 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[Bearbeiten]
## 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/...
