CSS Slideshow s přibližovacím efektem – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Marty
~ Anonymní uživatel
41 příspěvků
28. 2. 2018   #1
-
0
-

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.

Nahlásit jako SPAM
IP: 93.93.33.–
peter
~ Anonymní uživatel
3499 příspěvků
28. 2. 2018   #2
-
0
-

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"
Nahlásit jako SPAM
IP: 2001:718:2601:258:3c62:8d...–
Marty
~ Anonymní uživatel
41 příspěvků
28. 2. 2018   #3
-
0
-

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>
Nahlásit jako SPAM
IP: 93.93.33.–
peter
~ Anonymní uživatel
3499 příspěvků
1. 3. 2018   #4
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:258:2c6e:71...–
peter
~ Anonymní uživatel
3499 příspěvků
1. 3. 2018   #5
-
0
-

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

Nahlásit jako SPAM
IP: 2001:718:2601:258:2c6e:71...–
peter
~ Anonymní uživatel
3499 příspěvků
1. 3. 2018   #6
-
0
-

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;
...

Nahlásit jako SPAM
IP: 2001:718:2601:258:2c6e:71...–
Marty
~ Anonymní uživatel
41 příspěvků
1. 3. 2018   #7
-
0
-

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.

Nahlásit jako SPAM
IP: 93.93.33.–
peter
~ Anonymní uživatel
3499 příspěvků
2. 3. 2018   #8
-
0
-

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 {
...
Nahlásit jako SPAM
IP: 2001:718:2601:258:4dbc:38...–
Marty
~ Anonymní uživatel
41 příspěvků
2. 3. 2018   #9
-
0
-

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í.

Nahlásit jako SPAM
IP: 93.93.33.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 37 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý