Semplice slideshow con i css3

conoscenze necessarie: html, css

Richiesti: buona conoscenza dei css2

Tempo stimato: 20 minuti

UPDATE 16/10/2012

Grazie al commento prezioso di Alex mi sono accorto di aver dimenticato il codice css per far funzionare lo slideshow anche sul browser opera. Ricordate che potete visionare l’animazione solo dalla versione 12 del browser opera in poi in quanto vengono supportati i keyframe.

Salve a tutti!

Grazie ai css3 siamo in grado di realizzare animazioni senza dover ricorrere a javascript e questo porta molti vantaggi. Bisogna tener conto però che i css3 sono ancora nello stato “draft” ovvero “bozza” per il w3c e quindi possono cambiare nel tempo aggiungendo nuove funzionalità oppure cambiare quelle già esistenti. Inoltre la maggior parte delle proprietà dei css3 non sono interpretate dai vecchi browser e alcune non sono interpretate neanche dai browser moderni. Bisogna quindi fare molta attenzione al loro utilizzo.

Prima di arrivare al codice cercherò di illustrare le nozioni che bisogna avere per affrontare questo argomento. Vi ricordo che per seguire questo tutorial occorrono delle solide base sui css.

Transizioni css3

Le transizioni css3 ci permettono di applicare degli effetti che vanno ad agire sui cambiamenti applicati ai valori css. Per spiegarvi meglio pensate ad un link a cui abbiamo applicato un colore di sfondo ed un altro colore sulla pseudo classe :hover. Quando passiamo il mouse sopra l’elemento questo cambierà colore di sfondo ma in modo istantaneo. Grazie alle transizioni css3 potremo passare da un colore di sfondo all’altro con più moderazione. Al momento le transizioni css3 sono supportate da Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ e IE 10.

Vediamo assieme le varie proprietà e relativi valori delle transizioni:

  • transition-property: qui specifichiamo il nome della proprietà css a cui applicare la transizione. Di defaul è impostata a All, ovvero a tutte le proprietà.
  • transition-duration: specifichiamo la durata della transizione in secondi o millisecondi
  • transition-timing-function: definisce la velocità con la quale si passa da un gruppo di regole css ad un altro. Questo può assumere diversi valori:
    • linear: l’animazione ha la stessa velocità dall’inizio alla fine
    • ease: questa è l’opzione di default. All’inizio l’animazione parte lenta, poi si velocizza e poi verso la fine rallenta
    • ease-in: l’animazione parte lentamente
    • ease-out: l’animazione rallenta alla fine
    • ease-in-out: l’animazione rallenta all’inizio e alla fine.
    • cubic-bezier(n,n,n,n): questo valore permette di impostare un proprio andamento.
  • transition-delay: definisce quando la transizione deve partire.

Animazioni css3

Le animazioni css3 sono una delle novità più belle. Ci permettono infatti di eseguire delle animazioni senza l’ausilio di javascript. Il problema sta nel supporto in quanto solo firefox e i browser webkit come google chrome e safari supportano correttamente queste proprietà. Con il futuro internet explorer 10 potremo vedere le animazioni anche nel browser di casa Microsoft.

Ora diamo uno sguardo alle proprietà e ai relativi valori che possiamo utilizzare:

  • animation-name: permette di definire il nome per la @keyframes animation (vedremo più avanti di cosa si tratta).
  • animation-duration: definisce il tempo totale per un ciclo di animazione. Si possono utilizzare i secondi o i millisecondi
  • animation-timing-function: definisce la velocità con la quale si passa da un gruppo di regole css ad un altro. Questo può assumere diversi valori:
    • linear: l’animazione ha la stessa velocità dall’inizio alla fine
    • ease: questa è l’opzione di default. All’inizio l’animazione parte lenta, poi si velocizza e poi verso la fine rallenta
    • ease-in: l’animazione parte lentamente
    • ease-out: l’animazione rallenta alla fine
    • ease-in-out: l’animazione rallenta all’inizio e alla fine.
    • cubic-bezier(n,n,n,n): questo valore permette di impostare un proprio andamento.
  • animation-iteration-count: permette di specificare quante volte l’animazione deve essere eseguita
  • animation-delay: specifica quando l’animazione deve partire
  • animation-play-state: specifica quando un animazione deve continuare o mettersi in pausa
  • animation-fill-mode: specifica in che modo gli stili dei css vengono applicati all’inizio e alla fine dell’animazione. Può avere i seguenti valori:
    • none: gli effetti dell’animazione sono visibili solo durante la riproduzione effettiva l’animazione
    • forwards: il fotogramma finale dell’animazione continua ad applicarsi anche dopo la ripetizione finale dell’animazione completa
    • backwards: Il fotogramma iniziale dell’animazione viene utilizzato non appena lo stile dell’animazione viene applicato ad un elemento. Questo riguarda solo le animazioni che hanno un valore diverso da zero per animation-delay
    • both: Il fotogramma iniziale dell’animazione viene utilizzato non appena lo stile dell’animazione viene applicato ad un elemento e il fotogramma finale dell’animazione continua ad applicarsi anche dopo la ripetizione finale dell’animazione completa. Questo riguarda solo le animazioni che hanno un valore diverso da zero per animation-delay

