[Résolu] Fondu-enchaîner, css poussif.

Bonjour !

J'ai écrit :

function fonduenchainer()
{
let laps=50, delta=1/50; if(!d.sens) d.sens=1; if(!d.opacite) d.opacite=0;

if(d.opacite>=0&&d.opacite<=1)
{
if(d.opacite==0||d.opacite==1) images[d.opacite].src=imxdir+(d.curseur=files.abstirer(d.curseur));

images[0].style.opacity=d.opacite; 
images[1].style.opacity=Math.round(100*(1-d.opacite))/100; 

d.opacite=Math.round(100*(d.opacite+=delta*d.sens))/100;
}

else { d.opacite=d.opacite<0?0:1; d.sens*=-1; laps=2500; }

setTimeout(fonduenchainer,laps);
}

Cela fonctionne plutôt bien, voir : https://www.jerome-turpin-peintre.net/?transe-hypnotique
Mais, malgré tout, le procès est, insuffisamment, fluide. Une idée ?

Salut !

Et pourquoi ne pas juste gérer un changement de classe en js et laisser le fade au CSS pour qu'il soit fluide ?

<img class="img show" src="https://picsum.photos/id/237/200" alt="">
<img class="img" src="https://picsum.photos/id/236/200" alt="">
<img class="img" src="https://picsum.photos/id/235/200" alt="">
<img class="img" src="https://picsum.photos/id/234/200" alt="">
<img class="img" src="https://picsum.photos/id/233/200" alt="">

img {
  position: absolute;
  top: 0;
  left: 0;
  opacity:0;
  transition: opacity 2s;
}

img.show {
  opacity: 1;
}

images = document.getElementsByClassName('img');
counter = 0;

setInterval(myTimer, 4000);

function myTimer() {
  console.log (counter);
	document.getElementsByClassName('show')[0].classList.remove('show');
	images[counter].classList.add('show');
  if(counter < images.length - 1) {
  	counter = counter + 1;
  } else {
  	counter = 0;
  }
}

https://jsfiddle.net/dw213yf0/6/


Bonne soirée

Bonjour,

Je suis d'accord avec _laurent. Mieux vaut faire la transition sur l'opacité avec du css et ne changer que le css avec javascript. Et sa solution est très bien.

Au cas où, voici une autre solution (sensiblement plus sophistiquée certes) que j'ai adapté d'un code que j'avais déjà en magasin : https://jsfiddle.net/parsimonhi/gqjo2ry5/

Dans cette version, les images sont téléchargées au fur et à mesure et non dès l'affichage initiale de la page. On a par ailleurs un fond flou assorti aux images (ça permet d'avoir un fond plus sympa qu'une couleur uniforme par toujours du meilleur effet selon l'image affichée), et une icône qui apparait quand le téléchargement d'une image est un peu lent. Si on ne veut pas du fond flou et/ou si on ne veut pas de l'icône de téléchargement, on peut pas mal simplifier ce code.

Amicalement,

ou en css

.div1, .div2, .div3, .div4 {
position: absolute;
width: 300px;
height: 200px;
opacity: 0;
top: 0;
animation: fondu 1s linear forwards;
}
.div1 {
z-index: 1;
background-color: #F00;
}
.div2 {
z-index: 2;
background-color: #FF0;
animation-delay: 3s;
}
.div3 {
z-index: 3;
background-color: #F0F;
animation-delay: 6s;
}
.div4 {
z-index: 4;
background-color: #0FF;
animation-delay: 9s;
}
    @keyframes fondu {
      0% {opacity: 0;}
    100% {opacity: 1;}
}

et html

<div class="div1"></div>
    <div class="div2"></div>
        <div class="div3"></div>
            <div class="div4"></div>

voir ici:

fondu

Bonjour, les Alsanautes !!!

Et merci, sincèrement, de chacune de vos contributions.

Je crois avoir débusqué le bug. Une séquence fautive :
transition:1s;
était présente dans mon CSS. Cette séquence éradiquée, https://www.jerome-turpin-peintre.net/?transe-hypnotique semble fonctionner de manière satisfaisante, fluide.

Bonne journée !!!

Bonsoir,

fort de vos suggestions, j'ai cherché une solution fondée d'abord sur css.

Voici le terrain :

<?php
  
$style = "
main { position:relative; } 
main img { position:absolute; top:0; cursor:pointer; left:0; right:0; height:70vh; transition:opacity 6s; opacity:0; }
" ;

$script = "
files=['".implode( APOS.V.APOS, $_SESSION["files"] )."'];
for(let n=0; n<2; n++) main.append(new Image); let images=main.tax('img');

images[1].on('click',
()=>images[images[0].css('opacity',true)>.5?0:1].src.filenom_extraire().file2json(sidesafficher)).title='voir la fiche';
cssfondencher();
" ;
 
?>

Et la fonction JS :

function cssfondencher()
{
let opacite=images[0].css('opacity',true);
if(!images[1].src) images[1].src=imxdir+(d.curseur=files.abstirer(d.curseur)); 

if(images[opacite]) images[opacite].on('load',()=>
{
images[0].css('opacity',opacite==0?1:0);
images[1].css('opacity',opacite);
setTimeout(cssfondencher,7000);
}).src=imxdir+(d.curseur=files.abstirer(d.curseur));
}

https://www.jerome-turpin-peintre.net/?css-fondench

Bonne soirée.

Salut, les petits génies !!!

Voici ma dernière version de la page de fondu-enchaîné :

<?php
  
$style = "
main { position:relative; cursor:pointer; } 
main img { position:absolute; top:0; left:0; right:0; height:70vh; transition:opacity 5s; opacity:0; }
" ;

$script = "
files=['".implode( APOS.V.APOS, $_SESSION["files"] )."'];

main.on('click',
()=>images[images[0].css('opacity',true)>.5?0:1].src.filenom_extraire().file2json(sidesafficher)).title='voir la fiche';

for(let n=0; n<2; n++)
{
let image=new Image;

image.on('load',()=>
{
image.style.opacity=1;
(lautre=images[n==0?1:0]).style.opacity=0;
setTimeout(()=>lautre.src=imxdir+(d.curseur=files.abstirer(d.curseur)),6666);
});

main.append(image); 
}

let images=main.tax('img');
images[0].src=imxdir+(d.curseur=files.tirer()); 
" ;
 
?>

https://www.jerome-turpin-peintre.net/?css-fondench