Ciao a tutti,
da qualche giorno ho provato ad importare questa bella galleria fotografica in html5 http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/ su questo sito http://www.ultimaspiaggiadellecesine.it/ . Purtroppo ho un problema con la dissolvenza delle immagini. Per l'esattezza sono 24 e, dopo le prime dieci, il passaggio tra un immagine e l'altra è farraginoso. Inoltre, una volta terminata la sequenza (l'ultima foto riguarda il prospetto del lido visto dal mare, per intenderci) la slide riparte non dalla prima, ma dalla 14esima foto.
Qualcuno mi sa dire perchè?
Di seguito riporto lo style riguardante la slide
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 64s linear infinite 0s;
-moz-animation: imageAnimation 64s linear infinite 0s;
-o-animation: imageAnimation 64s linear infinite 0s;
-ms-animation: imageAnimation 64s linear infinite 0s;
animation: imageAnimation 64s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 64s linear infinite 0s;
-moz-animation: titleAnimation 64s linear infinite 0s;
-o-animation: titleAnimation 64s linear infinite 0s;
-ms-animation: titleAnimation 64s linear infinite 0s;
animation: titleAnimation 64s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(../images/7.jpg);
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(../images/8.jpg);
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
.cb-slideshow li:nth-child(9) span {
background-image: url(../images/9.jpg);
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
-ms-animation-delay: 48s;
animation-delay: 48s;
}
.cb-slideshow li:nth-child(10) span {
background-image: url(../images/10.jpg);
-webkit-animation-delay: 54s;
-moz-animation-delay: 54s;
-o-animation-delay: 54s;
-ms-animation-delay: 54s;
animation-delay: 54s;
}
.cb-slideshow li:nth-child(11) span {
background-image: url(../images/11.jpg);
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.cb-slideshow li:nth-child(12) span {
background-image: url(../images/12.jpg);
-webkit-animation-delay: 66s;
-moz-animation-delay: 66s;
-o-animation-delay: 66s;
-ms-animation-delay: 66s;
animation-delay: 66s;
}
.cb-slideshow li:nth-child(13) span {
background-image: url(../images/13.jpg);
-webkit-animation-delay: 72s;
-moz-animation-delay: 72s;
-o-animation-delay: 72s;
-ms-animation-delay: 72s;
animation-delay: 72s;
}
.cb-slideshow li:nth-child(14) span {
background-image: url(../images/14.jpg);
-webkit-animation-delay: 78s;
-moz-animation-delay: 78s;
-o-animation-delay: 78s;
-ms-animation-delay: 78s;
animation-delay: 78s;
}
.cb-slideshow li:nth-child(15) span {
background-image: url(../images/15.jpg);
-webkit-animation-delay: 84s;
-moz-animation-delay: 84s;
-o-animation-delay: 84s;
-ms-animation-delay: 84s;
animation-delay: 84s;
}
.cb-slideshow li:nth-child(16) span {
background-image: url(../images/16.jpg);
-webkit-animation-delay: 90s;
-moz-animation-delay: 90s;
-o-animation-delay: 90s;
-ms-animation-delay: 90s;
animation-delay: 90s;
}
.cb-slideshow li:nth-child(17) span {
background-image: url(../images/17.jpg);
-webkit-animation-delay: 96s;
-moz-animation-delay: 96s;
-o-animation-delay: 96s;
-ms-animation-delay: 96s;
animation-delay: 96s;
}
.cb-slideshow li:nth-child(18) span {
background-image: url(../images/18.jpg);
-webkit-animation-delay: 102s;
-moz-animation-delay: 102s;
-o-animation-delay: 102s;
-ms-animation-delay: 102s;
animation-delay: 102s;
}
.cb-slideshow li:nth-child(19) span {
background-image: url(../images/19.jpg);
-webkit-animation-delay: 108s;
-moz-animation-delay: 108s;
-o-animation-delay: 108s;
-ms-animation-delay: 108s;
animation-delay: 108s;
}
.cb-slideshow li:nth-child(20) span {
background-image: url(../images/20.jpg);
-webkit-animation-delay: 114s;
-moz-animation-delay: 114s;
-o-animation-delay: 114s;
-ms-animation-delay: 114s;
animation-delay: 114s;
}
.cb-slideshow li:nth-child(21) span {
background-image: url(../images/21.jpg);
-webkit-animation-delay: 120s;
-moz-animation-delay: 120s;
-o-animation-delay: 120s;
-ms-animation-delay: 120s;
animation-delay: 120s;
}
.cb-slideshow li:nth-child(22) span {
background-image: url(../images/22.jpg);
-webkit-animation-delay: 126s;
-moz-animation-delay: 126s;
-o-animation-delay: 126s;
-ms-animation-delay: 126s;
animation-delay: 126s;
}
.cb-slideshow li:nth-child(23) span {
background-image: url(../images/23.jpg);
-webkit-animation-delay: 132s;
-moz-animation-delay: 132s;
-o-animation-delay: 132s;
-ms-animation-delay: 132s;
animation-delay: 132s;
}
.cb-slideshow li:nth-child(24) span {
background-image: url(../images/24.jpg);
-webkit-animation-delay: 138s;
-moz-animation-delay: 138s;
-o-animation-delay: 138s;
-ms-animation-delay: 138s;
animation-delay: 138s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(7) div {
background-image: url(../images/7.jpg);
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
} etc. etc
Come potete vedere l'intervallo è di 6 secondi ad immagine.
Spero in un vostro aiuto!!
grazie
Rispondi quotando