Fotogrammi chiave

Per chi proviene da flash o da programmi di animazione questo punto è piuttosto familiare. Praticamente definiscono cosa succede in un preciso istante durante un’animazione. L’esempio più banale è pensare all’inizio e alla fine dell’animazione. Questi due punti specificano infatti delle azioni precise.

Bene.. ora che abbiamo appreso le nozioni basilari per seguire il tutorial vediamo come creare il nostro slider animato!

Per prima cosa pensiamo alla struttura. Lo slider sarà composto di 5 immagini all’interno di una lista non ordinata. La lista non ordinata sarà posizionata all’interno di un contenitore, che al momento non serve a nulla ma che in un prossimo tuorial più avanzato ne faremo uso.

Codice html

<div id="slider">
   <ul>
        <li><img src="images/slide/1.jpg" alt="1" width="940" height="350" /></li>
        <li><img src="images/slide/2.jpg" alt="2" width="940" height="350" /></li>
        <li><img src="images/slide/3.jpg" alt="3" width="940" height="350" /></li>
        <li><img src="images/slide/4.jpg" alt="4" width="940" height="350" /></li>
        <li><img src="images/slide/5.jpg" alt="5" width="940" height="350" /></li>
   </ul>
</div>

P.S: Nel codice html completo ho utilizzato html5.

Codice Css

#slider{
	margin:0 10px;
	padding:0;
	float:left;
	width:940px;
	height:350px
}

Iniziamo dal codice del div #slider che non fa altro che creare un contenitore per le slide.

#slider ul{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative
}
#slider ul li{
	margin:0;
	padding:0;
	opacity:0;
	position:absolute;
	top:0;
	left:0;
-o-animation-name:slides_animation;
-o-animation-duration:25s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-play-state: running;
-o-animation-fill-mode: forwards;
 -webkit-animation-name:slides_animation;
	-webkit-animation-duration:25s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name:slides_animation;
	-moz-animation-duration:25s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	animation-name:slides_animation;
	animation-duration:25s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

Il codice postato riguarda la lista che contiene le immagini. All’elemento <ul> impostiamo la proprietà list-style:none che ci permette di eliminare i puntini. Poi la cosa più importante è impostare la proprietà position:relative che servirà agli elementi <li>. Infatti il impostando questa proprietà con questo valore faremo in modo tale che l’area a cui devono fare riferimento gli elementi <li> sia solo quella occupata dall’elemento <ul>.

Gli elementi <li> hanno come impostazione il position:absolute così da mettere tutti gli elementi uno dietro l’altro. Poi impostiamo l’opacità pari a 0 con opacity:0 così da nascondere tutti gli elementi. Poi impostiamo la posizione degli elementi con top:0 e left:0.

Infine diamo le impostazioni di transizione. Qui entrano in gioco i prefix vendor i quali si devono utilizzare quando un browser implementa una proprietà CSS in fase sperimentale che non ha ancora raggiunto il livello di Candidate Reccomandation (CR) per il W3C CSS Working Group. Questa sezione merita sicuramente un capitolo a parte e quindi provvederò a scrivere un articolo dedicato solo a questo.

Per quanto riguarda le specifiche sulle transizioni confrontate la spiegazione data in precedenza con i vari valori assegnati così da capire il significato.

Dopo queste impostazioni vediamo di far partire l’animazione in tempi diversi per ogni slide. Questo è possibile sempre grazie ai css3 che ci permettono attraverso il nuovo selettore nth-child di assegnare ad ogni preciso elemento un tempo diverso. Il primo elemento ovviamente parte dall’inizio ovvero da 0 secondi quindi non c’è bisogno di specificarlo.

#slider ul li:nth-child(2){
-o-animation-delay:5s;
 -webkit-animation-delay:5s;
	-moz-animation-delay:5s;
	animation-delay:5s
}
#slider ul li:nth-child(3){
-o-animation-delay:10s;
 -webkit-animation-delay:10s;
	-moz-animation-delay:10s;animation-delay:10s
}
#slider ul li:nth-child(4){
-o-animation-delay:15s;
 -webkit-animation-delay:15s;
	-moz-animation-delay:15s;
	animation-delay:15s
}
#slider ul li:nth-child(5){
-o-animation-delay:20s;
 -webkit-animation-delay:20s;
	-moz-animation-delay:20s;
	animation-delay:20s
}
#slider ul li img{
	display:inline-block
}

Un pochino di matematica…

Vediamo di capire come mai ho impostato il valore 25s nella proprietà animation-duration.

Io ho utilizzato 5 immagini. Poi bisogna definire il tempo effettivo dell’animazione per ogni elemento. Io ho deciso che la durata dell’animazione sia di 5 secondi

Quindi 5 immagini * 5 secondi = 25 secondi. Ecco qui la durata complessiva dell’animazione. Semplice vero!!

Poi, nel momento in cui andremo ad aggiungere la proprietà @keyframes animation, ovvero la nostra animazione (nel mio caso l’ho chiamata slides_animation) bisogna capire quanti fotogrammi occorrono per creare 1 secondo di animazione. Anche questa operazione è molto semplice:

Il totale dei fotogrammi è pari a 100. Questo valore lo dividiamo per il totale complessivo della durata dell’animazione ovvero 25 secondi. Quindi 100/25 = 4 fotogrammi.

A questo punto possiamo dire che ci occorrono 4 fotogrammi per avere 1 secondo di animazione. Tutto chiaro?!

Keyframes

Dopo i nostri calcoli vediamo il codice della nostra animazione:

@-o-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}
@-webkit-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}

@-moz-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}

@keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}

Vediamo un pochino di spiegare cosa ho fatto. Il primo keyframe ovvero il valore 0% viene impostato con una opacità pari a 0 in quanto l’immagine all’inizio non deve apparire. Dopo 1 secondo, quindi al 4° fotogramma gli diciamo di far apparire l’immagine. Poi manteniamo l’immagine visibile per 3 secondi ovvero fino al 16° fotogramma. Poi gli diciamo che in altri 2 secondi l’immagine deve sparire . Qui potevo farlo in 1 secondo ma poi l’animazione risultava troppo veloce per i miei gusti. Poi fino alla fine gli diciamo di far rimanere l’immagine nascosta.

Conclusione

Bene… siamo arrivati alla fine di questo tutorial.

Ovviamente questo articolo vuole essere solo un primo punto di partenza per capire le potenzialità dei css3 e in questo caso delle animazioni. Ci sono altri modi per realizzare uno slideshow attraverso i css3 ma questo mi sembrava quello più semplice per riuscire ad illustrare le varie proprietà e i relativi valori. Vi ricordo inoltre che per il momento purtroppo questi restano solo degli esempi in quanto la compatibilità con i browser non è su larga scala.

Potete vedere la demo e scaricare i file attraverso i rispettivi link che trovate ad inizio articolo.

Come sempre la parola passa a voi. Cosa pensate di tutto questo? Vi piace la strada intrapresa dai css?

Vi saluto augurandovi buono studio!

61 Commenti
  1. Bel tutorial Danilo! Figurati che l’ho letto fino in fondo pur non avendo mai programmato niente con i CSS e l’ho capito alla perfezione, anzi mi hai quasi fatto venire voglia di provare hahah! 😉

    • Stupendo tutorial, complimenti!!!vorrei chiederti un suggerimento; e se volessi fare lo slideshow RWD?!?!
      Potresti darmi qualche consiglio?!?

      • Grazie Dexter!

        Il tutorial l’ho realizzato per illustrare alcune potenzialità dei css3. Per realizzare uno slideshow responsive andrebbe modificato il codice e mi ci vorrebbe del tempo per spiegare. Il modo più semplice è utilizzare un plugin jquery. Uno fra i più utilizzati e conosciuti è: flexslider.

        Spero di esserti stato d’aiuto.

        • Ciao Danilo , hai fatto un bellissimo lavoro e hai spiegato molto bene molte caratteristiche delle animazioni css3 . Pero’ anche se nella w3school non e’ chiaro o comunque sembra non possibile farlo , c’e’ un modo altrettanto valido e molto piu’ veloce per fare uno slide con css3 animation . solo un div contenitore , dove alle varie percentuali cambiamo immagine di background . Prova , l’effetto e’ molto bello ed il lavoro molto piu’ piccolo . Ciao da Riccardo

          • Ciao Riccardo.

            Grazie mille per i tuoi complimenti. Sono davvero felice che il mio tutorial ti sia piaciuto!

            Per quanto riguarda ciò che proponi lo sapevo già. In questo tutorial però ho voluto insegnare un metodo “classico”! ovviamente più si studia più si possono creare animazioni complesse e magari con meno codice!

  2. @Ste… ti ringrazio!! Il problema è che se poi ti piace diventi più bravo di me. Poi avrei un altro concorrente!! 😀

  3. Hahah non esageriamo!!! Sei avanti anni luce su queste cose, io sono al livello “capisco di cosa stiamo parlando, e ora?” 🙂
    Ragazzi prendete esempio da Danilo che si sta sbattendo a studiare e provare da anni per restare sempre aggiornato e pronto ad affrontare qualsiasi sfida!
    Almeno da quando lo conosco(e non è esattamente poco tempo) è sempre stato così!!!

    • Non scherzare Stefano! Solo perchè non hai intrapreso questa strada non significa che non saresti all’altezza!! Io ti ho sempre considerato molto più bravo di me…

      Sullo sbattimento concordo… per scrivere questo articolo ho sudato 7 camice, 8 magliette e 2 pantaloni!! 😀

      Grazie anche per i complimenti… sei troppo buono!

  4. Grazie mille, mi hai fatto risolvere un serio problema con le tue spiegazioni 😉

  5. Ciao davvero un ottimo tutorial, l’unica pecca e che questa soluzione non funziona su opera e internet explorer.

    • Ciao Alex… scusa il ritardo nel rispondere ma oggi sono stato fuori per lavoro e quindi non ho potute seguire il blog.

      Sono molto molto contento che il tutorial ti sia servito. Mi fa molto piacere sapere che ciò che scrivo sia utile. Per quanto riguarda il supporto dei browser sicuramente è un handicap che non aiuta sicuramente questa tecnologia a migliorare ed essere integrata nei lavori quotidiani. Quello che spero è prima possibile questo “divario” si colmi così da permettere un programmazione dei siti più lineare e conforme a certe regole.

    • Ciao Alex. Per curiosità ho ricontrollato il codice in quanto mi sembrava molto strano che non funzionasse con opera! poi ho capito il perchè: non avevo messo i prefix vendor per il browser opera!! Ora vedo di aggiornare il post e i relativi file. Puoi già visionare la demo con opera (versione 12 – le precedenti versioni non supportano i keyframe!) per vedere correttamente l’animazione!

      Grazie mille per il tuo commento… forse non mi sarei mai accorto di questo errore! 😀

  6. Prego è stato un piacere…
    Ho utilizzato subito questa tecnologia in uno dei miei siti e per ovviare la mancanza di visualizzazione in IE ho usato questo
    <!--[if IE]><![endif]-->
    dove carico un foglio di stile che imposta in background allo slyder
    #slider{background: url(../images/slide/1.jpg) no-repeat;}
    in realtà si dovrebbe mettere solo per le versioni di ie che non lo supportano a differenza del mio che è valido per tutte le versioni di IE.
    Mentre per fare una cosa del genere quando siamo su opera servirebbe il javascript ma è un linguaggio che conosco davvero poco visto che faccio siti amatorialmente, quindi non saprei come sviluppare il codice.

  7. Ciao Alex.

    Ho corretto il tuo commento cancellando quello dove segnalavi l’errore!!

    Solo internet explorer 10 supporta le animazioni. Le altre versioni purtroppo niente da fare! L’unico modo che hai per ovviare è utilizzare javascript il quale è un linguaggio più complesso.

    Sono contento di esserti stato di aiuto e che il mio codice sia utilizzato… non sai quanto mi fa piacere!

  8. Sono riuscito a risolvere il problema della mancanza di un’immagine se il browser non lo supporta con questo codice in php utilizzando la libreria Browser.php che si trova online
    getBrowser()=='Firefox'&&$browser->getVersion()getBrowser()=='Safari'&&$browser->getVersion()getBrowser()=='Opera'&&$browser->getVersion()getBrowser()=='Internet Explorer'&&$browser->getVersion()

  9. Conosco quella libreria!!

    Ci sono vari metodi per verificare il supporto dei css3 e dell’html5 e uno di quelli più utilizzati è sicuramente la libreria http://modernizr.com/

  10. Ciao, è possibile che usando il tuo codice per l’animazione, questo escluda in automatico le possibilità di usare il border-radius?

    Sono tutti codici CSS, mi assurdo che si escludano a vicenda, però non riesco a venirne a capo. Ah, premetto che non sono un esperto, però quello che vedi su questo sito tozzinisecsa.com/Pomba25 l’ho scritto tutto di mio pugno.

    ciao e grazie in anticipo

    P.

    • Ciao Paride!

      Il codice che ho postato non esclude assolutamente l’utilizzo della proprietà border-radius. Ti ricordo che questa proprietà non è supportata da tutti i browser ed ha bisogno dei prefix vendor ovvero:

      -webkit-border-radius

      -moz-border-radius

      border-radius

      Ho provato proprio ora ad applicare i bordi arrotondati al mio codice e funziona perfettamente. La proprietà border-radius l’ho applicata all’elemento img, ovvero all’immagine.

      Spero di esserti stato d’aiuto!

      • Grazie per la risposta repentina, ho deciso che abuserò della tua disponibilità, posso inviarti o linkarti una pagina, e il suo relativo CSS? Lo slideshow funziona perfettamente, il DIV madre ha la proprietà border-radius, ma il suo UL o solo LI non ereditano i border-radius… Any ideas?

        Grazie mille, io intanto mi cimento nuovamente… Per ora ho risolto con un bordo di un colore differente, ma graficamente sarebbe forse più bello senza.

        grazie e ciao

        • Ciao Paride.

          Mi spiace risponderti solo ora ma oggi sono stato fuori per lavoro e quindi ora che sono rientrato mi posso dedicare al blog!!

          Normalmente sarebbe più saggio rimanere in tema con l’argomento trattato nel post però posso risponderti tranquillamente 😀

          Se ho ben capito tu hai messo all’elemento DIV il border-radius, giusto? Se vuoi applicare il border-radius anche agli elementi figli lo devi dichiarare in quanto come l’hai scritto tu si applicherà solo all’elemento DIV.

          Come ti ho scritto anche nel precedente commento puoi applicare il border-radius direttamente all’elemento img dato che è quello poi l’elemento che si vedrà!

          Se ti posso dare un consiglio, dato che sei alle prime armi, puoi leggerti questo bellissimo libro sui css: http://www.amazon.it/CSS-Guida-Completa-ebook/dp/B006DXBO1M/ref=sr_1_12?ie=UTF8&qid=1352394377&sr=8-12 – Questo libro è veramente ben fatto e aiuta a capire i css e il loro funzionamento.

          Spero di esserti stato d’aiuto.

  11. Grazie mille, sono proprio un casinista… in effetti era più semplice farlo come dicevi tu, applicando lo stile direttamente alle immagini… Grazie mille per la disponibilità!!! Ottimo script!! Peccato solo per l’incompatibilità con IE… che ormai non usa più nessuno, però spiace lo stesso…

    P.

    • Figurati!! Sono contento di esserti stato utile!! 😀

      Internet explorer è un problema e questo si sa. Non sono d’accordo sul fatto che non lo usa più nessuno in quanto ci sono ancora moltissimi utenti che lo utilizzano. Quello che posso dire è che la loro prcentuale è in diminuzione ma bisogna comunque considerarla.

      Ti ringrazio per aver utilizzato il mio esempio in un tuo lavoro! 😀

  12. Grazie infinite per questo tutorial!
    Mi è stato davvero molto utile, complimenti alla tua bravura!

  13. Ciao Danilo, grazie mille per questo articolo!
    Ho seguito la tua demo e non ho riscontrato grandi problemi, se non fosse che il mio slideshow prevede l’alternarsi di 4 immagini e non da 5 e quindi, dopo la quarta immagine compare una slide totalmente bianca (relativa alla quinta immagine della demo suppongo) come posso, o meglio dov’è che devo mettere mano?
    Grazie mille in anticipo!!!
    Silvia

  14. Danilo,
    ti faccio i miei complimenti…
    ho seguito le tue indicazioni e ho ottenuto delle splendide slide.
    grazie

  15. Ciao, ottimo tutorial, davvero ben fatto!
    Mi chiedevo se fosse possibile far apparire i titoli delle immagini specificandolo nel tag title.
    Grazie!

    • Ciao Simone. Grazie per i complimenti! Per quanto riguarda la tua richiesta invece devo controllare. Solitamente uso ancora jquery per fare certe cose e non so se si possa fare solo con i css. Controllo e ti faccio sapere in giornata.

    • Ciao Simone. Eccomi qua come promesso. Stamattina Non mi sono ricordato di una cosa che si può utilizzare con i css3: i selettori before e after. Praticamente puoi inserire me contenuto ò che è presente in un determinato attributo, in questo caso “title“. Ecco l’esempio: http://jsfiddle.net/6dZS7/1/

      Il “title” l’ho inserito nell’elemento li e poi grazie ai css lo riprendo e lo inserisco come contenuto. La parte css interessata la trovi in fondo.

      Spero di esserti stato d’aiuto. Se nel caso vuoi un’ulteriore spiegazione lascia pure un commento!

      Ciao

  16. marcello_lorenzi@yahoo.com

    mi sei stato di grande aiuto sono riuscito nel tuo esempio,però
    qualora io voglia fare una slide di sole 4 immagini, come mi devo comportare,
    per il momento ho eliminato la 5 immagine,non la proietta ma la lascia in bianco , allora ho pensato alla durata ho messo 20s
    ma non funziona ,
    mi puoi fare capire cosa devo fare cosi che se voglio creare delle slide con un numero diverso d’immagini so cosa devo fare

    ciao e grazie
    marcello

    • Ciao Marcello. Felice di esserti stato di aiuto! 😀

      Per la tua domanda invece ti consiglio di rileggere il mio articolo perchè c’è scritto chiaramente come puoi fare. Al punto “un pochino di matematica…” spiego perfettamente come l’animazione avviene grazie alle 5 immagini.

      Se proprio non riesci vedrò di crearti un esempio apposito!

      Ciao ciao

      • marcello_lorenzi@yahoo.com

        hai ragione e questo lo avevo percepito è per questo che ho messo 20 secondi ma mi viene con una transizione sbagliata, tra un’immagine e l’altra c’è troppo bianco

        quello che mi piacerebbe capire e ti ringrazio per il tempo mi hai dedicato è capire dove devo intervenire

        un pò di pratica con i css cè lo ma questa slide con 4 immagini non mi viene, anche perche se voglio fare altre slide per il mio sito, devo imparare il meccanismo

        se puoi aiutarmi te ne sarei grato
        ciao

        • Ciao Marcello.

          Per riuscire ad aiutarti a capire il problema dovrei vedere il codice che hai scritto. Per semplificare le cose potresti utilizzare un servizio come http://jsfiddle.net/

          Attendo tue notizie.
          Danilo

          • marcello_lorenzi@yahoo.com

            scusa ancora ho aperto il link ma non ci capisco nulla,
            se puoi mi puoi fare una slide con 4 immagini cosi che l CONFRONTO con quella da 5 e provo a capire dove bisogna intervenire.

            credo che non sia un problema di impostare la durata dell’animazione , ma che sia sul numero delle transizioni da fare giusto????

            per me è diventate una questione di principio voglio imparare il meccanismo

            ciao e grazie ancora del tempo che mi dedichi

  17. Ciao Marcello.

    Siccome non ho visto il tuo codice non ho idea di dove possa essere l’errore. Ho provveduto a realizzare l’animazione con 4 immagini: https://dl.dropboxusercontent.com/u/5490925/simple-slideshow-css3-4-img.zip

    Spero ti possa essere di aiuto.

    Ciao ciao

  18. marcello_lorenzi@yahoo.com

    #slider{
    margin:0 10px;
    padding:0;
    float:left;
    width:940px;
    height:350px
    }

    #slider ul{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative
    }
    #slider ul li{
    margin:0;
    padding:0;
    opacity:0;
    position:absolute;
    top:0;
    left:0;
    -o-animation-name:slides_animation;
    -o-animation-duration:20s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-delay: 0;
    -o-animation-play-state: running;
    -o-animation-fill-mode: forwards;
    -webkit-animation-name:slides_animation;
    -webkit-animation-duration:20s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name:slides_animation;
    -moz-animation-duration:20s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    animation-name:slides_animation;
    animation-duration:20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: forwards;
    }

    #slider ul li:nth-child(2){
    -o-animation-delay:5s;
    -webkit-animation-delay:5s;
    -moz-animation-delay:5s;
    animation-delay:5s
    }
    #slider ul li:nth-child(3){
    -o-animation-delay:10s;
    -webkit-animation-delay:10s;
    -moz-animation-delay:10s;animation-delay:10s
    }
    #slider ul li:nth-child(4){
    -o-animation-delay:15s;
    -webkit-animation-delay:15s;
    -moz-animation-delay:15s;
    animation-delay:15s
    }
    //#slider ul li:nth-child(5){
    -o-animation-delay:20s;
    -webkit-animation-delay:20s;
    -moz-animation-delay:20s;
    animation-delay:20s
    }
    #slider ul li img{
    display:inline-block
    }
    }
    @-o-keyframes slides_animation{
    0%{opacity:0;}
    4%{opacity:1;}
    16%{opacity:1;}
    24%{opacity:0;}
    100%{opacity:0;}
    }
    @-webkit-keyframes slides_animation{
    0%{opacity:0;}
    4%{opacity:1;}
    16%{opacity:1;}
    24%{opacity:0;}
    100%{opacity:0;}
    }

    @-moz-keyframes slides_animation{
    0%{opacity:0;}
    4%{opacity:1;}
    16%{opacity:1;}
    24%{opacity:0;}
    100%{opacity:0;}
    }

    @keyframes slides_animation{
    0%{opacity:0;}
    4%{opacity:1;}
    16%{opacity:1;}
    24%{opacity:0;}
    100%{opacity:0;}
    }

    ho fatto queste modifiche ho eliminato l’immagine numero 5 ,cosi come lo slider child 5 e ho portato la durata dell’animazione a 20 secondi anziche 25,
    funziona l’unica cosa è che c’è troppo bianco tra una transizione e l ‘altra
    tu cosa ne pensi?

    ciao e buona serata
    marcello

    • Ciao Marcello.

      Se guardi attentamente il mio codice, sia quello nell’articolo che quello che ti ho preparato noterai delle differenze nell’animazione “slides_animation“. Tu devi cambiare anche questi parametri se vuoi che la tua animazione sia corretta.

      Ti consiglio di rileggere l’articolo con molta più calma in quanto ho spiegato passo passo qual è la procedura da seguire per creare l’animazione. Ti riporto qui un pezzo del codice che va cambiato nel tuo specifico caso:

      @keyframes slides_animation{
      0%{opacity:0}
      5%{opacity:1}
      20%{opacity:1}
      25%{opacity:0}
      100%{opacity:0}
      }

      Spero che ora ti sia più chiaro! Nel caso ci sia ancora qualche dubbio ci sono i commenti! 😉

  19. marcello_lorenzi@yahoo.com

    grazie danilo credo di aver imparato il sistema ho fatto due slide una da 6 immagini e una da 4 e tutto funziona.
    mi sei stato di grande aiuto
    ovviamente queste transizioni sono tutte standard vero?
    se volessi fare qualche variazione?

    ho trovato un programma wowslider è a pagamento tu lo conosci? se si come lo giudichi

    non so come ringraziarti mi sei stato di grande aiuto

    ciao marcello

    • Ciao Marcello. Sono contento di esserti stato d’aiuto. Penso che tu intendessi le animazioni e non le transizioni. Se vuoi altri effetti devi creare tu l’animazione che poi l’effetto che vuoi ottenere.

      Il programma che hai citato lo conosco ma sinceramente non mi piace. Io, essendo uno sviluppatore, se posso cerco di crearmi le cose per conto mio oppure mi affido a script open source. Se ti piacciano le animazioni penso che ti possa piacere questo script jquery: camera. Ha moltissime funzioni ed in oltre è responsive. Lo trovo veramente un ottimo progetto! 😉

  20. Salve Danilo, ti ringrazio di tutto questo lavoro. Ho letto con molto interesse tutto l’ articolo e credo di averlo capito. Appena possibile lo applicheró al mio sito per le slide show dato che la gallery creata a suo tempo é provvisoria e fa pena. Ammiro veramente la tua dedizione a questo lavoro e si vedono i risultati. Approfitteró anche in futuro di qualche tuo suggerimento sui css dato che mi ci sono appassionato gia da tempo. Premetto che il mio mestiere é tutto un altro ( elettricista ) e faccio fatica a stare dietro a questi “linguaggi”, ma grazie a persone altruiste come te ho imparato molto nel creare siti web ovviamente personali.
    Saluto cordialmente Andrea

    • Ciao Andrea. Sono io a ringraziarti per il tuo commento. Io faccio questo lavoro per passione e scrivere articoli come questo per me è un vero piacere! Se hai bisogno di consigli scrivimi pure; se posso esserti di aiuto lo faccio molto volentieri. 😉

      Ricordati solo che se vuoi utilizzare queste tecniche innovative solo i browser recenti potranno leggere questa slideshow. Se vuoi la compatibilità più ampia ti consiglio di scegliere un plugin jquery.

      Saluti – Danilo

  21. Grazie del tuo lavoro . Incontrando il tuo blog sono finalmente riuscito a montare la tua slide con le mie foto all’interno di una pagina utilizzando solo css3. Mi chiedevo se sai consigliarmi dei libri per imparare css3 e l’html5.

    Grazie Simone

    • Ciao Simone. Sono contento di esserti stato d’aiuto! Per quanto riguarda la tua richiesta invece ti posso dire che per quanto ne so non ci sono libri così completi che spiegano quelle tecnologie in quanto si possono fare davvero moltissime cose. Se vuoi posso indicarti dei libri buoni ma che illustrano le basi. Il mio consiglio, se hai già una buona base, è di porti degli obiettivi e di cercare degli articoli che spieghino come realizzare quello che vuoi fare. Ti consiglio inoltre di cercarli in lingua inglese così troverai molte più fonti e soprattutto tutorial sicuramente più dettagliati.

      Se hai qualche richiesta in particolare chiedimi pure!

      Danilo

  22. ciao, volevo ringraziarti per prima cosa del codice che hai fornito… avrei però da chiederti una cosa su cui sto perdendo un sacco di tempo ma che non mi sembra difficile:

    preso il tuo codice così come è: stesso numero di immagini e di parametri volevo però aggiungere due opzioni. volevo dare la possibilità all’utente di poter cliccare sulle immagini stoppando la presentazione e facendo aprire un pop up con una piccola descrizione per poi poter riprendere la visione.

    in poche parole:

    – come attaccare un href verso un pop up

    – e come settare il paly stop in base al click (tap)

    p.s. avrei bisogno che i comandi fossero validi anche per la visione da device mobili..

    • Ciao Filippo.

      Lo scopo di questo articolo era quello di mostrare le potenzialità dei css3. Quello che chiedi di fare è piuttosto complesso e soprattutto richiede un bel po di lavoro per i browser che non supportano tale tecnologia. Quello che ti posso consigliare è l’utilizzo di questo plugin jquery: http://bxslider.com. È uno slider responsive e con moltissime opzioni e che contiene tutto ciò di cui hai bisogno (ottimo supporto per mobile).

      Spero di esserti stato di aiuto
      Danilo

  23. Bellissimo Articolo, complimenti.
    Una domanda:
    è possibile aggiungere dei link diversi alle immagini?
    Mi spiego:





    fatto così non funziona.
    Non dico che sono novizio ma quasi.
    Già che ci sono ti chiedo se è complesso aggiungere anche un testo ombreggiato sopra le immagini.

    Grazie,
    Ale

    • ops… non si vede il codice che ho messo…
      in pratica ho provato a mettere

      li – a href- img src=ecc ecc – /a /li

      con un link diverso in ogni immagine,
      ma così’ non funge.

      • Ciao Alessandro. Grazie per i complimenti!

        Scusami se rispondo solo ora ma oggi è stata una giornata abbastanza piena.

        Per poter postare il codice senza problemi puoi utilizzare questo servizio: pastebin.com

        Lo slideshow che vedi nell’articolo è molto semplice in quanto serviva solo per illustrare le potenzialità dei css3. Se vuoi aggiungere funzionalità bisogna sicuramente ristrutturarlo modificando il codice a seconda delle tue esigenze. Il mio consiglio è di utilizzare un plugin jquery come questo: bxslider.com È un plugin veramente potente e flessibile che sicuramente troverai molto utile per le tue esigenze.

        Per aggiungere un testo ombreggiato devi utilizzare la proprietà css3 text-shadow.

        Spero di esserti stato di aiuto. In caso avessi bisogno scrivi pure.

        Ciao

  24. ciao bel tutorial ho seguito tutto come descritto funziona, però ho visto un comportamento strano come mai se le immagini invece di dargli dei numeri se le rinomino con dei nomi non funziona?praticamente appare l’ultima immagine e poi sparisce tutto.

    • Ciao Leonardo.

      Scusa il ritardo nel risponderti ma sono molto impegnato con il lavoro. Riguardo al tuo problema sinceramente non ho proprio idea. Potrei dare un’occhiata al tuo codice se vuoi!

      Fammi sapere
      Danilo

  25. Grazie ho già capito, forse ? boh ho visto le specifiche sul selettore nth-child prevede l’uso di numeri, a questo punto penso sia quello il motivo,cioè in pratica io usavo il nome originale dei miei file img , ma in questo modo non funziona, ma solo nominandoli con i numeri appunto come hai fatto te. Ps comunque la slide mi funziona molto bene ho usato i numeri grazie per la risposta.

  26. Ciao, bello esempio ma lo vedo poco utilizzabile, vorrei capire come applicarlo ad un DIV dove poi sovrapporre altri elementi.
    Esempio maschera LOGIN con sfondo che cambia.

    • Ciao Stefano. L’articolo voleva essere solo un tutorial sulle potenzialità che offrono i css. Ovviamente sta alle competenze dell’utente affinare queste tecniche per ottenere ciò di cui si ha bisogno. Altra cosa importante da ricordare è che i css sono in continua evoluzione e che ad oggi i veri limiti sono il supporto dei browser.

      Per realizzare quello che chiedi puoi utilizzare benissimo questa tecnica ma devi applicare le transizioni ai div, contenenti le immagini come background, dandogli anche larghezza e altezza. Per quanto riguarda il form di login invece lo posizionerei in modo assoluto rispetto ad un div contenitore (contenente lo slideshow e lo stesso login).

      Spero di averti suggerito un buon punto di partenza.

      • Ciao, ho fatto una prova, però non capisco come mai tra un animazione e l’altra ho po’ di nero.
        Cosa potrebbe essere.
        Io ho 3 Immagini, totale animazione 21s
        Per cui 7s ad animazione

Lascia un commento

Attenzione

Se dovete postare del codice utilizzate uno di questi tool online (o un altro che preferite): pastebin.com - gist.github.com - jsfiddle.net