Applicazione di effetti animati in CSS con Animate.css

Da **Niko** Dom 17 Gen 2021 - 1:12

Applicazione di effetti animati in CSS con Animate.css

Animate.css è un insieme di animazioni interessanti, divertenti e cross-browser da utilizzare nei tuoi progetti. Ottimo per enfasi, home page, cursori e suggestioni generali per l'aggiunta di acqua.

Modifica dei templates Forumattivo

In questo caso, utilizzeremo la modifica del modello, consentendo a questi divertenti effetti CSS di essere applicati da un file .CSS esterno al tuo forum. Puoi accedere al progetto su GitHub visitando: https://github.com/daneden/animate.css

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Templates ► overall_header e modifichiamo il templates. Andiamo quindi a cercare{CSS} e subito dopo inseriamo:

Codice:: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />

 Solamente l'account fondatore ha accesso ai templates!

Istruzioni per l'uso

Dopo aver incluso il link sopra, in ogni attributo "class", sarà necessario includere il nome " animated ". Per esempio:

Codice:: <div class="forabg animated NOME_EFFETTO">CONTENUTO</div>

Il "animato" deve seguire il nome dell'effetto desiderato. Per scegliere l'effetto è possibile accedere al progetto su GitHub oppure accedere alla pagina demo: https://daneden.github.io/animate.css/

Applicazione di effetti animati in CSS con Animate.css Demo_a10

Nell'esempio seguente, possiamo applicare l'effetto FadeIn al forum, e con questo, ogni volta che la pagina viene aggiornata, il CSS farà il lavoro di "fadein". Per iniziare, andiamo verso Pannello di amministrazione ► Visualizzazione ► Templates ► overall_header e modifichiamo il template. Cerchiamo:

Codice:: <body

e aggiungiamo l'attributo class:

Codice:: class='animated fadeIn'

Il risultato finale dovrà essere:

Codice:: <body class='animated fadeIn'>