12 Essential Scroll-To-View Animasjonstendenser
Animerte sideelementer er super vanlige på destinasjonssider og oppstartssider. Men de snakker ikke alltid om i designkretser fordi ideen om "animate on view" ikke er dekket mye.
Jeg bruker uttrykket scroll-to-view fordi det virker som en nøyaktig beskrivelse. I utgangspunktet når du ruller nedover siden, kommer nye, animerte elementer til syne.
Det er ikke en teknikk som fungerer for alle nettsider, men det legger til en fin touch i enkelte layouter. Og jeg har curated noen av mine favoritter her for å vise hvordan disse scroll-to-view animasjonene fungerer og hvorfor du kanskje prøver å bruke dem selv.
1. I morgen sov
På I morgen sov nettside vil du legge merke til noen ganske godartede animerte effekter. Disse fade forskjellige biter av tekst og CTAer i visning rundt hele oppsettet.
Det som er interessant, er hvordan de fleste av bildene og bakgrunnsområdene er fullt synlige selv ved første rulle. Mange nettsteder bruker fading animasjon for å vise bilder og skjermbilder samtidig som teksten blir synlig.
Denne mindre forskjellen bidrar til å trekke oppmerksomheten til teksten, etterhånden som den falmer til syne. En fin måte å fange opp oppmerksomhet fra besøkende å bla gjennom.
2. Twist
En annen teknikk jeg ofte ser, er rettet mot det meste av sidens innhold for rulleanimasjoner.
For eksempel Twist app hjemmeside inkluderer varierende sidesegmenter og blokker av tekst som animerer i og ut av visning på bla. Disse har en veldig myk fading effekt, så de er merkbare, men ikke for harde.
Noen besøkende kan bli irritert av forsinkelsen, men jeg tror ikke det er for lenge. Pluss det bare animerer en gang, så hvis du treffer bunnen av siden, blir alle animasjoner gjort.
3. Garnapp
For mye mer komplekse animasjoner sjekk ut Garnapp lander. Denne har multi-part animasjoner og jevne elementer som kommer til syne fra forskjellige vinkler.
Noen av skjermdumpedimensjonene animerer oppover, mens de tilhørende tekst / BG-mønstrene aner ned til visning. Denne alternerende stilen er ganske unik og ikke noe jeg ofte ser.
Men destinasjonssiden er også utrolig enkel, og det er ikke mye annet her for å få tak i oppmerksomheten. I dette tilfellet fungerer varierende animasjoner pent.
4. DashFlow
Av alle disse eksemplene tror jeg DashFlow bruker de vanligste animasjonsteknikkene.
Denne landeren animerer bilder og tekst til alt i en sittende. Det er ekte enkelt og bruker en enkelkolonneoppsett så alt innhold flyter rett ned i en lineær bane.
Ingenting iboende spesielt med dette designet utover den veldig klare metoden for å animere elementer på rulle. En flott stil hvis du har et lignende nettsted og vil holde animasjonene enkle.
5. Quuu Promote
Quuu fremme holder animasjoner til det bare minimum og bruker dem bare i CTA-områder.
Jeg kan ikke si om dette øker konverteringer, men det synes å være målet. Når du laster inn siden, animerer den aller øverste toppteksten med en skrå animasjon på CTA.
Når du ruller ned, vil du legge merke til at resten av siden er ganske statisk. Men nederst er det en endelig CTA over fotfoten som også animerer og kjører den samme vippe animasjonen.
Går for å vise at du kan ha on-scroll animasjonseffekter som ikke kjører over hele siden.
6. Qonto
Hjemmesiden til Qonto har en interessant ta på scroll-to-view animasjon. Den bruker samme type animasjon på hele nettstedet og animerer individuelle elementer til visning fra siden.
For flertallet av siden inkluderer dette ikonavsnitt som har en liten grafikk over noe innhold som forklarer appens funksjoner. Ikke for subtil, men ikke altfor åpen, heller.
I tillegg kan du finne noen andre animasjonsstiler i toppteksten sammen med noen BG-bilder som falmer i visningen. Denne siden er bare et flott eksempel på hva web animasjon kan gjøre.
7. Fottur
For et eksempel på subtile animasjoner sjekk ut Gå .
Siden deres veksler mellom animerte elementer og faste elementer. Men animasjonseffektene er raske, slik at du ikke føler deg irritert og venter på synlig innhold.
Dette er min preferanse for enhver skroll-til-animasjonseffekt. Det er alltid en vakker teknikk, men timingen må være rask og til poenget. Ingen ønsker å vente på at innhold skal komme til syne, og Hike forstår klart dette.
8. Project Fi
Hvis det er noen som vet flott UX, er det Google. Og på tvers av alle sine produkter har de massevis av destinasjonssider, Project Fi være et eksempel med noen fantastiske animasjoner.
Disse gjelder bare ikoner og de blir ikke synlige, men dukker opp fra lavere på siden. Når du ruller, finner du ikoner som glir opp i visning for hver liten del.
Det er en ganske subtil effekt, men det legger til litt liv i designen. Og den er basert utelukkende på betrakterens posisjon på siden, så hvis du ruller opp og nedover, blir du møtt av de samme animasjonseffekter.
9. Base
De Base CRM hjemmeside er et utmerket eksempel på enkel animasjon på jobben. Dette nettstedet bruker egendefinerte animasjonseffekter for å flytte bilder opp og inn i seerens øye.
Basert på antall landingssider jeg ser daglig er dette veldig typisk for det jeg forventer. Det er egentlig ikke en kompleks animasjon å gjenskape, og det påvirker ikke opplevelsen for mye heller.
En ting jeg ønsker er at animasjonene ville laste litt raskere. Men utover det tror jeg dette er et godt eksempel på animerende bilder på rulle med et veldig rent oppsett for å starte opp.
10. AnyList
Alle de beste mobile applikasjonene har egne nettsteder for markedsføring. Og de beste har vanligvis ganske snille animasjonsstiler.
AnyList blander noen forskjellige teknikker sammen på en side. Deres topptekst animerer opp fra under avsnittsområdet, men det er den eneste "flytte" animasjonen på siden.
Alt annet forsvinner bare, og det hele bruker en ganske rask belastningstid for animasjonen. Disse teknikkene brukes andre steder på nettstedet som gir den en mer sammenhengende følelse.
11. Ernest
Sidestilen for Ernest er litt annerledes enn andre destinasjonssider jeg har dekket.
Det bruker parallax rullende animasjoner å lage bevegelse på en enkelt sidelayout med forskjellige seksjoner.
Disse varierer basert på retningen du ruller om du flytter opp eller ned, og i hvilken hastighet. De varierer også med intensitet basert på de ulike delene av siden.
Du kan navigere ved hjelp av sidepunktnavigasjonsmenyen, og dette hopper raskt rundt siden til forskjellige områder. Det er en av de få teknikkene du ofte ser på parallax sider, og det hjelper absolutt Ernest skiller seg ut fra mengden.
12. TaxiNet
For å få et glimt av fullside animasjoner i aksjon, ta en titt på TaxiNet nettside.
Det er et smorgasbord av rullebaserte animasjonseffekter knyttet til ikoner, tekst, bilder og til og med bakgrunnsstiler. Individuell side bakgrunnsfarger animerer til visning med brukeren, definitivt ikke en typisk teknikk, men absolutt en interessant en.
Hvis du liker denne stilen, kan du absolutt bruke en lignende tilnærming til din egen destinasjonsside. Bare vær sikker på at du holder animasjonene snappete og raske fordi ingen vil vente på at dine fine animasjoner skal lastes.
Men hvis du gjør det riktig, vil disse scroll-to-view-elementene legge til en fin effekt på en hvilken som helst destinasjonsside.
