Scorri e anima la tua pagina facilmente con Force.js

L'animazione Web è più facile che mai, con le animazioni CSS3 che diventano la norma. Ma JavaScript è ancora incredibilmente prezioso ed è uno dei pochi linguaggi affidabili per le animazioni tecniche.

La libreria Force.js è uno script open source gratuito costruito attorno a animazioni di pagine dinamiche .

Puoi creare animazioni di scorrimento a scorrimento all'interno della pagina stessa oppure puoi animare gli elementi intorno alla pagina . Entrambi sono ugualmente semplici da configurare e la libreria ha un sacco di funzioni.

Per impostazione predefinita, Force.js si affida alle transizioni CSS quando possibile. Funzionano in tutti i browser moderni e il codice è molto più semplice, in più offre un supporto più ampio agli utenti che non autorizzano JavaScript .

La libreria utilizza un metodo di fallback naturale con codice JavaScript, quindi è sicuro anche per i browser più vecchi.

E, Force.js è una libreria vanilla, quindi non richiede alcuna dipendenza come jQuery. Ma se ami jQuery puoi eseguire la sintassi su Force e funzionerà ancora bene. Ottimo per la versatilità con diversi siti web.

Le due grandi tecniche di animazione sono salti e mosse . Determinate dove si muove l'elemento, quanto velocemente si muove e su quali tipi di metodi di andamento.

La libreria ha anche un sacco di opzioni personalizzate che puoi modificare per un controllo ancora maggiore sulle animazioni. Puoi modificare i target del link di ancoraggio e impostare le operazioni di easing che ti serviranno -anche se vuoi delle andature differenti sulla stessa pagina!

Tutta la documentazione è disponibile su GitHub, insieme ai file.

Oppure, se preferisci npm / Bower puoi estrarre i file direttamente in questo modo. Devi solo includere il file force.js nell'intestazione e sarai force.js per partire.

Raccomando anche di sfogliare la documentazione perché è piena di esempi per i metodi jump() e move() .

Entrambi prendono argomenti per tempo, facilità e posizione, quindi è fondamentale capire come funzionano. Anche se, una volta capito, non guarderai mai indietro perché è la libreria di animazione leggera e perfetta per qualsiasi progetto.