Autor Zpráva
tomasz
Profil *
#1 · Zasláno: 29. 2. 2024, 10:45:37
Odpovědět Citovat
dobrý den
mám na stránkach prolinání v hlavičce 5-ti fotek, cesta k fotkám je jasná 
<div id="prolinani">
            <!--cesta fotografii k prolinani fotek, + pořadí prolínaní-->
            <img src="images/prolinani-5.jpg" style="object-position: 50% 63%;" alt="Background image" fetchpriority="high">
            <img src="images/prolinani-6.jpg" style="object-position: 50% 66%;" alt="Background image" fetchpriority="auto">
            <img src="images/prolinani-3.jpg" style="object-position: 50% 60%;" alt="Background image" fetchpriority="auto">
            <img src="images/prolinani-2.jpg" style="object-position: 50% 66%;" alt="Background image" fetchpriority="auto">
            <img src="images/prolinani-1.jpg" style="object-position: 50% 66%;" alt="Background image" fetchpriority="auto">
        </div>

v style.css pak mám další kod, 
@keyframes headerfotoanimation1{
    0%    { opacity: 1; }
    18%    { opacity: 1; }
    20%    { opacity: 0; }
    38%    { opacity: 0; }
    40%    { opacity: 0; }
    58%    { opacity: 0; }
    60%    { opacity: 0; }
    78%    { opacity: 0; }
    80%    { opacity: 0; }
    98%    { opacity: 0; }
    100%{ opacity: 1; }
}
@keyframes headerfotoanimation2{
    0%    { opacity: 0; }
    18%    { opacity: 0; }
    20%    { opacity: 1; }
    38%    { opacity: 1; }
    40%    { opacity: 0; }
    58%    { opacity: 0; }
    60%    { opacity: 0; }
    78%    { opacity: 0; }
    80%    { opacity: 0; }
    98%    { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes headerfotoanimation3{
    0%    { opacity: 0; }
    18%    { opacity: 0; }
    20%    { opacity: 0; }
    38%    { opacity: 0; }
    40%    { opacity: 1; }
    58%    { opacity: 1; }
    60%    { opacity: 0; }
    78%    { opacity: 0; }
    80%    { opacity: 0; }
    98%    { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes headerfotoanimation4{
    0%    { opacity: 0; }
    18%    { opacity: 0; }
    20%    { opacity: 0; }
    38%    { opacity: 0; }
    40%    { opacity: 0; }
    58%    { opacity: 0; }
    60%    { opacity: 1; }
    78%    { opacity: 1; }
    80%    { opacity: 0; }
    98%    { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes headerfotoanimation5{
    0%    { opacity: 0; }
    18%    { opacity: 0; }
    20%    { opacity: 0; }
    38%    { opacity: 0; }
    40%    { opacity: 0; }
    58%    { opacity: 0; }
    60%    { opacity: 0; }
    78%    { opacity: 0; }
    80%    { opacity: 1; }
    98%    { opacity: 1; }
    100%{ opacity: 0; }
}
#header img{
    opacity: 0;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    object-fit: cover;
    object-position: 50% 66%; /* je-li třeba useknout obrázek, usekni špíš střechu */
}
#header img:first-child{
    opacity: 1;
    animation-name: headerfotoanimation1;
}
#header img:nth-child(2){
    animation-name: headerfotoanimation2;
}
#header img:nth-child(3){
    animation-name: headerfotoanimation3;
}
#header img:nth-child(4){
    animation-name: headerfotoanimation4;
}
#header img:nth-child(5){
    animation-name: headerfotoanimation5;
}

