Parallax Scrolling

Transcript

2. - 2 - Ich J schreibe aus Leidenschaft CSS und HTML J bin im Frontend zu Hause J nutze seit 2007 Contao J leite die Entwicklung bei MEN AT WORK Social Media: J andreasisaak @ twitter J andreasisaak @ github
3. - 3 - Unter Parallax ... versteht man den Effekt, der sich optisch ergibt, wenn verschiedene Objekte unterschiedlich voneinander entfernt in einer Landschaft verteilt sind und sich der Beobachter parallel zu diesen Objekten seitlich fortbewegt und dabei in Richtung Horizont blickt. [Wikipedia] Im Web erreicht man diesen Effekt durch die Position von Elementen auf verschiedenen z-Layern und die Animation dieser Elemente in unterschiedlicher Geschwindkeit. Bildquelle: http://goo.gl/1YxoSb
4. - 4 - Im Web J war Parallax vor 2009 in der Regel nur auf Flash-Websites zu sehen J ist Parallax dank HTML5/CSS3 und JavaScript-Frameworks zu einem J neuen Trend geworden J wird Parallax auch 2014 noch ein Thema sein Aber Vorsicht!!! Parallax ist nicht gleich Parallax. Es gibt mehrere Formen: J der Fake J das Hintergrundbild J die Interaktion Danke an David Leininger für die Definition.
5. - 5 - Der Fake Gut gemeint, schlecht gemacht http://codepen.io/andreasisaak/pen/Asqbh
6. - 6 - Das Hintergrundbild Wirkung durch Geschwindigkeit und Platzierung http://www.contao-parallax.com/
7. - 7 - Die Interaktion User zu einem Ziel führen http://www.zensorium.com/tinke/
8. - 8 - Vorteile Wir gehen von einer korrekten Implementierung aus! J der Einsatz von emotionalen Bildern wird durch die Bewegung verstärkt J der Unique-Faktor schützt vor schnellen Inspirationen durch andere J bei guter Umsetzung steigert sich die Verweildauer J geeignet für Storytelling J Inhalte werden gezielt und kontextbezogen präsentiert J Call-to-Action Elemente können noch mehr in den Fokus gerückt werden J Inhalte unter dem Fold werden hevorgehoben
9. - 9 - Nachteile J je nach Implementierung kann die Website die 5-10 MB Grenze überschreiten J bei zu vielen Effekten wird es rechenintensiv J alte Browser sind ausgeschlossen und sehen nur den statischen Fallback J Effekte wirken schnell überladen J ohne gute Frameworks ist die Einarbeitungszeit immens J kompliziert in CMS‘e zu integrieren, die eigene Templates mitliefern (alá Contao)
10. - 10 - Gute Praxisbeispiele J http://www.zensorium.com/tinke/ [2,9 MB] J http://www.thesearethings.com/ [3,1 MB] J http://www.head2heart.us/ [1,8 MB] J http://happy.is/ [2,4 MB] J http://jonnyacevedo.com/ [0,6 MB] J http://www.officeline.se/kampanj/ [6,5 MB] J https://squareup.com/careers/creative [2,5 MB] J http://janploch.de/ [0,6 MB] J http://www.smokeybones.com/ [4,0 MB]
11. - 11 - Wie man es nicht machen sollte J http://lexusls.asia/ [9,7 MB] J http://muffi.pl/en/ [19,9 MB] J http://lordandtaylorfirstlook.com/ [3,3 MB] J http://community.saucony.com/kinvara3/ [8,1 MB] J http://www.entropy-thegame.com/ [11,6 MB] J http://futuremylove.com/ [0,9 MB] Man muss zwischen den Animationen, der Performance und der Implementierung unterscheiden. Die Größe der Website ist nicht das einzige Kriterium, durch gezieltes Lazyload lässt sich vieles relativieren. Schlecht platzierte oder zuviele Animationen machen das Erlebnis schnell kaputt.
12. - 12 - Tipps für die Praxis 01. Nutzt CSS3 und HTML5 02. Animiert den User zu scrollen 03. Erfindet das Rad nicht neu, programmiert niemals ein Parallax-Framework 04. Setzt Animationen gezielt ein, weniger ist oft mehr 05. Deaktiviert das Parallax-Scrolling ab einer gewissen Auflösung 06. Erzählt eine Geschichte, kein Einsatz ohne Sinn und Verstand 07. Achtet auf die Performance - verzichtet aber niemals deswegen auf Bilder
14. - 14 - Parallax für Parallax ist eine auf jQuery basierende Extension und vollkommen in den Contao Workflow integriert. Übersichtlich, schlank und für jeden zu verstehen. Du benötigst keine Kenntnisse in JavaScript bzw. jQuery. CSS und HTML setzen wir allerdings voraus. Contao
15. - 15 - Vorteile der Extension J Keine JavaScript-Kenntnisse erforderlich J Die Parallax-Konfiguration erfolgt zu 100% im Backend von Contao J Flexibel erweiterbar J Startset für Animationsabläufe J Kompetenter Support - wir kennen die Fallstricke der Praxis J Integrierte Mehrsprachigkeit und Multi-Domain Fähigkeit J Regelmäßige Updates J Schnelle Fehlerkorrekturen J Tolle neue Features wie LazyLoad sind bereits in der Planung Projektwebsite: Doku: http://www.contao-parallax.com/ http://menatwork.github.io/parallax-doku
16. contao-parallax.com