Come creare un effetto di animazione dissoluto con JavaScript e CSS

Le animazioni, le transizioni ed effetti 3D non sono altro che un occhio-catcher. Ogni volta che costruisci il tuo sito Web o un progetto, non vuoi che si perda nel cluster di milioni di siti Web disponibili su Internet. Vuoi che si distingua, vuoi che divertirà i suoi utenti e sia archiviato nelle loro menti subconsce. Per rendere le tue pagine web più intriganti, devi utilizzare varie animazioni ed effetti di transizione di pagina.

Uno degli effetti di animazione popolari ed estremamente interessanti è il Dissolvenza E Dissolvenza Animazione, che può essere implementata utilizzando JavaScript e HTML \ CSS.

Passaggio 1: impostare la pagina di base

Crea un nuovo HTML sul tuo editor di codice preferito, crea uno script.file js e uno stile.File CSS così come mostrato:

All'interno del file HTML, collegare il file CSS e lo script.File JS utilizzando le seguenti righe prima del tag del corpo:

Ora, implementeremo un'animazione di dissolvenza su un'immagine e, per l'immagine, useremo un'immagine senza royalty da Unsplash. Puoi creare un tag immagine e un pulsante che useremo per svanire e sbiadire l'immagine con le seguenti righe:

id = "immagine" src = "https: // immagini.non esplodente.com/photo-1640273837947-EA830d50c191?Ixlib = RB-1.2.1
alt = ""
/>


Effetto dissolvenza

Si noti che abbiamo dato l'ID "Immagine" all'immagine e all'ID di "MyButton" al pulsante che stiamo creando.

Poiché l'immagine è abbastanza grande, imposteremo un'altezza e una larghezza particolari nel file CSS usando le seguenti righe:

#Immagine
Altezza: 200px;
larghezza: 200px;

La tua pagina dovrebbe assomigliare a questa:

Abbiamo la nostra immagine al centro dello schermo e a destra sotto l'immagine abbiamo il nostro pulsante.

Passaggio 2: modifica del file CSS

Esistono molti modi per implementare una particolare animazione usando CSS e JavaScript, ma per questo particolare post giocheremo con le classi e l'attributo opacità del CSS. Modifica il tuo file CSS con le seguenti righe:

#Immagine
opacità: 1;
transizione: opacità 0.3s facilità in out;
Altezza: 200px;
larghezza: 200px;

#Immagine.dissolvenza
opacità: 0;

Per spiegare cosa stiamo facendo nelle righe sopra: stiamo semplicemente mettendo l'opacità dell'immagine 100% All'inizio e se l'immagine ha una classe attiva "dissolvenza" allora l'opacità cambierà in 0%. Ma questa modifica dell'opacità avverrà in un caso, per fare un effetto simile all'animazione utilizziamo l'attributo di transizione e lo impostiamo 0.3s.

Ora, tutto ciò che dobbiamo fare è scrivere uno script che alterne la classe "Dissolvenza" dall'immagine

PASSAGGIO 3: alternare la classe con JavaScript

Nella sceneggiatura.File JS, prima prenderemo l'elemento immagine e lo memorizzeremo all'interno di una variabile, e quindi attireremo la classe, ma tutto ciò dovrebbe essere fatto al momento della stampa del pulsante. Quindi, aggiungi le seguenti righe nel file di script:

Let Image = Document.getElementById ("immagine");
documento.getElementById ("MyButton").onClick = function ()
Immagine.classlist.toggle ("dissolvenza");
;

Quindi, con questo dovremmo essere in grado di implementare anche la transizione di animazione Fade-in e Fade-Out.

Passaggio 4: testare la nostra animazione

L'ultimo passo è eseguire il file HTML sulla nostra macchina locale e testare l'animazione al momento della pressione del pulsante, è necessario vedere la seguente uscita:

Come puoi vedere nella gif sopra che la nostra animazione funziona perfettamente.

Conclusione

Le animazioni possono essere facilmente implementate con l'uso di JavaScript insieme a HTML e CSS per rendere le pagine Web molto più attraenti e accattivanti. In questo post, abbiamo imparato a creare un'animazione di dissolvenza e dissolvenza su un elemento HTML assegnando diverse proprietà CSS sulla classe dell'elemento e quindi attivando le classi usando JavaScript.