Comment utiliser CSS pour créer un effet de barre d'affichage d'image à défilement transparent

Comment utiliser CSS pour créer une barre d'affichage d'images à défilement fluide

Avec le développement d'Internet, l'affichage d'images est devenu un élément essentiel de la conception de nombreux sites Web. L'effet de barre d'affichage d'image à défilement transparent peut attirer l'attention des utilisateurs et améliorer l'effet visuel et l'expérience utilisateur du site Web. Dans cet article, je vais vous présenter comment utiliser CSS pour obtenir un effet de barre d'affichage d'image à défilement transparent et fournir des exemples de code spécifiques.

L'effet de la barre d'affichage d'image à défilement transparent repose principalement sur les propriétés et la mise en page de l'animation CSS. Vous trouverez ci-dessous les étapes et l'exemple de code pour obtenir cet effet.

Première étape : écriture de la structure HTML

Tout d'abord, nous devons écrire la structure HTML pour accueillir les images et la zone d'affichage. Dans l'exemple, nous utilisons un élément div comme conteneur externe et un élément ul à l'intérieur comme conteneur pour l'affichage de l'image. Chaque élément li de l'élément ul est un élément d'image.

<div class="slideshow-container">
  <ul class="slideshow">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
    <!-- 更多图片项 -->
  </ul>
</div>

Étape 2 : Définir les styles CSS

Ensuite, nous devons définir les styles CSS pour la structure HTML et lui permettre d'obtenir un défilement transparent. Tout d’abord, nous devons styliser le conteneur et la zone d’affichage.

.slideshow-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slideshow {
  width: 100%;
  height: 100%;
  display: flex;
  animation: slide 10s infinite;
}

.slideshow li {
  flex-shrink: 0;
}

Dans l'exemple ci-dessus, nous définissons la largeur du conteneur à 100 % et masquons le contenu du débordement. La zone d'affichage est définie sur une largeur de 100 % et définie sur un élément de bloc en ligne pour obtenir une disposition horizontale des images. La zone d'affichage utilise la propriété d'animation CSS animation et définit le nom, la durée et la boucle infinie de l'animation.

Étape 3 : Ajouter du code JavaScript

Enfin, afin d'obtenir un effet de défilement transparent, nous devons utiliser JavaScript pour manipuler la position de l'image. Ce qui suit est un exemple de code simple qui obtient l'effet de défilement en modifiant la valeur gauche de la zone d'affichage.

function slideImages() {
  var slideshow = document.querySelector('.slideshow');
  var firstImage = slideshow.querySelector('li');
  firstImage.addEventListener('transitionend', resetImagePosition);

  function resetImagePosition() {
    firstImage.style.transition = 'none';
    firstImage.style.transform = 'translateX(0)';
    setTimeout(startSlide, 0);
  }

  function startSlide() {
    firstImage.removeEventListener('transitionend', resetImagePosition);
    firstImage.style.transition = 'transform 5s ease-in-out';
    firstImage.style.transform = 'translateX(-100%)';
  }

  startSlide();
}

slideImages();

Dans le code ci-dessus, nous obtenons d'abord les éléments de la zone d'affichage et les éléments de la première image, puis écoutons l'événement de fin d'animation de transition de la première image. Lorsque l'animation de transition se termine, nous obtenons un effet de défilement transparent en réinitialisant la position de l'image et en ajoutant une nouvelle animation de transition.

Ci-dessus sont les étapes spécifiques et les exemples de code pour utiliser CSS pour créer un effet de barre d'affichage d'image à défilement transparent. Vous pouvez le personnaliser et le modifier selon vos propres besoins pour obtenir un effet d'affichage d'image plus riche et plus diversifié. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!