CSS Slideshow s přibližovacím efektem – CSS – Fórum – Programujte.com

Ahoj,

řeším jednu věc, se kterou si nevím rady. Na webu https://www.cssscript.com/pure-css-css3-slideshow-with-image-panning-and-zooming-effect/ jsem si našel zajímavý slideshow s takovým přibližováním, ale nedaří se mi to úplně správně zprovoznit. 

Potřeboval bych tam vložit okolo deseti obrázků. Nyní mi to vše správně proběhne do předposledního snímku a na posledním se vše zasekne a po delší době se to zase rozjede. Zaseknutí podle mě trvá jakoby navíc dva snímky, poté to udělá rychlé přeskočení přes začátek, asi aby se nějak srovnaly nastavené časy a pak to pokračuje po poslední snímek správně a pak zase nastane problém. Dokázal by někdo poradit, jak to udělat, aby všechny snímky proběhly správně ve stejných intervalech? Jestli to je tedy možné. Momentálně to mám nastavené na intervaly po 4 vteřinách, ale na tom asi nezáleží.

Děkuji za případné odpovědi.

Chybu ve tvem kodu nelze nalezt, zadny jsi nedal.

Kliknul jsem na link, Demo tlacitko, zobrazila se mi prazdna stranka (Firefox). Ale ma html kod. Jenom uzivateli se zobrazi nic.

Firefox > Nastroje > Vyvoj webu > webova konzola
Zobrazi v tom demicku chybu krizeni https vs http. Obrazky maji http, ale demicko jede pod https. Firefox ukonci nacitani nezabezpeceneho obsahu, obrazky.

 Načítání smíšeného (nezabezpečeného) zobrazovaného obsahu na zabezpečené stránce 
„http://docode.com.ua/wp-content/uploads/pictures/pic-1.jpg"

Děkuji za odpověď.

Zasílám tedy zdrojový kód, na kterém to zkouším. V podstatě se to nijak neliší od toho na odkazu, jen tam mám více obrázků a ten výše zmíněný problém...

        <div class="pic-wrapper">
            <figure class="pic-1"></figure>
            <figure class="pic-2"></figure>
            <figure class="pic-3"></figure>
            <figure class="pic-4"></figure>
            <figure class="pic-5"></figure>
            <figure class="pic-6"></figure>
            <figure class="pic-7"></figure>
            <figure class="pic-8"></figure>
            <figure class="pic-9"></figure>
            <figure class="pic-10"></figure>
        </div>
        
<style>          
 * {
  margin: 0;
  padding: 0;
}

.pic-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation*/
  
  animation: slideShow 40s linear infinite 0s;
  -o-animation: slideShow 40s linear infinite 0s;
  -moz-animation: slideShow 40s linear infinite 0s;
  -webkit-animation: slideShow 40s linear infinite 0s;
}

figurecaption {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
}

