12 Väsentliga Scroll-To-View Animation Trends
Animerade sidelement är super vanliga på målsidor och startwebbplatser. Men de pratar inte alltid om designkretsar eftersom idén att "animera på bild" inte är täckt mycket.
Jag använder frasen scroll-to-view eftersom det verkar som en exakt beskrivning. I grund och botten när du rullar ner på sidan kommer nya animerade element att ses.
Det är inte en teknik som fungerar för varje hemsida men det lägger till en fin touch i vissa layouter. Och jag har curated några av mina favoriter här för att visa hur dessa scroll-to-view-animationer fungerar och varför du kanske försöker använda dem själv.
1. I morgon sov
På I morgon sov webbplats kommer du att märka några ganska godartade animerade effekter. Dessa bleknar olika bitar av text och CTA-filer i hela layouten.
Det som är intressant är hur de flesta av bilderna och bakgrundsområdena är fullt synliga även vid första rullningen. Många webbplatser använder blekande animering för att visa bilder och skärmdumpar samtidigt som texten hålls synlig.
Denna smärre skillnad hjälper till att uppmärksamma texten eftersom den bleknar i sikte. Ett bra sätt att fånga uppmärksamhet från besökare att bläddra längs.
2. Twist
En annan teknik som jag ofta ser riktar in mot det mesta av sidans innehåll för animering på rullning.
Till exempel Twist app hemsida innehåller varierande sidsegment och block av text som animerar i och ur syn på rullning. Dessa har en mycket mjuk blekande effekt så att de är märkbara men inte alltför hårda.
Vissa besökare kan vara irriterad av förseningen men jag tror inte att det är för långt. Plus det animerar bara en gång så om du träffar längst ner på sidan är alla animeringar färdiga.
3. Garnapp
För mycket mer komplexa animationer kolla in Garnapp landaren. Den här har flera delade animeringar och jämnaste element som kommer från olika vinklar.
Några av skärmdumpsemobilderna animeras uppåt medan de medföljande text- / BG-mönstren animar ner i vyn. Denna växlande stil är ganska unik och inte något jag ser ofta.
Men målsidan är också otroligt enkel och det finns inte mycket annat här för att fånga uppmärksamhet. I detta fall fungerar olika animationer bra.
4. DashFlow
Av alla dessa exempel tror jag DashFlow använder de vanligaste animeringsteknikerna.
Denna landare animerar bilder och text för att se alla i ett sittande. Det är riktigt enkelt och använder en enkelspaltlayout så all innehåll strömmar rakt ner i en linjär väg.
Ingenting är självklart speciellt om denna design utöver den mycket tydliga metoden att animera objekt på rullning. En bra stil om du har en liknande webbplats och vill hålla animationerna enkla.
5. Quuu Promote
Quuu marknadsföra håller animeringar till det minsta läget och använder dem bara i CTA-områden.
Jag kan inte säga om detta ökar konverteringar men det verkar vara målet. När du först laddar upp sidan animerar den allra högsta rubriken till bild med en lutande animering på CTA.
När du rullar ner märker du att resten av sidan är ganska statisk. Men längst ner finns det en slutlig CTA ovanför sidfoten som också animerar och kör samma lutande animering.
Visas att du kan ha på-animeringseffekter som inte körs över hela sidan.
6. Qonto
Hemsidan för Qonto har en intressant tag på animering med scroll-to-view. Den använder samma typ av animering över hela webbplatsen och animerar enskilda objekt i vyn från sidan.
För majoriteten av sidan ingår detta ikonavsnitt som har en liten grafik över något innehåll som förklarar appens funktioner. Inte för subtil men inte överdrivet öppen.
Dessutom kan du hitta några andra animationsstilar i rubriken tillsammans med några BG-bilder som bleknar i bild. Den här sidan är bara ett vackert exempel på vad webbanimation kan göra.
7. Vandring
För ett exempel på subtila animationer kolla in Vandra .
Deras sida växlar mellan animerade element och fasta element. Men animeringseffekterna är snabba så att du inte känner dig irriterad och väntar på synbart innehåll.
Det här är min preferens för en scroll-to-animation-effekt. Det är alltid en vacker teknik men tidpunkten måste vara snabb och till den punkten. Ingen vill vänta på att innehållet kommer att synas och Hike förstår klart detta.
8. Projekt Fi
Om det finns någon som vet stor UX är det Google. Och över alla sina produkter har de massor av målsidor, Project Fi vara ett exempel med några fantastiska animationer.
Dessa gäller bara ikoner och de bleknade inte i sikte, men snarare dyker upp från lägre på sidan. När du rullar hittar du ikoner som glider upp i vyn för varje liten sektion.
Det är en ganska subtil effekt men det lägger till lite liv i designen. Och det är baserat uteslutande på betraktarens position på sidan, så om du bläddra till toppen och gå tillbaka ner kommer du att hälsas av samma animeringseffekter.
9. Bas
De Base CRM hemsida är ett utmärkt exempel på enkel animering på jobbet. Den här webbplatsen använder anpassade animeringseffekter för att flytta bilder upp och in i tittarens ögonlinje.
Baserat på antalet målsidor ser jag dagligen är detta mycket typiskt för vad jag förväntar mig. Det är inte en komplex animation att återskapa och det påverkar inte upplevelsen för mycket heller.
En sak som jag önskar är att animationerna skulle ladda lite snabbare. Men bortom det tycker jag att detta är ett utmärkt exempel på animering av bilder på rullning med en mycket ren layout för att starta.
10. AnyList
Alla de bästa mobilapplikationerna har egna webbplatser för marknadsföring. Och de bästa har vanligtvis några snygga animationsstilar.
anylist blandar några olika tekniker tillsammans på en sida. Deras huvudbild animerar uppifrån under avklippningsområdet, men det är den enda "rörliga" animationen på sidan.
Allt annat blir bara synligt och allt använder en ganska snabb laddningstid för animationen. Dessa tekniker används annorstädes på webbplatsen vilket ger den en mer sammanhängande känsla.
11. Ernest
Sidstilen för Ernest är lite annorlunda än andra målsidor jag har täckt.
Det använder parallax rullning animeringar för att skapa rörelse på en enda sidlayout med olika sektioner.
Dessa varierar beroende på den riktning du rullar om du flyttar upp eller ner och i vilken hastighet. De varierar också med intensitet baserat på de olika sidorna på sidan.
Du kan navigera med sidotiknavigationsmenyn och hoppar snabbt runt sidan till olika områden. Det är en av de få teknikerna du ofta ser på parallax sidor och det hjälper verkligen Ernest att sticka ut från publiken.
12. TaxiNet
För att få en glimt av fullsidans animeringar i åtgärd, ta en titt på TaxiNet hemsida.
Det är ett smorgasbord av rullningsbaserade animeringseffekter knutna till ikoner, text, bilder och till och med bakgrundsstilar. Individuella bakgrundsbildsfärger passar in i synnerhet med användaren, definitivt inte en typisk teknik men säkert en intressant.
Om du gillar den här stilen kan du absolut tillämpa ett liknande tillvägagångssätt för din egen målsida. Se bara till att du håller animationerna snygga och snabba eftersom ingen vill vänta på att du ska ladda ner dina snygga animationer.
Men om du gör dem, ger dessa scroll-to-view-element en bra effekt på vilken målsida som helst.
