12 Essential Scroll-to-View Animation Trends
Animerede sideelementer er meget almindelige på destinationssider og startwebsites. Men de taler ikke altid om designkredse, fordi ideen om "animeret på visning" ikke er dækket meget.
Jeg bruger sætningen scroll-to-view, fordi det virker som en nøjagtig beskrivelse. Grundlæggende når du ruller ned på siden, kommer nye animerede elementer til syne.
Det er ikke en teknik, der fungerer for alle hjemmesider, men det giver et godt præg i visse layouter. Og jeg har curated nogle af mine favoritter her for at vise, hvordan disse scroll-to-view animationer virker, og hvorfor du måske forsøger at bruge dem selv.
1. I morgen sov
På den I morgen sov hjemmeside vil du bemærke et par forholdsvis godartede animerede effekter. Disse fade forskellige stykker tekst og CTA'er ind i hele layoutet.
Det, der er interessant, er, hvordan de fleste af billederne og baggrundsområderne er fuldt synlige selv under første rulle. Mange websteder bruger fading animation til at vise billeder og skærmbilleder, mens teksten bliver synlig.
Denne mindre forskel hjælper med at henlede opmærksomheden på teksten, da den falder til syne. En fantastisk måde at fange opmærksomhed fra besøgende browsing sammen.
2. Twist
En anden teknik, jeg ofte ser, er rettet mod det meste af sidens indhold til on-scroll-animationer.
For eksempel Twist app hjemmeside omfatter forskellige sidesegmenter og tekstblokke, der befinder sig i og uden for visning ved scrollning. Disse har en meget blød fading virkning, så de er mærkbare endnu ikke for hårde.
Nogle besøgende kan blive irriteret af forsinkelsen, men jeg tror ikke, det er for langt. Plus det animerer kun en gang, så hvis du rammer bunden af siden, er alle animationer færdige.
3. Garn App
For meget mere komplekse animationer tjek den Garn App Lander. Denne har multi-part animationer og lige elementer, der kommer fra forskellige vinkler.
Nogle af de skærmbilleder demo billeder animere opad, mens de medfølgende tekst / BG mønstre animere ned i visningen. Denne alternerende stil er ret unik og ikke noget, jeg ofte ser.
Men landingssiden er også utrolig simpelt, og der er ikke meget andet her for at få fat i opmærksomheden. I dette tilfælde fungerer forskellige animationer pænt.
4. DashFlow
Ud af alle disse eksempler tror jeg DashFlow bruger de mest almindelige animationsteknikker.
Denne lander animerer billeder og tekst til alt i ét møde. Det er rigtigt simpelt og bruger et enkeltkolonne layout, så alt indhold flyder lige ned i en lineær sti.
Intet iboende specielt om dette design ud over den meget klare metode til at animere elementer på scroll. En fantastisk stil, hvis du har et lignende websted og ønsker at holde animationerne enkle.
5. Quuu Fremme
Quuu Fremme holder animationer til det absolutte minimum og bruger kun dem i CTA-områder.
Jeg kan ikke sige, om dette øger konverteringerne, men det synes at være målet. Når du først indlæser siden, animerer den meget øverste header til visning med en vippende animation på CTA.
Når du ruller ned, bemærker du, at resten af siden er ret statisk. Men i bunden er der en endelig CTA over foden, der også animerer og kører den samme vippende animation.
Går for at vise, at du kan have on-scroll animation effekter, der ikke kører over hele siden.
6. Qonto
Hjemmesiden til Qonto har en interessant tag på scroll-to-view animation. Det bruger den samme type animation på tværs af hele hjemmesiden og animerer individuelle elementer i udsigt fra siden.
For hovedparten af siden indeholder dette ikonafsnit, der har en lille grafik over noget indhold, der forklarer appens funktioner. Ikke for subtil men ikke overdrevent åbenlyst.
Derudover kan du finde et par andre animationsstile i overskriften sammen med nogle BG-billeder, der falder i visningen. Denne side er bare et smukt eksempel på hvad web animation kan gøre.
7. Vandretur
For et eksempel på subtile animationer check ud Vandretur .
Deres side veksler mellem animerede elementer og faste elementer. Men animationseffekterne er hurtige, så du ikke føler dig irriteret og venter på synligt indhold.
Dette er min præference for enhver scroll-to-animation effekt. Det er altid en smuk teknik, men timingen skal være hurtig og til det punkt. Ingen ønsker at vente på, at indholdet kommer til syne, og Hike forstår klart dette.
8. Projekt Fi
Hvis der er nogen der kender stor UX, er det Google. Og på tværs af alle deres produkter har de masser af landingssider, Project Fi være et eksempel med nogle fantastiske animationer.
Disse gælder kun ikoner, og de falder ikke i visningen, men dukker op fra lavere på siden. Når du ruller, finder du ikoner, der glider op i visning for hver lille sektion.
Det er en temmelig subtil effekt, men det giver noget liv i designet. Og det er udelukkende baseret på betragterens position på siden, så hvis du rulle til toppen og flytte ned igen, vil du blive mødt af de samme animationseffekter.
9. Base
Det Base CRM hjemmeside er et glimrende eksempel på simpel animation på arbejdspladsen. Dette websted bruger brugerdefinerede animationseffekter til at flytte billeder op og ind i seerens øjenlinie.
Baseret på antallet af destinationssider, som jeg ser dagligt, er dette meget typisk for, hvad jeg forventer. Det er ikke rigtig en kompleks animation at genskabe, og det påvirker heller ikke oplevelsen for meget.
En ting jeg ønsker er, at animationerne ville indlæse lidt hurtigere. Men udover det synes jeg, at dette er et glimrende eksempel på animerende billeder på rulle med et meget rent layout til at starte.
10. AnyList
Alle de bedste mobile applikationer har deres egne hjemmesider til fremme. Og de bedste har normalt nogle smukke snazzy animationsstile.
AnyList blander et par forskellige teknikker sammen på en side. Deres hovedbillede animerer op under det afskårne område, men det er den eneste "bevægende" animation på siden.
Alt andet forsvinder bare i visningen, og det hele bruger en temmelig hurtig belastningstid for animationen. Disse teknikker bruges andre steder på stedet, hvilket giver den en mere sammenhængende følelse.
11. Ernest
Sidestil for Ernest er lidt anderledes end andre destinationssider, jeg har dækket.
Det bruger parallax scrolling animationer at skabe bevægelse på et enkelt sidelayout med forskellige sektioner.
Disse varierer afhængigt af den retning, du ruller, uanset om du bevæger dig op eller ned, og i hvilken hastighed. De varierer også med intensitet baseret på de forskellige sektioner på siden.
Du kan navigere ved hjælp af navigationsmenuen på siden dot, og dette hopper hurtigt rundt på siden til forskellige områder. Det er en af de få teknikker, du ofte vil se på parallax sider, og det hjælper sikkert Ernest skiller sig ud fra mængden.
12. TaxiNet
For at få et glimt af fuldside animationer i aktion, kig på TaxiNet internet side.
Det er et smorgasbord af rullebaserede animationseffekter bundet til ikoner, tekst, billeder og endda baggrundsstile. Individuelle sidebaggrundsfarver anskueliggør sig med brugeren, bestemt ikke en typisk teknik, men bestemt en interessant.
Hvis du kan lide denne stil, kan du absolut anvende en lignende tilgang til din egen destinationsside. Bare sørg for, at du holder animationerne hurtig og hurtig, fordi ingen vil vente på, at dine pæne animationer skal lastes.
Men hvis du gør dem, giver disse scroll-to-view-elementer en god effekt til enhver destinationsside.
