Share
Molte persone desiderano aggiungere animazioni sottili al proprio sito Web in risposta a clic o ad altre azioni da parte dei propri visitatori. Tuttavia, non tutti sono esperti nell'uso di CSS o JavaScript. Alcuni sanno solo come modificare l'HTML e far riflettere il cambiamento sul sito web.
In genere, questa è la parte in cui gli sviluppatori prendono il controllo e aggiungono JavaScript e CSS necessari per far risaltare il tuo sito. Tuttavia, se vuoi essere in grado di creare un sito animato da solo, senza codifica, una libreria chiamata AniJS sarebbe di grande aiuto.
AniJS ti consente di creare uno stile animato per il tuo sito web senza codice JavaScript o CSS! Puoi specificare tutte le tue animazioni con HTML usando un semplice Se-Sopra-Fare-A sintassi.
Prima di poter iniziare ad animare gli elementi sulla tua pagina web usando data-anijs attributi, dovrai includere i file necessari. Sono necessari tre file diversi per accedere a tutte le funzionalità di AniJS. Questi file sono la libreria JS principale, il file CSS per le animazioni e un altro file JavaScript di supporto per l'utilizzo della sintassi AniJS speciale come $ addClass, $ toggleClass, e $ removeClass.
Puoi anche installare la libreria usando Bower eseguendo il seguente comando:
bower install anijs --save
Una volta inclusi tutti i file necessari, gli elementi della pagina Web saranno pronti per l'animazione.
Nella sua forma di base, AniJS utilizza la seguente sintassi per animare elementi particolari in base a qualsiasi evento.
Se (qualsiasi evento accade), On (qualsiasi elemento), Do (qualcosa come animato, aggiungi / rimuovi classe), A (questo o qualsiasi altro elemento)
Qui, il Se parte specifica l'evento che attiverà l'animazione o la manipolazione della classe. Il Sopra parte specifica l'elemento di cui AniJS deve ascoltare gli eventi. Questo può essere diverso dall'elemento su cui hai impostato il data-anijs attributo. Il Fare parte specifica l'azione da intraprendere. Qui puoi specificare il nome dell'animazione che vuoi applicare, ecc. Infine, il A parte è usata per specificare l'elemento che deve essere animato o manipolato.
Il Se parte è necessaria per l'istruzione AniJS che aggiungi per animare qualsiasi elemento. Il Sopra parte è facoltativa e, se non specificata, usa l'elemento corrente come valore predefinito. Il Fare parte è anche necessaria in quanto indica al browser cosa fare quando si verifica l'evento specificato. Il A parte è anche facoltativa e assume come valore predefinito l'elemento corrente quando non specificato.
Puoi anche usare il Prima e Dopo ganci per specificare cosa dovrebbe accadere prima e dopo AniJS fa la cosa menzionata all'interno Fare parte.
AniJS consente di eseguire un'animazione attivandola su qualsiasi evento applicabile elencato nella pagina MDN. Allo stesso modo, puoi usare sopra e a per scegliere come target qualsiasi elemento desiderato usando selettori CSS. Ad esempio, è possibile specificare di voler ascoltare un evento div.promotion o sezione div p.first, ecc fare parte può essere utilizzata per specificare l'animazione che si desidera applicare a elementi diversi. AniJS ha un sacco di animazioni che possono essere applicate a qualsiasi elemento tu voglia.
Il seguente frammento HTML ti mostrerà come applicare alcune animazioni sugli elementi che verranno attivati su determinati eventi.
In ogni caso, tutto ciò che devi fare è scrivere le dichiarazioni all'interno di data-anijs attributo, e la biblioteca si prenderà cura di tutto il resto. (Abbiamo saltato il a parte in tutte queste animazioni quindi l'animazione è applicata all'elemento all'interno del quale abbiamo specificato il data-anijs attributo.)
Le ultime quattro caselle hanno valori diversi per il sopra parte. Questo, ad esempio, significa che l'animazione sulla scatola verde avverrà solo quando il mouse si sposta sulla scatola marrone. Allo stesso modo, l'animazione di rimbalzo sulla casella gialla inizierà a essere riprodotta ogni volta che un utente fa doppio clic in qualsiasi punto all'interno del corpo.
Puoi provare queste animazioni da solo nella demo di CodePen integrata.
AniJS ti consente di fare molto di più che semplicemente animare diversi elementi. Ad esempio, puoi usarlo per aggiungere, rimuovere o attivare le classi applicate a diversi elementi. Allo stesso modo, puoi anche rimuovere elementi HTML o clonarli senza aggiungere una singola riga di JavaScript. La libreria consente inoltre di attraversare il DOM utilizzando parole chiave riservate speciali.
Iniziamo con la manipolazione della classe. AniJS ha tre parole chiave riservate per manipolare le classi. Questi sono $ addClass, $ removeClass, e $ toggleClass. Come suggerisce il nome, puoi usarli per aggiungere, rimuovere e attivare rispettivamente una o più classi di un elemento. Tutto quello che devi fare è specificare i nomi delle classi dopo le parole chiave riservate.
Allo stesso modo, è possibile utilizzare parole chiave riservate come $ genitore, $ antenati, $ più vicino, $ find, e $ bambini attraversare il DOM.
Puoi utilizzare questi due gruppi di parole chiave riservate insieme per fare qualcosa come aggiungere una certa classe a tutti i figli di un elemento dopo che un visitatore fa doppio clic su quel particolare elemento.
Tuttavia, in alcuni casi, i bambini a cui ti riferisci possono essere ambigui. Ad esempio, potresti aver applicato il data-anijs attributo a un elemento ma imposta il valore del Sopra parte a qualcos'altro usando i selettori CSS. In questa situazione, AniJS non ha modo di sapere se la classe deve essere aggiunta ai figli dell'elemento indicato dal selettore CSS o l'elemento a cui è stata applicata la data-anijs attributo.
In questi casi, puoi rimuovere l'ambiguità usando un'altra parola chiave riservata chiamatabersaglio. Qui, bersaglio si riferisce all'elemento indicato dal selettore CSS.
Considera i seguenti tre esempi in cui AniJS è stato utilizzato per alternare le classi di diversi elementi:
Nell'esempio sopra, ho riformattato l'HTML per rendere più facile leggere e vedere cosa sta succedendo.
Iniziamo con il primo div. In questo caso, abbiamo omesso entrambi sopra e a parti del data-anijs valore dell'attributo. Pertanto, entrambi hanno come impostazione predefinita la corrente div si. Se provi a fare clic su questo particolare div, alternerà il arancia classe, che a sua volta cambia la casella in arancione.
Nel caso del secondo div, stiamo dicendo a AniJS di cambiare la classe chiamata rosso per tutti gli elementi che sono figli di quel particolare div. Questo farà ruotare tutti i bambini campata elementi e cambiano il loro colore in rosso, mentre impostano il raggio-bordo a zero.
Abbiamo fornito due diverse dichiarazioni all'interno del data-anijs attributo del terzo div. Entrambe queste affermazioni cambiano la stessa cosa giallo classe. Tuttavia, gli effetti sono completamente diversi a causa dell'uso di bersaglio parola chiave.
Nel primo caso, abbiamo aggiunto il bersaglio parola chiave dopo il $ genitore parola chiave. Questo dice ad AniJS che vogliamo commutare la classe per il genitore degli elementi indicati da conchiglie classe. Nel secondo caso, abbiamo saltato il bersaglio parola chiave, quindi AniJS cambia lo sfondo del genitore della corrente div. Dal momento che il genitore del div è il corpo stesso, l'intera pagina diventa gialla.
Puoi provare a fare clic su diversi elementi e vedere come influiscono sulla pagina nella demo di CodePen incorporata.
Un'altra cosa che vale la pena di notare è che anche se il data-anijs l'attributo per la terza casella ha due istruzioni, facendo clic sulla casella stessa non ha alcun effetto. Questo perché abbiamo incaricato AniJS di ascoltare gli eventi click su campata elementi con classe conchiglie in entrambi i casi.
Un altro modo per manipolare gli elementi HTML in una pagina Web utilizzando AniJS consiste nel clonarli o rimuoverli. La biblioteca ha riservato le parole chiave $ remove e $ clone che dirà se si desidera rimuovere un elemento o clonarlo.
È possibile passare più selettori a $ remove per rimuovere più elementi dalla pagina web. Tieni presente che i diversi selettori CSS devono essere separati con la pipe | personaggio.
Il $ clone la parola chiave accetta anche due parametri. Il primo è il selettore CSS per specificare l'elemento che vuoi clonare. Il secondo è un numero per specificare quante copie si desidera creare. Per esempio, $ clone .shells | 10 realizzerà 10 copie degli elementi con classe conchiglie e aggiungili come figli dell'elemento su cui il data-anijs l'attributo è stato specificato. Se le copie devono essere aggiunte a un elemento diverso, puoi puntare AniJS specificando il selettore CSS appropriato dopo a nella dichiarazione di AniJS.
Lo scopo di questo tutorial era di aiutarti a iniziare con AniJS il più rapidamente possibile. Come avrai notato, la libreria è molto facile da usare. Tutto quello che devi fare è specificare i giusti valori degli attributi e AniJS si prenderà cura di tutto il resto come cambiare le classi, manipolare il DOM e animare qualsiasi cambiamento.
La libreria offre molte altre funzionalità che non abbiamo trattato in questo tutorial. Dovresti passare attraverso la documentazione ufficiale per saperne di più e utilizzarlo al massimo delle sue potenzialità.
Accentsconagua