Effetto slidein, slideup, fadein e fadeout in puro CSS

(martedì 10 maggio)

Gli sviluppatori Web sono abituati ad utilizzare jQuery od altri framework non solo per eseguire complesse operazioni, ma anche cose semplici, riproducibili anche col semplice Javascript o, come nel caso dell’argomento in oggetto a questo tutorial solo coi CSS.

Andiamo infatti a spiegare in modo approfondito e dettagliato come ottenere gli effettislideup e slidedown (comparsa e scomparsa di un elemento con effetto slide), fadein efadeout (comparsa e scomparsa di un elemento con effetto fade) solo coi CSS, utilizzando un pizzico di Javascript per mostrare gli effetti che, tuttavia, sono generati attraverso un sistema basato puramente sui CSS3.

Naturalmente gli effetti in questione funzionano solo coi browser che supportano i CSS3, mentre browser obsoleti, che non supportano la versione 3 dei fogli di stile, visualizzeranno gestiranno l’effetto con la semplice comparsa e scomparsa dell’elemento, senza “effetti speciali”.

 

Effetto slide solo coi CSS

Iniziamo con l’effetto slide guardando il codice completo dell’esempio, in attesa di commentarlo:

<!DOCTYPE html>
<html lang="it">
    <head>
        <title>Effetto slideup e slidedown solo coi CSS</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
        <style type="text/css">
        body { background: #FFF; margin: 50px; }
        div, button { color: #000; font: normal 12px tahoma, arial; margin: 0 0 10px 0; }
        .slideup, .slidedown {
            overflow: hidden;
            height: 0;
            transition: height 0.5s;
        }
        .slidedown {
            height: 30px;
        }
        </style>
        
        function slide() {
            var e = document.getElementById("elemento");
            e.className == "slideup" ? e.className = "slidedown" : e.className = "slideup";
        }
        
    </head>
<body>

<button onclick="slide()">Mostra / Nascondi</button>

Contenuto del box...
</body> </html>

Iniziamo dal corpo della pagina in cui troviamo un bottone che attiverà l’effetto slide richiamando una funzione Javascript, quindi il box su cui agiremo. Al bottone è associata lafunzione slide(), mentre il box ha un ID per essere identificato e, in partenza, viene contrassegnato con la classe di stile slideup.

Passiamo al codice CSS, gestito nell’header della pagina. Diamo innanzitutto un minimo di stile al corpo della pagina, quindi all’elemento “div” ed al “button”, ma la porzione di codice che ci interessa è rappresentata dalle classi slideup e slidedown di cui riporto lo stralcio di codice:

.slideup, .slidedown {
    overflow: hidden;
    height: 0;
    transition: height 0.5s;
}
.slidedown {
    height: 30px;
}

Le due classi hanno lo stesso stile, ovvero l’overflow nascosto, altezza zero ed un effetto di transizione di mezzo secondo sull’altezza. Solo la classe slidedown (che farà comparire l’elemento con “effetto scorrimento”) ha l’altezza impostata ad un valore che toccherà allo sviluppatore definire, caso per caso.

La funzione Javascript, invece, si limita ad identificare l’elemento con coi interagire, a verificare la presenza della classe slideup, quindi assegnarle la classe slidedown, quindi a tornare all’effetto slideup se premuto di nuovo. Una sorta di effetto toggle che gli amanti di jQuery, concettualmente, già conoscono.

 

Effetto fade solo coi CSS

Passiamo all’effetto fade attraverso un esempio molto, molto simile al precedente, se non per i nomi delle classi e della funzione Javascript che, per coerenza, sono stati adeguati alla funzionalità che andiamo ad offrire.

Segue il codice completo:

<!DOCTYPE html>
<html lang="it">
    <head>
        <title>Effetto fadein e fadeout solo coi CSS</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
        <style type="text/css">
        body { background: #FFF; margin: 50px; }
        div, button { color: #000; font: normal 12px tahoma, arial; margin: 0 0 10px 0; }
        .fadein, .fadeout {
            opacity: 0;
            transition: opacity 1s;
        }
        .fadein {
            opacity: 1;
        }
        </style>
        
        function fade() {
            var e = document.getElementById("elemento");
            e.className == "fadeout" ? e.className = "fadein" : e.className = "fadeout";
        }
        
    </head>
<body>

<button onclick="fade()">Mostra / Nascondi</button>

Contenuto del box...
</body> </html>

Approfondiamo il codice spiegandolo. Il corpo della pagina è praticamente identico a quello dell’esempio precedente, se non per il fatto che facciamo riferimento alla funzione Javascriptfade() ed alla classe fadeout, opportunamente rinominate, come spiegato in precedenza. Passando al codice CSS, vediamo che abbiamo applicato la stesa stilizzazione per il “body”, per gli elementi “div” e “button”, mentre la porzione di codice che ci interessa è la seguente:

.fadein, .fadeout {
    opacity: 0;
    transition: opacity 1s;
}
.fadein {
    opacity: 1;
}

Sia le classi fadein che fadeout hanno lo stesso stile, ovvero opacità zero ed un effetto di transizione che vi agisce, con un timeout d’azione di un secondo. La classe fadein porta l’opacità ad “1”, rendendo l’elemento visibile al 100% della sua (non) trasparenza.

 

Effetti slide e fade solo coi CSS in un’unica soluzione

Ottimizziamo le risorse e vediamo come gestire entrambi gli effetti in oggetto a questo tutorial in un’unica soluzione, guardando il seguente codice:

<!DOCTYPE html>
<html>
    <head>
        <title>Effetti slide e fade solo coi CSS</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
        <style type="text/css">
        body { background: #FFF; margin: 50px; }
        div, button { color: #000; font: normal 12px tahoma, arial; margin: 0 0 10px 0; }
        .slideup, .slidedown {
            overflow: hidden;
            height: 0;
            transition: height 0.5s;
        }
        .slidedown {
            height: 30px;
        }
        .fadein, .fadeout {
            opacity: 0;
            transition: opacity 1s;
        }
        .fadein {
            opacity: 1;
        }
        </style>
        
        function effetto(id, quale) {
            var e = document.getElementById(id);
            switch (quale) {
                case "slide" :
                    e.className == "slideup" ? e.className = "slidedown" : e.className = "slideup";
                break;
                case "fade" :
                    e.className == "fadeout" ? e.className = "fadein" : e.className = "fadeout";
                break;
            }
        }
        
    </head>
<body>

<button onclick="effetto('elemento', 'slide')">Mostra / Nascondi</button>

Contenuto del box...
</body> </html>

Questa volta partiamo dall’alto, guardando il codice CSS che presenta entrambe le coppie di classi per la gestione dei due effetti, mettendole subito a disposizione a seconda di quale effetto speciale si desideri utilizzare.

Più complesso, invece, il codice Javascript, rappresentato dalla funzione effetto() al quale passiamo due parametri: l’ID dell’elemento (per fare in modo che si possa applicare a qualsiasi box della pagina e non ad uno solo) ed il nome dell’effetto, ossia slide oppure fade.

 

(tratto da www.mrwebmaster.it)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *