-
.[CSS3 + HTML] Slideshow Immagini con effetto fade con avvio automatico
Il nuovo slideshow che vi mostro oggi è diverso da quello che vi ho mostrato qui,principalmente per l'avvio automatico e l'effetto fade ritardato e quindi di maggior effetto. Per configurarlo sul vostro forum del circuito forumfree/forumcommunity, ecco quello che dovrete fare...Innanzi tutto vediamo il risultato come sarà: Esempio. Come si installa e come si configura sul mio forum? Questa è la domanda alla quale risponderò! Lo slideshow ad avvio automatico è compatibile con tutti i browser*
*nota da confermare!
Questo è il CSS dello slideshow:CITAZIONE/* dissolve */
.dissolve {width: 600px;
height: 200px;
position: relative;
overflow: hidden}
.dissolve .item {position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: dissolve 20s linear infinite;
-moz-animation: dissolve 20s linear infinite;
-ms-animation: dissolve 20s linear infinite;
animation: dissolve 20s linear infinite}
.dissolve .item:nth-child(2) {-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s}
.dissolve .item:nth-child(3) {-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s}
.dissolve .item:nth-child(4) {-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s}
/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
/* dissolve */
@width: 600px; // width of the carousel
@height: 200px; // height of the carousel
@numberofitems: 4; // the number of items in the carousel
@visibleitemduration: 4s; // time during which a carousel item is fully visible
@transitionduration: 1s; // duration of the transition between two carousel items
@oneitemduration: @visibleitemduration + @transitionduration;
@carouselperiod: @oneitemduration * @numberofitems;
.dissolve {width:@width;
height: @height;
position:relative;
overflow: hidden} .item {position:absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: dissolve @carouselperiod linear infinite;
-moz-animation: dissolve @carouselperiod linear infinite;
-ms-animation: dissolve @carouselperiod linear infinite;
animation: dissolve @carouselperiod linear infinite;
&:nth-child(2) {-webkit-animation-delay: @oneitemduration;
-moz-animation-delay: @oneitemduration;
-ms-animation-delay: @oneitemduration;
animation-delay: @oneitemduration}
&:nth-child(3) {-webkit-animation-delay: 2 * @oneitemduration;
-moz-animation-delay: 2 * @oneitemduration;
-ms-animation-delay: 2 * @oneitemduration;
animation-delay: 2 * @oneitemduration}
&:nth-child(4) {-webkit-animation-delay: 3 * @oneitemduration;
-moz-animation-delay: 3 * @oneitemduration;
-ms-animation-delay: 3 * @oneitemduration;
animation-delay: 3 * @oneitemduration}}}
/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
#creditiangelneo {float: right; font-size: 10px; font-style: italic; margin-right: 20px}
Questo di seguito è il codice HTML. Al posto di IMMAGINE dovrete mettere l'url dell'immagine che vorrete vedere nello slideshow. (Le immagini verranno deformate seguendo le regole di width ed height impostate dal CSS)HTML<div class="carousel dissolve">
<img class="item" src="URLIMMAGINE" />
<img class="item" src="URLIMMAGINE" />
<img class="item" src="URLIMMAGINE"/>
<img class="item" src="URLIMMAGINE" />
</div>
<div id="creditiangelneo"><a href="http://jackforum.forumcommunity.net/?t=51189353">Slideshow Immagini con effetto fade con avvio automatico by AngelNeo89 </a></div>Copyright GuidaLa guida è stata interamente creata da AngelNeo89 per il Jackforum. Se volete postarla sui vostri forum mandatemi un mp che sarò ben lieto di postarla anche sul vostro sito.
Edited by AngelNeo89 - 27/6/2012, 13:26. -
¢DanI¢.
User deleted
Solo a me non funziona? Ho messo un immagine a caso ma nulla . -
.
Mandami il link del forum di prova . -
.
Qualcuno può aiutare anche me? ç_ç non riesco a farlo funzionare . -
.
Linkami il forum di prova! . -
Black&White.
User deleted
Scusate ma è possibile aggiungere un titolo o descrizione e un link all'immagine? . -
.
Per questo genere di cose ti consiglio questo slider oppure quest'altro che hanno già implementato questa funzione. SPOILER (clicca per visualizzare)Se ti va presentati. -
blu_man.
User deleted
Ciao,
volevo sapere una cosa, come si "attacca" ai bordi della pagina questo div? ho provato inserendo su
.dissolve {
margin: 0px;
border: none
}
ma niente da fare...potrei sapere come si fa a non lasciare nessuno spazio bianco attorno al div, fissandolo?
grazie in anticipo. -
.Ciao,
volevo sapere una cosa, come si "attacca" ai bordi della pagina questo div? ho provato inserendo su
.dissolve {
margin: 0px;
border: none
}
ma niente da fare...potrei sapere come si fa a non lasciare nessuno spazio bianco attorno al div, fissandolo?
grazie in anticipo
Ciao. Per come mi sembra tu stia ponendo la domanda penso che la soluzione si quella di POSIZIONARE il div in una posizione precisa dello schermo.
Questo è possibile aggiungendo a .dissolve un position: absolute.
Se per esempio vuoi posizionarlo in alto a sinistra dello schermo sarà così il codice:CODICE.dissolve{position:absolute; top: 0; left:0}
Se invece vuoi posizionarlo sempre in alto a sinistra dello schermo ma vuoi che esso non scompaia mai, e che perciò anche con lo scroll della pagina sia sempre visibile in quella posizione al posto di absolute dovrai inserire fixedSPOILER (clicca per visualizzare)Se ti va presentati sul Jackforum nella sezione adibita a tale operazione. -
blu_man.
User deleted
grazie ho risolto...un'altra cosa, di solito quando si inizia la progettazione di un sitoweb, su quali larghezze bisogna basarsi. Non capisco la differenza, bisogna utlizzare come risoluzione 1920 x 1080px oppure 1280 x 800... . -
.
Diciamo che non è una prassi ma quando si inizia una progettazione si devono pensare più risoluzioni in modo tale da avere un risultato ottimale per i vari utenti. . -
Ranacida.
User deleted
a me non funziona con Internet Explorer 10. Con firefox tutto Ok!
Soluzioni? sarà la diversa interpretazione del css?
thank for your help. -
ensidia.
User deleted
per aggiungere piu di 4 foto dove si tocca al codice? perche adesso sembra que sia solo per 4 immagini. . -
.
Dovrai sicuramente agire sull'html aggiungendo un
HTML<img class="item" src="URLIMMAGINE" />
per l'immagine che vuoi aggiungere ed in più modificare i parametri del foglio di stile.CODICE@numberofitems: 4; // the number of items in the carousel
Il problema principale però sta nella modifica dell'animazione (keyframe) che è calcolata per il funzionamento con 4 immagini.
Per ora su questo non riesco ad aiutarti,ho fatto alcune prove ma invano.
Ti consiglio comunque questo altro slider che è molto più avanzato ed è facile aggiungere altre immagini,in modo intuitivo. In più le immagini saranno cliccabili e potrai inserire un testo in evidenza. Provalo e se hai problemi di configurazione chiedimi su quella discussione che ti ho linkato!. -
Ensidia1.
User deleted
ho un altro problema allora ho messo la visualizzazione delle immagini dentro una tabella con il width: 100%; e funziona ma io voglio che l'immagine sia centrato quindi quando rimpiciolisco la finestra deve restare centrato come un sfondo, ho provato a fare in varie maniere:
display: block;
margin-left: auto;
margin-right: auto;
display: block;
margin: 0px auto;
text-align: center;
ma nessuno delle due tecniche funzionano. sarebbe veramente bello avere le immagini centrate..