12 tendenze di animazione essenziali da scorrimento a vista
Gli elementi di pagina animati sono molto comuni nelle pagine di destinazione e nei siti Web di avvio. Ma non si parla sempre nei circoli del design perché l'idea di "animare a vista" non è molto trattata.
Uso la frase scroll-to-view perché sembra una descrizione accurata. Fondamentalmente quando scorri verso il basso nella pagina vengono visualizzati nuovi elementi animati.
Non è una tecnica che funziona per ogni sito Web ma aggiunge un tocco in alcuni layout. E ho curato alcuni dei miei preferiti qui per mostrare come funzionano queste animazioni scroll-to-view e perché potresti provare a usarle tu stesso.
1. Domani dormi
Sul Domani dormi sito web noterete alcuni effetti animati abbastanza benigni. Questi svaniscono diversi pezzi di testo e CTA in vista tutto intorno al layout.
La cosa interessante è il modo in cui la maggior parte delle immagini e delle aree di sfondo sono completamente visibili anche al primo scorrimento. Molti siti Web utilizzano l'animazione fading per visualizzare immagini e schermate mantenendo il testo visibile.
Questa piccola differenza aiuta a attirare l'attenzione sul testo mentre sfuma. Un ottimo modo per catturare l'attenzione dei visitatori che navigano insieme.
2. Twist
Un'altra tecnica che vedo spesso è il targeting della maggior parte dei contenuti della pagina per le animazioni on-scroll.
Ad esempio il Twist app homepage include vari segmenti di pagina e blocchi di testo che si animano in & out of view su scroll. Questi hanno un effetto di dissolvenza molto morbido, quindi sono evidenti ma non troppo duri.
Alcuni visitatori potrebbero essere infastiditi dal ritardo, ma non credo che sia troppo lungo. Inoltre si anima solo una volta, quindi se colpisci il fondo della pagina tutte le animazioni sono fatte.
3. App Yarn
Per animazioni molto più complesse dai un'occhiata a App Yarn lander. Questo ha animazioni in più parti e persino elementi che vengono visualizzati da diverse angolazioni.
Alcune delle immagini dimostrative dello screenshot si animano verso l'alto mentre i modelli di testo / BG che accompagnano si animano in vista. Questo stile alternato è piuttosto unico e non è qualcosa che vedo spesso.
Tuttavia, la pagina di destinazione è anche incredibilmente semplice e non c'è molto altro qui per attirare l'attenzione. In questo caso le animazioni variabili funzionano bene.
4. DashFlow
Di tutti questi esempi, penso DashFlow utilizza le tecniche di animazione più comuni.
Questo lander anima immagini e testo in vista tutti in una volta sola. È molto semplice e utilizza un layout a colonna singola in modo che tutto il contenuto scorra verso il basso in un percorso lineare.
Niente di intrinsecamente speciale in questo progetto oltre al metodo molto preciso di animare gli oggetti sullo scroll. Un grande stile se hai un sito simile e vuoi mantenere le animazioni semplici.
5. Promuova Quuu
Promuovi Quuu mantiene le animazioni al minimo e le utilizza solo nelle aree CTA.
Non posso dire se questo aumenta le conversioni, ma questo sembra essere l'obiettivo. Quando si carica la pagina per la prima volta, l'intestazione superiore si anima in vista con un'animazione basculante sul CTA.
Mentre scorri verso il basso noterai che il resto della pagina è piuttosto statico. Ma in fondo c'è un ultimo CTA sopra il piè di pagina che anima e esegue la stessa animazione inclinata.
Va a dimostrare che è possibile avere effetti di animazione su scorrimento che non vengono eseguiti su tutta la pagina.
6. Qonto
La homepage di Qonto ha un'interpretazione interessante dell'animazione scroll-to-view. Usa lo stesso tipo di animazione su tutto il sito web e anima i singoli oggetti in vista dal lato.
Per la maggior parte della pagina questo include sezioni di icone che hanno una piccola grafica sopra alcuni contenuti che spiegano le caratteristiche dell'app. Neanche troppo sottile ma non eccessivamente evidente.
Inoltre puoi trovare alcuni altri stili di animazione nell'intestazione insieme ad alcune immagini BG che appaiono in dissolvenza. Questa pagina è solo un magnifico esempio di cosa animazione web può fare.
7. Escursione
Per un esempio di animazioni sottili, dai un'occhiata escursione .
La loro pagina si alterna tra elementi animati e elementi fissi. Ma gli effetti dell'animazione sono veloci, quindi non ti senti annoiato in attesa di contenuti visibili.
Questa è la mia preferenza per qualsiasi effetto di scorrimento su animazione. È sempre una tecnica bellissima, ma i tempi devono essere rapidi e concreti. Nessuno vuole aspettare che i contenuti vengano visualizzati e Hike lo capisce chiaramente.
8. Project Fi
Se c'è qualcuno che conosce l'ottimo UX è Google. E in tutti i loro prodotti hanno un sacco di pagine di destinazione, Progetto Fi essere un esempio con alcune fantastiche animazioni.
Questi si applicano solo alle icone e non si visualizzano in dissolvenza, ma appaiono piuttosto in basso nella pagina. Mentre scorri troverai le icone che si aprono in vista per ogni piccola sezione.
È un effetto piuttosto sottile, ma aggiunge un po 'di vita al design. Ed è basato esclusivamente sulla posizione dello spettatore sulla pagina, quindi se si scorre verso l'alto e si torna indietro, si riceveranno gli stessi effetti di animazione.
9. Base
Il Homepage di base CRM è un eccellente esempio di semplice animazione al lavoro. Questo sito utilizza effetti di animazione personalizzati per spostare le immagini verso l'alto e nella linea degli occhi dello spettatore.
In base al numero di pagine di destinazione che vedo ogni giorno, questo è molto tipico di quello che mi aspetto. Non è davvero un'animazione complessa da ricreare e non influisce troppo sull'esperienza.
Una cosa che vorrei è che le animazioni si caricassero un po 'più velocemente. Ma oltre a questo penso che questo sia un ottimo esempio di animazione delle immagini su scroll con un layout molto pulito da avviare.
10. AnyList
Tutte le migliori applicazioni mobili hanno i loro siti web per la promozione. E i migliori di solito hanno degli stili di animazione piuttosto accattivanti.
anylist mescola alcune tecniche diverse insieme su una pagina. La loro immagine di testa si anima da sotto l'area cut-off ma è l'unica animazione "in movimento" sulla pagina.
Tutto il resto sfuma in vista e tutto utilizza un tempo di caricamento piuttosto rapido per l'animazione. Queste tecniche sono usate altrove sul sito che gli conferisce un aspetto più coeso.
11. Ernest
Lo stile di pagina per Ernest è un po 'diverso dalle altre pagine di destinazione che ho visto.
Utilizza animazioni di scrolling parallasse per creare movimento su un layout di pagina singola con sezioni diverse.
Questi variano in base alla direzione che stai scorrendo sia che ti sposti verso l'alto o verso il basso, sia a quale velocità. Inoltre variano con intensità in base alle diverse sezioni della pagina.
Puoi navigare usando il menu di navigazione del punto laterale e questo salta velocemente intorno alla pagina in diverse aree. È una delle poche tecniche che vedi spesso sulle pagine parallasse e sicuramente aiuta Ernest a distinguersi dalla massa.
12. TaxiNet
Per dare un'occhiata alle animazioni a tutta pagina in azione dai un'occhiata al TaxiNet sito web.
È un buffet di effetti di animazione basati su scroll legati a icone, testo, immagini e persino stili di sfondo. I singoli colori di sfondo della pagina si animano in vista con l'utente, sicuramente non una tecnica tipica ma sicuramente interessante.
Se ti piace questo stile, puoi assolutamente applicare un approccio simile alla tua pagina di destinazione. Assicurati di mantenere le animazioni scattanti e veloci perché nessuno vuole aspettare che le animazioni siano caricate.
Ma se lo fai correttamente, questi elementi scroll-to-view aggiungono un bell'effetto a qualsiasi pagina di destinazione.
