75 Strumenti di animazione Web da provare
L'animazione è una di quelle tendenze che ha i suoi artigli nelle interfacce web. La sua popolarità fluttua, ma è sempre lì da qualche parte, come componente essenziale in qualsiasi sito web.
Dai filatori di caricamento piccoli, appena visibili, a transizioni di intere pagine come un'esperienza cinematografica, l'animazione raggiunge ogni area dei nostri progetti.
Per i progettisti che desiderano integrare l'animazione, sono disponibili numerose opzioni. Dalle transizioni puramente decorative che facilitano le interfacce, agli effetti significativi che migliorano le esperienze degli utenti, la nostra collezione copre strumenti che consentono di creare animazioni di varie scale e per scopi diversi. Qui ci sono 75 plugin e librerie che vorrai controllare; non le userai tutte tutte le volte, ma ognuna ha un caso d'uso ideale, e alcune le userai più e più volte ...
1. Animate.css
Animate.css è una libreria fondamentale di animazioni cross-browser ordinate che sono alla base di molte soluzioni. Da classici rimbalzi e sbiadimenti a colpi di scena moderni e effetti unici è in grado di soddisfare le esigenze di quasi tutti i progetti.
2. Animazioni magiche
Animazioni magiche si concentra su effetti eccezionali che conferiscono un'interfaccia particolare. Sebbene la biblioteca non possa vantare un'immensa diversità, è sufficiente per arricchire l'esperienza dell'utente.
3. Bounce.js
Bounce.js è un piccolo parco giochi in cui è possibile condurre esperimenti con animazioni basate su CSS. Basta aggiungere un componente e ottimizzare le impostazioni per portare tutto a vivere. E alla fine, esportare il file css.
4. AnijS
anijs aiuta a gestire l'animazione in modo intuitivo usando semplici istruzioni come If, On, Do, To. La cosa bella è che puoi usare le tue classi o persino Animate.css (menzionato prima) per creare qualcosa di fantastico.
5. Snabbt.js
Snabbt.js è famoso per il suo approccio minimal che genera animazioni veloci. Pesa solo 5kb; tuttavia, è in grado di dare a qualsiasi componente un potenziamento visibile traducendo, ruotando, inclinando, ridimensionando o ridimensionando la sua forma.
6. Kute.js
Kute.js è un motore di animazione sterling che offre prestazioni eccellenti. È veloce e compatibile su diversi browser grazie a una serie di fallback fattibili che gestiscono i browser legacy. Viene fornito con numerosi plugin per fornire un ambiente di lavoro efficiente.
7. Velocity.js
Velocity.js è un motore di animazione che a prima vista può sembrare non rappresentativo. Tuttavia, il suo arsenale include tutti i normali tipi di animazione come morphing, loop, easing, scrolling, ecc. È veloce e indipendente da jQuery.
8. Lazy Line Painter
Le animazioni del percorso SVG sono semplificate Lazy Line Painter . Porta il tuo disegno grafico da Illustrator in formato SVG e caricalo sul convertitore. Quest'ultimo genererà un file jQuery che gestisce il processo di animazione. Se è necessario puoi apportare modifiche direttamente all'interno del codice.
9. SVG.js
svg.js ti offre un ambiente intuitivo in cui puoi manipolare e animare gli SVG. È piccolo e indipendente con sintassi pulita e API unificata. Fai ciò che vuoi: animare dimensioni, colore, posizione, percorsi di testo; trasformare componenti; eventi di legatura ecc.
10. Interfaccia utente movimento
A differenza degli esempi precedenti, Motion UI sfrutta il vantaggio di SASS per creare intriganti animazioni CSS. C'è un'intera gamma di transizioni ed effetti predefiniti che possono essere applicati a qualsiasi componente HTML. Tutto funziona in tutti i browser popolari tranne IE9.
11. Aspetta! Animare
Aspettare! Animare consente di operare ritardi e attese nelle animazioni in modo semplice. Calcola tutti gli intervalli di tempo richiesti attraverso il pannello piccolo e crea un'animazione naturale senza trambusto.
12. Dynamics.js
Dynamics.js è una libreria alimentata da JavaScript che offre 9 effetti standard con cui giocare. È possibile specificare la durata, la frequenza, l'attrito, le dimensioni di anticipazione e la forza di previsione per ottenere animazioni basate sulla fisica di vita reale.
13. Choreographer.js
Con Choreographer.js a portata di mano non dovresti avere paura delle animazioni complesse, dal momento che questa libreria JavaScript fa tutto il lavoro pesante. Anche se si tratta di una quantità limitata di animazioni, tuttavia ti consente di lavorare con le funzioni personalizzate in modo da poter creare i tuoi capolavori.
14. Anime.js
Con una serie impressionante di funzionalità che consente di concatenare più animazioni, sincronizzare diverse istanze, disegnare linee, trasformare oggetti, costruire singole animazioni, ecc. Motore di animazione JavaScript ti sorprenderà con il suo potenziale.
15. Mo.js
Mo.js sta per movimento per il web. È incredibilmente veloce e allo stesso tempo intuitivo e semplice. Crea percorsi coinvolgenti, transizioni modali inaspettate, layout a bolle, animazioni che scoppiano e molto altro.
16. Sequence.js
Sequence.js è un framework basato su CSS per la creazione di animazioni basate su step reattive abilitate al tocco. È ideale per creare cursori, presentazioni, banner e altri tipi di componenti dinamici. Tra i diversi piani premium troverai uno gratuito che ti garantisce una licenza open source personale.
17. Shifty
equivoco è un motore tweening con una forte attenzione all'ottimizzazione, prestazioni veloci, flessibilità ed estensibilità. È considerata un'alternativa valida a GreenSock ma con un'interfaccia molto più semplice.
18. È martedì
martedì è una libreria di animazione indipendente che può essere utilizzata in tandem con altre librerie. Rende le entrate e le uscite eleganti, sottili ed eleganti. Offre una varietà di effetti standard come fade-in, espandi-in, shrink-in, drop-in, ecc.
19. Animazione CSS
CSS Animate è un parco giochi primitivo che genera un codice valido e privo di clutter per qualsiasi animazione normale. Imposta nome, classe, proprietà di animazione, proprietà dei frame; manipola la timeline e aggiungi marcatori: in una parola, regola tutto ciò che ti serve per produrre un'animazione basata su un fotogramma chiave regolare.
20. Vivus.js
Spedizione con tre tipi di animazione: ritardare, sincronizzare e rivelare uno per uno, Vivus.js disegnerà un SVG in modo fluido e naturale rendendo l'apparizione del componente un'esperienza piacevole. Puoi andare per animazioni predefinite o utilizzare le tue funzioni personalizzate.
21. Bonsai.js
Bonsai.js è una libreria JavaScript per manipolazioni grafiche avanzate. Ha un semplice renderer API e SVG. Usa il suo editor online per dare un test drive, familiarizzare con la sintassi e persino scaricare alcuni esempi per iniziare.
22. GSAP di GreenSock
GSAP è una potente piattaforma di animazione che si rivolge ad animazioni professionali. Ha numerosi plugin e utilità che sono responsabili di vari tipi di animazioni. È costituito da BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, ecc.
23. Popmotion
Popmotion è un'altra alternativa leggera e maneggevole a Greensock nella nostra collezione. È un motore di movimento con un controllo completo su ogni fotogramma. Ha un'interpolazione avanzata, la fusione dei colori e un sacco di funzioni e azioni per la creazione di soluzioni complesse.
24. Tween.js
Con l'aiuto di un sacco di cose incredibili è fatto Tween.js . È un motore di tweening all'avanguardia con numerosi parametri per controllare l'animazione. È anche un'ottima soluzione per migliorare i progetti guidati da Three.js.
25. Hover.css
Hover.css La libreria può essere suddivisa in diverse categorie di base: transizioni 2D, transizioni di sfondo, animazioni di icone, transizioni di bordo, transizioni di ombre e bagliori, fumetti e boccoli. Applica questi effetti a qualsiasi elemento del tuo design senza restrizioni.
26. Transito
L'elenco delle caratteristiche di Transito è piuttosto breve e include le cose più importanti per la costruzione di trasformazioni 2D e 3D. Ad esempio, è possibile specificare ritardi e durate, aggiungere la funzione di andamento, utilizzare valori relativi e altro.
27. Razzo
Razzo è una soluzione per stimolare il movimento di un oggetto da un punto a un altro. Ci sono 8 effetti speciali come la pulsazione o la rotazione che conferiscono a questo viaggio una piacevole gioia .
28. Animo.js
Animo.js è uno strumento relativamente piccolo per ottenere un controllo su transizioni e animazioni. Ha una serie di plugin aggiuntivi come countdown, ruotare e animare che arricchisce la libreria e rende molto più facile ottenere l'effetto desiderato.
29. Shift.css
Shift.css è un framework per costruire animazioni all'interno di un contenitore che influisce su elementi annidati e adattivi. Esistono 15 tipi di animazioni standard tra cui lo spostamento, l'inserimento, l'uscita, il rilascio e altre ancora.
30. CSShake
CSShake viene fornito con 11 classi che forzano gli elementi del tuo DOM. Puoi scegliere la direzione (orizzontale o verticale), il tipo (fisso, pazzo, costante, pezzo), l'intensità (lenta o dura) o solo andare per un'opzione predefinita.
31. Zafferano
Se preferisci usare i mixin per manipolare animazioni e transizioni in modo facile e veloce Zafferano è sicuramente per te. È una raccolta di metodi riutilizzabili scritti in Sass in cui è possibile impostare variabili e parametri.
32. CSSynth
CSSynth è un piccolo editor in cui puoi goderti la bellezza della sincronizzazione. L'animazione è basata su un intervallo di quadrati il cui numero è possibile specificare nel riquadro di sinistra. Selezionare un effetto, impostare il ritardo e scegliere se si desidera scaricare il codice del risultato in formato CSS o SCSS.
33. Ceaser
Ceaser è uno strumento vecchio e collaudato per condurre esperimenti con la classica animazione di easing. Esiste un certo numero di varianti che partono da lineare e finiscono con quelle personalizzate. Due parametri aggiuntivi (durata ed effetto) aiuteranno a perfezionare il risultato.
34. Morf.js
Per fare un po 'più avanti lo strumento sopra citato, puoi provare a farlo Morf.js . Offre transizioni basate su funzioni di andamento personalizzate. Ci sono quasi 40 opzioni predefinite che puoi adattare rapidamente al tuo progetto.
35. Voxel.css
Voxel.css è stato creato appositamente per i rendering 3D. La sua semplice implementazione consente anche ai neofiti di afferrare il CSS 3D. La biblioteca ha 4 classi importanti: Scene, World, Editor e Voxel che aiutano a costruire giochi e godersi l'azione.
36. Repaintless.css
Repaintless.css usa la tecnica FLIP per rendere l'animazione veloce e fluida. Anche se richiede alcuni miglioramenti; tuttavia, è un inizio perfetto per coloro che prestano particolare attenzione alle prestazioni.
37. MixItUp
Mescolalo è una libreria per abbellire filtraggio, ordinamento, inserimento e altre azioni predefinite inerenti le interfacce di maggioranza come portafogli, gallerie, ecc. È privo di dipendenza e promette di fornire un alto livello di prestazioni.
38. Wallop
Come afferma il titolo, tonfo è per mostrare e nascondere le cose in modo piacevole; prevedibilmente, il suo uso generale sta nella costruzione di cursori. Tuttavia, nessuno ti impedisce di sfruttarne il potenziale e creare qualcosa di interessante e intrigante.
39. Ramjet
ramjet trasforma un elemento in un altro con l'illusione del movimento che si realizza attraverso la funzione di andamento. È in grado di lavorare con elementi DOM, SVG, immagini statiche o immagini animate.
40. jQuery DrawSVG
Basato su un potente motore di animazione jQuery, disegna in modo efficiente tutti i percorsi all'interno dell'SVG dando all'immagine un'entrata drammatica e allo stesso tempo elegante. La procedura è semplice: aggiungi il plugin alla pagina, inizializzarlo ed eseguire l'animazione.
41. Animatic.js
Animatic.js è una grande soluzione cross-browser con regole fisiche integrate che impiega trasformazioni CSS, trasformazioni 3D e JavaScript per dare vita a tutto. Il suo compito principale è quello di diminuire i tuoi sforzi per l'animazione di numerosi oggetti contemporaneamente. È possibile creare animazioni sia parallele che sequenziali regolando attentamente la durata, il ritardo e la funzione di andamento.
42. Move.js
Move.js è uno strumento semplicistico per creare animazioni regolari come ridimensionamento, inclinazione, spostamento o traduzione. Ogni animazione può essere migliorata con la classica funzione di facilità.
43. Eg.js
Eg.js è una raccolta accuratamente assemblata di vari effetti ed elementi dinamici che mirano a migliorare le interazioni nelle interfacce. Ci sono 8 potenti componenti che risolvono compiti di base e 6 metodi e eventi principali per altri scopi.
44. GFX
GFX è una libreria di animazione 3D convincente per la creazione di animazioni CSS3 in modo programmatico. Funziona con jQuery rendendo molto più facile la produzione del risultato desiderato. Puoi giocare con ridimensionamento, rotazione, traslazione, inclinazione e altre cose.
45. Stylie
Anche se è detto stylie è uno strumento di divertimento, ma sicuramente ti impressionerà con le sue capacità. Il centro di controllo dispone di 4 schede che consentono di ottimizzare i fotogrammi chiave, l'andamento, le opzioni di esportazione e l'HTML, rendendo le animazioni complesse facili da riprendere.
46. Iconate.js
Iconate.js inietta la vita nelle trasformazioni delle icone, migliorando la transizione tra due elementi con un piacevole effetto di accompagnamento. Funziona benissimo non solo con Font Awesome, ma anche con Glyphicons e persino con il tuo set personalizzato di pittogrammi.
47. AnimateMate
AnimateMate è un piccolo strumento per produrre ed esportare animazioni su piccola scala dall'ambiente di Sketch. Non è qualcosa di sofisticato, ma ti permette di giocare con i fotogrammi chiave, aggiungere funzioni di andamento, sequenze di controllo e altro ancora.
48. CAAT
CAAT (che sta per Canvas Advanced Animation Toolkit) è un framework sterling che forma un potente tandem con JavaScript. Il suo set di strumenti presenta scene, tecnologie di rendering multi, maschere di ritaglio, pacchetti di comportamenti standard, ecc.
49. Granim.js
Granim.js è una piccola libreria JavaScript per ravvivare le interfacce con centrotavola interattivi basati sul gradiente. Può essere un'animazione con sfumatura radiale standard, gradienti dinamici applicati sopra lo sfondo dell'immagine o gradienti in movimento combinati con maschere di immagini.
50. Animista
Creato da Ana Travas, Animista è un campo di gioco per eseguire esperimenti con un gruppo di animazioni CSS predefinite convenzionali e non comuni. Scegli durata, funzione di temporizzazione, ritardo, conteggio dell'iterazione e alcune altre opzioni per esaminare il risultato.
51. Obnoxious.css
Obnoxious.css viene fornito con 5 animazioni uniche basate su CSS che costringono gli elementi dell'interfaccia a scuotere, ruotare, ingrandire, imitare l'effetto strobo o modificare il peso del carattere tipografico. Tutto quello che devi fare è applicare la classe preferita al div desiderato.
52. Animatelo
Animatelo include un sacco di effetti dinamici accattivanti che sono stati presi in prestito dal famoso e potente Animate.css, fornendo un modo più semplice per applicarli. Grazie al polyfill dell'API Web Animations è supportato da tutti i browser moderni.
53. Foxholder
Foxholder è un pacchetto di 15 effetti minuscoli che sono stati creati appositamente per migliorare le interazioni dell'utente con il modulo. Ogni metodo sottolinea il campo di input a modo suo: può rendere più luminoso il bordo, aggiungere indizi visivi, mettere in movimento il testo e molto altro.
54. Rhythm.js
Rhythm.js si tratta di piccole animazioni giocose ispirate alla discoteca. Questa libreria JavaScript comprende effetti che imitano alcuni tipi di mosse di danza. Ci sono quasi 20 opzioni che aggiungeranno boogie-woogie al tuo sito web.
55. Colorido.js
Molto simile a Granim.js, questo plugin basato su JavaScript è stato creato per manipolare la proprietà del colore. Aiuta a cambiare dinamicamente tonalità e opacità dello sfondo e del testo, nonché a creare gradienti radiali, lineari, diagonali e orizzontali non statici.
56. Barba.js
Barba.js sfrutta PJAX (una tecnica basata su ajax) per alleviare gli utenti dal cosiddetto hard refresh switching tra le pagine. Nasconde semplicemente il vecchio contenitore e mostra il nuovo contenitore in modo sottile e piacevole.
57. ScrollReveal.js
ScrollReveal.js è uno strumento popolare per la creazione di animazioni di scorrimento. Con il suo metodo di rivelazione principale () puoi gestire diverse animazioni e controllare tutti i loro aspetti standard. Il bello è che funziona bene con i browser Web e mobili.
58. Scrollanim
Scrollanim è uno strumento meno sofisticato ma più maneggevole e più semplice da utilizzare piuttosto che l'esempio precedente. Anche se favorisce i CSS3 ma ti permette di aggiungere animazioni usando l'API JavaScript per produrre animazioni scroll-triggered. Ha una serie di soluzioni predefinite che puoi introdurre rapidamente nel tuo progetto.
59. ScrollTrigger
Mentre le due soluzioni precedenti si concentrano principalmente sullo scrolling verticale tradizionale, questo è per la costruzione di lunghi siti web orizzontali. Ti permette di costruire interfacce dinamiche nel piano dell'asse x popolato da bellissime animazioni CSS3 usando una sintassi piuttosto primitiva.
60. Force.js
Force.js è una piccola soluzione che è priva di enormi funzionalità e ricchezza di opzioni. Tuttavia, è ideale per attività regolari come l'impostazione di oggetti in movimento sottile o lo scorrimento prettifying. Come al solito, l'alleggerimento sta nel suo nucleo, rendendo l'animazione pulita e ordinata.
61. AOS
AOS sta per animare su scroll. Fa quello che dice - ti fornisce un sacco di effetti predefiniti vivaci che vengono attivati da un evento a scorrimento. Se vuoi dare alle sezioni un'entrata drammatica senza scavare profondamente nel codice, allora è sicuramente per te.
62. Rellax
Rellax è per una bella parallasse. È una libreria JavaScript leggera e leggera per dare un tocco sottile di dimensione 3D alle interfacce.
63. Tilt.js
Tilt.js produce intriganti effetti di inclinazione basati sulla parallasse. Sposterà gli oggetti in una posizione inclinata che imita il 3D in un piano 2D di base. È possibile correggere un asse rendendo l'effetto più attraente e interessante, oppure ricreare una sorta di abbagliamento o sensazione fluttuante.
64. Trasformare-quando
Transform-quando è un'ottima soluzione per la progettazione di esperienze di narrazione con un supporto nativo ad alte prestazioni e dispositivi mobili. Punta su due parametri vitali: tempo e posizione di scorrimento rendendo così l'avventura dell'utente attraverso l'interfaccia controllata vigorosamente dalla tua parte. Funziona sia con SVG che con elementi HTML normali.
65. Animazione CSS3
Questo è un generatore di vecchia scuola con un'anteprima live per la creazione di animazioni CSS3 di base. Esiste un centro di controllo standard in cui è possibile regolare la durata della transizione, il numero di iterazioni, le funzioni di temporizzazione, ecc. La routine è semplice: impostare tutto, copiare i codici HTML e CSS risultanti e incollarli nel progetto.
66. Curve.js
Curve.js respira la vita in linee facendole "ballare" e girare come un'onda. Usalo per creare sfondi o centrotavola di ispirazione geometrica astratta.
67. Animator.js
Animator.js si dice che sia flessibile, efficiente e leggero. Offre il modo più semplice per gestire i fotogrammi chiave e generare animazioni CSS di varie scale. È anche privo di dipendenza.
68. Cel-animazione
Cel-animation è un mixin di Sass che ti dà il controllo sui tradizionali keyframes. Puoi mettere in movimento SVG o qualsiasi tipo di elementi HTML.
69. Scrollissimo
Scrollismo è stato creato per lavorare in collaborazione con Greensock animando abilmente e senza intoppi gli oggetti sullo scroll dell'utente. Con un ulteriore plug-in di accompagnamento JavaScript per i gadget touch screen copre numerosi dispositivi.
70. jqClouds
jqClouds è un plugin primitivo che genera e popola un design con nuvole in movimento che si espandono nell'interfaccia. Puoi cambiare il concetto, sostituendo le nuvole con qualsiasi altro oggetto, per dare a un'interfaccia statica un particolare sapore dinamico.
71. Animazione a colori
Come hai intuito, questo strumento è per animare il tono e la trasparenza di sfondo, bordo o testo. In realtà, funziona con il colore di qualsiasi oggetto che lo ha come proprietà.
72. Flubber
Per escludere salti improvvisi e metamorfosi drastiche che possono verificarsi quando un oggetto si converte in un altro, è possibile utilizzarlo Flubber . Il plugin offre interpolazioni uniformi tra le due forme. L'unico inconveniente è che funziona solo con la grafica 2D.
73. Particles.js
Se ti piace l'animazione delle particelle giocose, una scelta popolare al giorno d'oggi, puoi usarla questo generatore a portata di mano . È basato su una libreria JavaScript valida che fa tutto il lavoro. Imposta le preferenze come colore, numero, forma, dimensione, opacità ecc. E semplicemente esporta il risultato.
74. Animazione di linee 3D con Three.js
Questo è un piccolo script che non possiede tutte le funzionalità dei plugin sopra menzionati. Tuttavia, aggiunge alla tua interfaccia un bellissimo sfondo animato pieno di animazione delle particelle. Puoi configurare colori, linee, opacità e alcune altre opzioni per far sì che si integrino nel tuo ambiente.
75. Three.js
Ultimo, ma non per importanza, Three.js - una libreria potente e versatile che si trova dietro numerosi siti Web impressionanti. È adatto sia per progetti semplici che complessi. Ti permette di lavorare con
