En något djärv förutsägelse: 2014 kommer att gå ner som parallaxåret. Innan du nedspelar den här återkommande trenden, tänk på den. Med utvecklingen i HTML, CSS och jQuery, och fler som kör på höghastighetsinternetanslutningar är det inte en sträcka att tro att den här smutsiga tekniken verkligen kommer att explodera i år.
Parallax rullningseffekter är roliga, användarvänliga och tillåter nya typer av kreativ tanke i webbdesignprocessen. Slutresultatet är en teknik som kan vara kul att skapa och kan skapa en mycket visuell och interaktiv upplevelse för användarna.
Vad är Parallax?
Parallax är en teknik där innehållsskikt är utformade för att arbeta och flytta ihop. Det sätt som det fungerar är att bakgrunds-, mellan- och förgrundsbilder skapas och utformas för att flytta med olika hastigheter så att element på skärmen flyttar.
Parallax kan fungera med ett klick eller bläddringsfunktion (kallad parallaxrullning) och element kan flyttas upp och ner eller från sida till sida. I vissa parallaxdesigner rör alla element ihop så det verkar som om du flyttar från en skärm till en annan. Andra parallaxdesign möjliggör flera rörliga delar på ett sådant sätt att nästan skapar aktiva animeringar.
Parallaxeffekter är inte nya. De har faktiskt funnits i åratal. (Tänk på videospel och animerade gifs.) Men till sist var dessa effekter minst ostliknande och ofta gränsen löjliga. Tekniken var svår att skapa och fungerade bra, och designers och utvecklare förblir mestadels borta från den.
Men Apple hjälpte igen att leda avgiften för att göra denna teknik mer utbredd, med hjälp av parallaxeffekter i lanseringen av iOS 7 förra hösten. Och många designers följde efter, med parallaxrullande effekter som dyker upp över hela webben och i en mängd olika appar. Men denna gång var tekniken mycket mer förfinad och ger en minnesvärd användarupplevelse.
Detta kommer att bli ett genombrott år
En betoning på användarupplevelse är varför parallaxeffekter verkligen kommer att ta av i år. Tekniken kan användas för att skapa en ganska minnesvärd webbplats utan många klick. Parallax rullningseffekter kan skapa en känsla av mysterium för användaren som en? Historia? utvecklar sig. Med varje ny rörelse utvecklas något nytt för användaren. Denna effekt kan skapa intriger och en önskan om att fortsätta att interagera med en webbplats. (Alltid en bonus för dig som spårar tid på plats.)
Parallax erbjuder ett annat sätt att visa innehåll och design. Designers experimenterar med parallax eftersom:
- Det är kul
- Det skapar en ny och tydlig användarupplevelse
- Det uppmuntrar besökare att stanna längre
- Det appellerar till vår känsla av nyfikenhet
- Det är ett nytt sätt att skapa en visuell historia
Stora effekter på "en sida"
Parallax effekter verkar i harmoni med en annan webbdesign trend - single page design. Du kan skapa olika skärmar med innehåll som ser ut och fungerar nästan som olika sidor men är faktiskt alla på en enda sida.
Några av mina favoritparallax scrolling? Sidor? Inkludera effekter som ger olika upplevelser. Ofta kommer färgen att ändras när du kommer till nytt innehåll, eller en bildbyte sker. Cyclemon gör ett bra jobb med denna effekt på ett super enkelt sätt. Med varje rullningsskärm får användaren en ny bakgrund (i en distinkt färg) och ny cykelcykel i förgrunden. Webbplatsen är robust men aldrig mossar ner. Du kan bläddra igenom var och en av de 19? Skärmarna? snabbt eller använd lättnavigering på höger sida av sidan för att hoppa sektioner. (Vilket snyggt visar dig allt du hoppade över i en blixt.)
New York Times har också varit en av ledarna i parallaxdesign med anmärkningsvärda funktioner som "Tomat Can Blues? och den prisbelönta? Snow Fall.? Tidningswebbsidan gör ett bra jobb med att använda parallax för att berätta en historia med rörelse, text, video och bilder. I? Tomat kan Blues? Tegneserie stilbilderna kommer till liv med enkel rörelse tack vare parallax. I? Snö fall Longform-berättelsen berättas med en blandning av effekter som gör att du går igenom innehållet.
Parallax Plusses
Medan det finns olika fördelar med en mängd olika designstilar, har parallax några av sina egna. Enkelt kan effekterna vara mycket roliga. Det ensamma kommer sannolikt att engagera användare.
Coola effekter får användarna att märka. Men parallaxtekniker kan också ha andra fördelar:
- Distinkt berättande stil: Med all tonvikt på innehåll är den här stilen att skapa innehåll som berättar en historia ett lönsamt alternativ.
- Samtal till handling: Parallax effekter kan användas för att berätta för användarna vad du vill att de ska göra. Från att klicka på en länk för att fylla i ett formulär eller köpa ett objekt kan parallaxeffekter leda användarna till en direktåtgärd.
- Engagemang: Det finns ingen tvekan om att webbplatser med effektiva och väl utformade parallaxeffekter har högre land längre engagemangstider med användarna.
- Funktion: Du kan använda parallaxeffekter för att visa en produkt. Tänk på 360-graders syn på objekt på vissa detaljhandeln. Låt användarna verkligen se ett föremål innan de köpas.
Parallax Tips
Parallaxeffekter är inte för alla typer av sajter. Du behöver veta vad du vill få från den här tekniken innan du använder den bara för att den är trendig.
Och medan parallaxeffekter kan få komplicerade bråttom, är det bästa rådet att hålla sakerna enkla. Bestäm vilken effekt du vill använda och hålla fast vid den genom hela webbplatsen. Ge tips för användarna om det finns några frågor om hur webbplatsen fungerar. (Till exempel, om en rullning gör något rör sig åt vänster till höger i stället för upp och ner, låt användarna veta.)
Använd parallax för att berätta en historia. Det är hands-down den bästa användningen av tekniken. Se till att dina effekter speglar åtgärder som användare skulle göra när de interagerar med ditt innehåll.
Var medveten om vikt på webbplatsen.Med så mycket som händer i bakgrunden och koden, bör allt på denna typ av webbplatsdesign optimeras optimalt. Skala bilder på rätt sätt, håll koden ren och se till att din webbplats laddas snabbt.
Peka användare i rätt riktning. Samtal till handling bör tydligt märkas på skärmen med användarvänliga instruktioner.
Fallgropar av Parallax
Parallax webbplatser kan bli tunga snabbt, utgöra några SEO-problem, är ofta inkompatibla med lyhörda konstruktionsramar, tillåter inte intern länkning och fungerar inte så bra för stor innehåll.Även om det finns en debatt om huruvida alla användare gillar parallaxeffekter eller inte - det uppenbara svaret är nej, du kan inte behaga alla hela tiden - det finns några nackdelar att tänka på. Parallax webbplatser kan bli tunga snabbt, utgöra några SEO-problem, är ofta inkompatibla med lyhörda konstruktionsramar, tillåter inte intern länkning och fungerar inte så bra för stor innehåll.
En tung parallaxwebbplats bör undvikas. Om webbplatsen inte laddas snabbt, väntar användarna inte på att se ditt innehåll. Skapa webbplatsen så litet som möjligt, var försiktig med bilder och effekter.
Sökmotoroptimering tar en stor hit med webbplatser av en sida av något slag. Eftersom webbplatsens natur är enkel finns det inte mycket som kan göras för att söka upp nyckelord, skapa länkar och bidra till sökning. Där du kan se en SEO-boost är genom sociala medier, eftersom webbplatser som är unika och olika tenderar att delas.
När det gäller responsiv design och mobil är parallax inte riktigt där än. Ofta behöver du en stor skärm för att verkligen se effekterna. Parallax är också en teknik som fungerar bäst för ett projekt med ett smalt omfång. Med alltför mycket innehåll kan det bli överväldigande snabbt.
5 stora parallaxwebbplatser
Atlantis världs mässa
Express Solicitors
Mario Kart
Minhacidade.me
Soleil Noir
Slutsats
Tack vare sin roliga och enkla natur är parallaxdesignteknik något som vi fortsätter att se mer av under året. Antalet webbplatser som redan använder någon form av parallaxåtgärder växer dagligen med fler designers som försöker händerna på rörliga effekter.
Det är en trend som jag njuter av. Jag älskar att besöka en webbplats för första gången och verkligen vill spela med innehållet för att se vad som händer nästa. Parallax talar till min allmänt nyfikna natur och det extra elementet i berättandet gör denna typ av webbdesign mer roligt.
Bildkällor: Ben Bodyguard, Honda CRV, Black Eye Project, Faror av Fracking, Arnold Clark och Tinke. (Jag rekommenderar att du klickar på de bilder som nämns för att verkligen få en känsla för hela omfattningen av hur varje webbplatss parallax fungerar. Skärmbilderna överför inte helt skönheten i hur dessa webbplatser fungerar.)