Je construis une bannière à défilement infini avec HTML5 et CSS3. Mon code fonctionne mais il y a quelques petits décalages.. Je voudrais un effet de défilement fluide, c'est plus agréable pour l'utilisateur.

Il doit y avoir un moyen de le rendre plus fluide, mais je ne sais pas comment le faire. Quoi qu'il en soit, ajouter un effet fluide à mon animation en utilisant CSS ? Ou avec Javascript ?

Voici mon code de démonstration:

.photobanner {
  position: relative;
  left: -500px;
  height: 233px;
  width: 4550px;
  margin-bottom: 30px;
}

.photobanner img {
  margin: 0px 25px;
  box-shadow: 2px 2px 8px #8a8a8a;
}

.first {
  -webkit-animation: bannermove 180s linear infinite;
  -moz-animation: bannermove 180s linear infinite;
  -ms-animation: bannermove 180s linear infinite;
  -o-animation: bannermove 180s linear infinite;
  animation: bannermove 180s linear infinite;
}

@keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-ms-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}
<div class="photobanner">
  <img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>
0
Rubyx 14 mars 2019 à 14:00

2 réponses

Meilleure réponse

Le retard est causé par une différence d'alignement de l'image entre le début et la fin de l'animation CSS.

Cela pourrait être difficile à aligner, donc lorsque je fais ce genre d'animation, je préfère utiliser javascript + requestAnimationFrame

const speed = 2; // 2 pixels per frame at 60 frames per second
const banner = document.getElementsByClassName('photobanner')[0];
// build images array
let images = [
...banner.getElementsByTagName('img')
];

// initialize images positions
let rects = images.map((img, index) => {
  const style = getComputedStyle(img);
  const rect = {
    left: index * (350 + 50),
    top: 0,
    width: 350,
    height: parseInt(style.height, 10)
  };
  return rect;
});

function animate() {
  const l = images.length;
  for (let i = 0; i < l; i++) {
    const img = images[i];
    const rect = rects[i];
    rect.left -= speed;
    if (rect.left + rect.width < 0) {
        // this image if fully overflowing left, put it at the end of the image list both in position and in images and rects
        const lastRect = rects[rects.length - 1];
        rect.left = lastRect.left + lastRect.width + 50;
        images = images.slice(1, l);
        images.push(img);
        rects = rects.slice(1, l);
        rects.push(rect);
        i--;
    }
    // change the actual image style according to new rect value
    img.style.left = rect.left + 'px';
  };
  requestAnimationFrame(animate);
}

animate();
.photobanner {
      position: relative;
      height: 233px;
      width: 100%;
      margin-bottom: 30px;
    }

    .photobanner img {
      top: 0px;
      width: 350px;
      box-shadow: 2px 2px 8px #8a8a8a;
      position: absolute;
    }
<div class="photobanner">
  <img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>
1
remix23 14 mars 2019 à 14:06

Vous pouvez utiliser JavaScript pour de meilleurs résultats

var e = document.getElementById("photobanner");
var x = 0;

function moveBanner() {
  x--;
  e.style.marginLeft = x + "px";

}

setInterval(moveBanner, 60);
.photobanner {
  position: relative;
  left: -500px;
  height: 233px;
  width: 4550px;
  margin-bottom: 30px;
}

.photobanner img {
  margin: 0px 25px;
  box-shadow: 2px 2px 8px #8a8a8a;
}
<div class="photobanner" id="photobanner">
  <img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>
0
xTrimy 14 mars 2019 à 14:25