Parallax effekter är fortfarande en av de hetaste webbdesigntrenderna. Denna animerade rullningsteknik händer när bakgrunden och förgrunden rör sig med olika hastigheter medan användaren rullar så att två oberoende lager flyttar samtidigt.
Denna effekt kan användas för alla typer av webbtyper och är ett roligt sätt att skapa - och öka - användarengagemang. Det fina med parallaxeffekter är att du inte behöver använda dem på varje sida i en design. parallax scrolling är en bra hemsida teknik för att hjälpa användare att ringa till handling eller annat innehåll.
Parallaxeffekter skapar ett djup- och avståndsdimension och en större betydelse i tre dimensioner än några andra tekniker, vilket gör att användarna känner sig som en del av designen.
Nackdelen med parallaxeffekter är att de inte alltid arbetar med mobila enheter. (Men det finns också några lösningar för det också i handledningen i slutet av den här artikeln.)
Här är fem parallaxeffekter och stilar att överväga. (Se till att klicka genom länkarna för att se exakt hur varje animering fungerar.)
1. Animation to Show Change
Använd parallax effekter för att visa förändring i ett projekt. Lager rörelser kan förmedla ett avstånd i tid, utrymme eller plats.
Parallax påverkar bästa showcase förändring när de arbetar med innehållet på webbplatsen.
Porsche Evolution, ovanför, visar förändringar över tiden med förändringar i bakgrunden och bilen i förgrunden av varje bild. (Slå på ljudet och musiken ändras också med årtionden.)
Designen håller användarna i rullning eftersom du vill se hur bilen ser ut som nästa. Denna teknik kan fungera i kronologisk ordning (som sedd här) eller omvänd kronologisk ordning. Och en nyckel till att få det att fungera är att den här sidan fungerar i båda riktningarna - även om musiken går tillbaka - om du rullar upp mot ner.
Sonance använder parallax för att visa en annan typ av förändring - ändra plats i hela konstruktionen. Parallaxeffekter är en del av webbplatsens övergripande navigationsmönster och det finns en aning om var i designen (plats) användarna är genom hela upplevelsen.
2. Uppmuntra rullning
Anledningen till att parallaxeffekter kan bidra till att skapa engagemang är att de uppmuntrar att rulla för att hålla användare interagerade med designen under en längre tid.
Många mönster med parallaxeffekter inkluderar en? Scroll? instruktion eller cue höger på hemsidan för att bidra till att uppmuntra denna interaktion från början. (Hemsidan för The Walking Dead Zombiefied innehåller denna instruktion på sidan innan den här bilden ovanför.)
Walking Dead-webbplatsen gör något lite annorlunda med parallax för att uppmuntra interaktion - rullning tar användarna över skärmen eftersom tecknet rör sig genom olika komiska stilpaneler - snarare än upp och ner.
3. Rörelse och färg
Ett av de roligaste sätten att använda parallaxrullning är att infoga färg i olika innehållspaneler? att visa upp element eller portföljprojekt. Färgbyte och animering kan innebära något nytt.
Färg är också ett uppmärksammande designverktyg som kan hjälpa till att dra användare in.
Werkstatt, ovan, använder en startvit och grå skiss med parallaxlager mellan element och text. Men en extra svängningshandling ger varje projekt liv med färg. Kombinationen av effekter fungerar bra eftersom resten av designen är enkel och det uppmuntrar användarna att interagera med varje enskilt element.
Lois Jeans tar ett annat parallax tillvägagångssätt med färg. Varje ny färg lyfter fram en annan del av klädkampanjen - shoppare kan se jeans på modeller i olika naturliga miljöer med eld, luft, vatten och jord.
4. Gör information enklare att smälta
Parallax effekter kan hjälpa till att göra komplex information eller tunga block av text mindre, mer läsbar och lättare att smälta. Det är ett intressant koncept när du tänker på flyttande typ, men den aktuella praxisen involverade att flytta behållare som håller typ.
Exemplen ovan visar två olika tillämpningar av detta koncept.
Melanie David har en lång intro på henne om skärmen. Den vänstra sidan som visar navigationselementet - Om - Flytta inte medan användare kan bläddra igenom texten till höger. När textblocket slutar flyttas båda sidorna av sidan till nästa avsnitt. Det är en bra lösning för ett textblock som är längre än det visuella innehållsområdet.
Le Duc-restaurangen använder enskilda block för olika delar av menyn som dyker in baserat på hur du skulle läsa och beställa matvaror. Animationerna är enkla med den roliga fiskbakgrunden - som berättar användarna något om matserveringen - och gör menyn lätt att smälta.
5. Visualisera? Digital? Verklighet
En av de största användningarna av parallaxeffekter är att hjälpa användarna att visualisera något som de inte annars kan se. Fler mönster använder en kombination av tredimensionell och parallaxanimering för att skapa mer realistiska upplevelser.
Dessa 3D-design tenderar att falla i riken av en mer tecknadstilupplevelse, som Madwell ovan, men kan också ha en mer VR-känsla när designen arbetar med en viss typ av enhet.
Ett av de klassiska exemplen på en webbplats som använder parallaxeffekter som har funnits under en tid är Seattle Space Needle-webbplatsen. Den använder en uppåtgående rullteknik för att efterlikna hur det skulle se ut att rida upp till toppen av landmärket.
Parallaxrullning flyttar skylinen mot insidan av byggnaden med en del samtal till handlingsmeddelanden och en bra navigeringsfält som visar hur högt uppehållet är. Designen är pedagogisk, äventyrlig och visar användaren något som är svårt att föreställa sig utan den animerade effekten.
3 stora parallaxresurser
Klar för att skapa en parallell effekt för ditt nästa projekt? Dessa handledning och kodutdrag hjälper dig att lägga till en animerad effekt för din design som kan hjälpa till att dra in användare och hålla dem engagerade längre.
- Hur man skapar en Parallax Scrolling Effect: W3schools handledning tar dig genom att skapa rörliga behållareffekter och ger sätt att använda mediafrågor för att få en liknande effekt på mobila enheter.
- Parallax Scrolling Website Demo: Se exakt hur denna teknik fungerar med en enkel demo och förklaring.
- 15 Captivating Parallax Effects från CodePen: Listan visar några stora parallaxpennor för att hoppa på din kreativitet och du kan spela med var och en.
Slutsats
Medan parallaxeffekter är trendiga och roliga, är de inte för alla projekt. Det är också viktigt att tänka på att en del publik på vissa enheter kan kämpa med att navigera på en webbplats som innehåller mycket animering.
Ta en lista över dina användare och deras preferenser innan du lägger till en parallell effekt. Börja små med parallax på en plats, till exempel hemsidan, och spåra analys för att se om det fungerar för dig (ökad tid på plats är det en aning om att den fungerar).
Använd parallax när det fungerar med ditt innehåll och meddelanden. Denna trendiga teknik ska vara kul att designa och interagera med.