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…“) |
|||
| Zeile 8: | Zeile 8: | ||
== 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 25: | Zeile 35: | ||
* 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) | ||
Version vom 2. Juli 2018, 10:33 Uhr
Links
Parallax Effekt selbst gemacht
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)