.pic-1 {
  opacity: 1;
  background: url(nejaky-obrazek.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-2 {
  animation-delay: 4s;
  -o-animation-delay: 4s;
  -moz--animation-delay: 4s;
  -webkit-animation-delay: 4s;
  background: url(nejaky-obrazek.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-3 {
  animation-delay: 8s;
  -o-animation-delay: 8s;
  -moz--animation-delay: 8s;
  -webkit-animation-delay: 8s;
  background: url(nejaky-obrazek.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-4 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz--animation-delay: 12s;
  -webkit-animation-delay: 12s;
  background: url(nejaky-obrazek.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-5 {
  animation-delay: 16s;
  -o-animation-delay: 16s;
  -moz--animation-delay: 16s;
  -webkit-animation-delay: 16s;
  background: url(nejaky-obrazek.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-6 {
  animation-delay: 20s;
  -o-animation-delay: 20s;
  -moz--animation-delay: 20s;
  -webkit-animation-delay: 20s;
  background: url(nejaky-obrazek.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-7 {
  animation-delay: 24s;
  -o-animation-delay: 24s;
  -moz--animation-delay: 24s;
  -webkit-animation-delay: 24s;
  background: url(nejaky-obrazek.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-8 {
  animation-delay: 28s;
  -o-animation-delay: 28s;
  -moz--animation-delay: 28s;
  -webkit-animation-delay: 28s;
  background: url(nejaky-obrazek.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-9 {
  animation-delay: 32s;
  -o-animation-delay: 32s;
  -moz--animation-delay: 32s;
  -webkit-animation-delay: 32s;
  background: url(nejaky-obrazek.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-10 {
  animation-delay: 36s;
  -o-animation-delay: 36s;
  -moz--animation-delay: 36s;
  -webkit-animation-delay: 36s;
  background: url(nejaky-obrazek.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* keyframes*/
 
@keyframes slideShow {
  0% {
    opacity: 0;
    transform:scale(1);
    -ms-transform:scale(1);
  }
  4% {
    opacity: 1
  }
  24% {
    opacity: 1;    
  }
  28% {
    opacity: 0;
    transform:scale(1.1);
    -ms-transform:scale(1.1);
  }
  100% {
    opacity: 0;
    transform:scale(1);
    -ms-transformm:scale(1);
  }    
 }
 
@-o-keyframes slideShow {
   0% {
    opacity: 0;
    -o-transform:scale(1);
  }
  4% {
    opacity: 1
  }
  24% {
    opacity: 1;    
  }
  28% {
    opacity: 0;
    -o-transform:scale(1.1);
  }
  100% {
    opacity: 0;
    -o-transformm:scale(1);    
  }
}
 
@-moz-keyframes slideShow {
   0% {
    opacity: 0;
    -moz-transform:scale(1);
  }
  4% {
    opacity: 1
  }
  24% {
    opacity: 1;    
  }
  28% {
    opacity: 0;
    -moz-transform:scale(1.1);
  }
  100% {
    opacity: 0;
    -moz-transformm:scale(1);    
  }
}
 
@-webkit-keyframes slideShow {
  0% {
    opacity: 0;
    -webkit-transform:scale(1);
  }
  4% {
    opacity: 1
  }
  24% {
    opacity: 1;    
  }
  28% {
    opacity: 0;
    -webkit-transform:scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transformm:scale(1);    
  }
}

</style>

A nemuzes proste poslat link na stranku? Tohle je html, css, ale nemas tam ten js, ktery dela celou tu galerii. normalne to dej treba do pomocne slozky x/ treba.

Aha. Ono tam vic neni, js. Vymozenosti css3. Pridal jsem do slozky nejaky-obrazek.jpg a ta galerie mi normalne funguje. I vice obrazku. Firefox 58.0.2

gal/gal.htm
gal/0.jpg
gal/1.jpg
gal/2.jpg
gal/3.jpg
...
A opravil to samozrejme v css
background: url(0.jpg) no-repeat center center;
...

Mě se to totiž také v pohodě zobrazuje, ale mám problém s tím, že na posledním slidu se to jakoby zasekne a pak se to rozjede. Prostě to všechno neproběhne ve stejných intervalech.

A jo :) Ve FF, IE, Edge mi to funguje pres file:///C:/x/gal/gal.htm spravne. Abych nemusel cekat, zmensil jsem pocet obrazku na pic-3 a upravil cas figure

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation*/
  
  animation: slideShow 12s linear infinite 0s;
  -o-animation: slideShow 12s linear infinite 0s;
  -moz-animation: slideShow 12s linear infinite 0s;
  -webkit-animation: slideShow 12s linear infinite 0s;
}
...
.pic-3 {
...

Tak ještě jednou děkuji za tvůj čas, co jsi tomu věnoval. Mě by se spíše hodilo vědět, jestli to někdo bezchybně zprovoznil u třeba těch deseti obrázků tak, aby všechny proběhly ve zvolených intervalech a nezaseklo se to na posledním.

Mě to totiž u menšího počtu taky proběhne v pohodě, nebo to aspoň na pohled vypadá na stejné intervaly, ale právě já bych potřeboval vědět, jestli to funguje i pro více snímků bez problémů nebo jak to opravit. Zkouším to na stránce, kde mám v <body> jenom ten kód, co jsem dal sem, takže to nic jiného nemůže ovlivňovat....

Googlením jsem našel třeba toto http://abc-house.jp/assets/templates/new/slide4/index.html a tam se ze zdrojového kódu zdá, že má asi podobný problém a tak je tam nastaven rovnou delší čas na celou slideshow, když se počítá s tím, že ten poslední bude trvat déle než se to zase přepne za první.