pokud ale kliknu na cokoliv z menu, tak prolinani se vždy vráti od prvního nastaveného obrázku. Lze to nějak změnit, aby prolinání nereagovalo na žádné kliknutí? aby si jelo nezávisle dál.....
P.S. kdysi mi web dělal jeden borec na míru dle mých požadavků, už se ale bohužel odmlčel... :-(

děkuji za rady
Kajman
Profil
#2 · Zasláno: 29. 2. 2024, 12:08:34 · Upravil/a: Kajman o minutu později
Odpovědět Citovat
Kliknutím na menu se přesunete na jinou stránku (jinou url), v takovém případě se stránka načte znovu a není divné, že se animace dělá od začátku.
Kcko
Profil
#3 · Zasláno: 29. 2. 2024, 12:59:50
Odpovědět Citovat
Standardní chování, přesně jak popisuje Kajman.
Pokud by se to mělo chovat jinak, tak by bylo si někam uložit stav slideru, (cookies, local/sesion storage) a na další stránce (nový request) zobrazit slider ve stavu, kde skončil na předchozí stránce.
Bez JavaScriptu to neuděláte.
RastyAmateur
Profil
#4 · Zasláno: 29. 2. 2024, 13:03:33
Odpovědět Citovat
A nebo alternativně (a mnohem jednodušeji): jednoduše zamíchat pořadí fotek. To lze udělat jednoduše v PHP šabloně.
Tomasz
Profil *
#5 · Zasláno: 29. 2. 2024, 14:36:37 · Upravil/a: Tomasz o 4 minuty později
Odpovědět Citovat
RastyAmateur:
Poradite mi prosim jak na to?


nebo mě ještě napadlo, kdyby místo prolinani 5 fotek byla jedna gif.animace, To by se chovalo stejně = pořád od začátku gif animace?
RastyAmateur
Profil
#6 · Zasláno: 29. 2. 2024, 15:23:46
Odpovědět Citovat
Tomasz:
„Poradite mi prosim jak na to?“
No, jako je to jeden příkaz, který jde hodně snadno vygooglit... 
<div id="prolinani">
  <!--cesta fotografii k prolinani fotek, + pořadí prolínaní-->  
  <?php
    # Nastavime fotografie
    $photos = array(
      '<img src="images/prolinani-5.jpg" style="object-position: 50% 63%;" alt="Background image">',
      '<img src="images/prolinani-6.jpg" style="object-position: 50% 66%;" alt="Background image">',
      '<img src="images/prolinani-3.jpg" style="object-position: 50% 60%;" alt="Background image">',
      '<img src="images/prolinani-2.jpg" style="object-position: 50% 66%;" alt="Background image">',
      '<img src="images/prolinani-1.jpg" style="object-position: 50% 66%;" alt="Background image">',
    );
    
    # Nahodne je promichame
    shuffle($photos);
    
    # A vypiseme
    foreach ($photos as $photo) {
      echo $photo;
    }
  ?>
</div>

„nebo mě ještě napadlo, kdyby místo prolinani 5 fotek byla jedna gif.animace, To by se chovalo stejně = pořád od začátku gif animace?“
Ano, ta GIF animace by šla taky od začátku.
anonym_
Profil *
#7 · Zasláno: 29. 2. 2024, 17:20:13 · Upravil/a: anonym_ o minutu později
Odpovědět Citovat
Tomasz:
Můžeš si měřit, jak dlouho člověk na stránce je, tím zjistíš, na kolikátém slidu a tím slidem začít na nové stránce. Úplná návaznost, že by se na nové stránce zobrazil slide třeba jen poslední sekundu (protože už byl většinu času na předchozí stránce), je zbytečně složitá a asi k ničemu. Kromě toho budou případy, kdy se načte nová stránka a slide by jen problikl, protože by mu zbylo málo času.

Spíše než nad tímto bych přemýšlel nad tím, proč tam ten slider nutně musí být. Proč mi na telefonu zabírá 80% plochy viewportu při portrait, 120% při landscape při každém prokliku. Vlastně ani nevím, proč tam je... je to objekt, o kterém se hovoří? Je pro mě při každédm prokliku důležité vidět, jak vypadá, nebyly by pro mě důležitější psané informace? Místo toho bych raději zapracoval na menu, aby bylo horizontální a nezabíralo nesmyslné místo.


Pardon, není to přímá rada na ten slider, spíše technická rada, jak a proč se tohoto nemotorného prvku zbavit. Nicméně radu i na ten slider máš, jen to nebudu psát za tebe.
Tomasz
Profil *
#8 · Zasláno: 29. 2. 2024, 17:28:15 · Upravil/a: Tomasz o 5 minut později
Odpovědět Citovat
anonym:
děkuji za rady, nicméně menu horizontální mám


RastyAmateur:
děkuji
Kajman
Profil
#9 · Zasláno: 29. 2. 2024, 19:45:25 · Upravil/a: Kajman o 30 minut později
Odpovědět Citovat
Tomasz:

Já tedy vidím menu horizontální - jednotlivé položky jsou jedna pod druhou.

Osobně bych na každou stránku dal klidně jiný obrázek napevno místo náhodného míchání. A bez prolínání.

Pokud je nutné prolínání, tak by start mohl být posunut podle počtu zbytku milisekund po dělění timestampu délkou celé animace. Posutí startu by možná šlo záporným animation-delay nastaveným buď pomocí php (čas serveru) - čímž přijdete o možnost zapnutí cache nebo javascriptem (čas klienta).

Edit: javascriptem by to bylo pro 30s asi něco takového 
document.head.appendChild(document.createElement("style")).innerHTML='#header img {animation-delay:-'+Date.now()%(1000*30)+'ms}';
Časová prodleva: 2 měsíce

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0