Slide animata con css3 animation: guida alla realizzazione

Slide Css3: codice Html

La slide animata sarà realizzata con solo css3 e ovviamente html, non  vi è una sola riga di javascript. Il codice html è molto semplice, la magia avviene con i CSS grazie ad animation e target.

Partiamo con l’inserire un div con un id che ci servirà poi per poterlo richiamare, e inseriamo al suo interno le 4 immagini:

<div id="sfondoanimato">

          <img src="img/1.jpg" />

          <img src="img/2.jpg" />

          <img src="img/3.jpg"/>

          <img src="img/4.jpg"/>

</div>

A questo punto passiamo al css:

#sfondoanimato img {

    position:fixed;

    bottom:0;

    right:0;

    min-width:100%;

    min-height:100%

}

La posizione di tutte le immagini deve essere la stessa quindi ho usato position fixed (in questo caso avrebbe avuto lo stesso effetto anche absolute) visto che l’immagine deve occupare per forza tutto lo schermo in tutti i casi ho messo min-width e min-height al 100%. Poi ho scelto di impostare l’inizio dell’immagine da destra e dal basso, questo mi permette di avere la foto che avanza fuori dallo schermo senza dover ricorre a overflow:hidden.

Fatto questo abbiamo ottenuto le immagini una sopra l’altra e si vede solamente la quarta.

La magia delle animazioni Css3

Ora inizia il bello partiamo con l’animazione. Alla fine del file .css poniamo la nostra animazione, che potete modificare e complicare quanto volete:

@keyframes animazione{
    0%{
        opacity:1;
    }
    24%{
        opacity:0;
    }
    90%{ 
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

Chiaramente dobbiamo richiamare l’animazione appena creata:

#sfondoanimato img:nth-child(4){
    animation:animazione 24s normal infinite;
}
#sfondoanimato img:nth-child(3){
    animation:animazione 24s normal 6s infinite;
}
#sfondoanimato img:nth-child(2){
    animation:animazione 24s normal 12s infinite;
}
#sfondoanimato img:nth-child(1){
    animation:animazione 24s normal 18s infinite;
}

Selezioniamo le varie immagini e facciamo partire la stessa animazione ma in momenti diversi, in modo da creare l’effetto transizione. L’animazione di ogni immagine si sviluppa nel primo 24% del tempo perchè il resto del tempo l’immagine deve rimanere invisibile per permettere di vedere l’immagine sotto.

Completiamo la slide animata

Ora rimangono due problemi:

1. Mettere un contenitore dove poter mettere i nostri contenuti proprio sopra l’animazione
2. Creare un bottone che ci consenta di stoppare l’animazione (per l’esattezza sono due, ma lo vedremo tra poco)

Per prima cosa sotto al primo div dobbiamo aggiungere il div contenitore:

<div id="container">
    <h1>Slide realizzata con css3 animation</h1>
    <a id="pausa" href="#sfondoanimato">Pausa</a>
    <a id="play" href="#">Play</a>
</div>

Ora è arrivata l’ora di usare la pseudoclasse :target, serve per far bloccare e ripartire l’animazione. Ci servono per questo due bottoni, play e pausa. Passiamo al css:

#container{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Per prima cosa mettiamo il contenitore sopra a tutto, e lo facciamo dandogli posizione absolute e dandogli una larghezza e un’altezza del 100%, in modo che occupi tutto lo schermo. Poi iniziamo a lavorare su play e pausa:

#container a{
    position:absolute;
    bottom:20%;
    font-size:2em;
    padding: 20px;
    color: black;
    box-shadow: 2px 2px 50px;
    border-radius: 20px;
    text-shadow: 2px 2px 2px white;
    background-color: rgba(250, 250, 180, 0.30);
} 
#play{ 
    display:none;
} 
#sfondoanimato:target img{ 
    animation-play-state:paused;
} 
#sfondoanimato:target ~#container #play{
    display:block;
}
#sfondoanimato:target ~#container #pausa{
    display:none;
}

Allora ci siamo finalmente, questo è l’ultimo codice da spiegare. Ho dato ai due link all’interno una posizione assoluta e un’estetica da bottone con il primo selettore. Con il secondo nascondo il play che altrimenti comparirebbe proprio sopra alla pausa.

A questo punto il target, quando andremo a cliccare sul tasto pausa automaticamente diventerà attivo il target di #sfondoanimato e quindi dobbiamo mettere in pausa l’animazione su tutte le immagini

Bene siamo riusciti a bloccare l’animazione ma rimaniamo bloccati visto che abbiamo solo il tasto “pausa” ora allora dobbiamo nascondere il bottone pausa e far apparire “play”, che ha un link vuoto, il cui unico scopo è quello di togliere il target da #sfondoanimato in modo da far ripartire l’animazione.

Per questo andiamo a cercare il fratello di #sfondoanimato che è il nostro contenitore #conteiner al cui interno c’è #play e gli diciamo di mostrarlo trasformandolo in block, facciamo il contrario con la pausa.

Ecco qui un esempio dell’animazione css3

di Massimiliano Salerno