Créez un chapiteau à défilement infini avec HTML et CSS

L'ajout d'animations à votre site Web peut rendre votre site Web plus interactif et merveilleux. L'un des meilleurs moyens d'y parvenir est de créer un chapiteau de défilement : une animation très élégante qui glisse sur un contenu fluide comme des compétences ou des outils, faisant ainsi ressortir votre site Web.

Dans ce tutoriel, je vais vous montrer comment créer un chapiteau à défilement infini en utilisant uniquement HTML et CSS.

Qu'est-ce qu'un chapiteau ?

Un chapiteau de défilement est une animation simple où le contenu se déplace sans fin sur l'écran. Cela peut être utilisé pour présenter du texte comme des compétences, des technologies et des fonctionnalités.

Codons-le

Structure HTML

Créez d'abord la structure html

<div>



<p>Each  contains a skill or item, and the two identical  blocks ensure continuous scrolling.

</p><p><strong>CSS</strong></p>

<p>Now add the css style for scrolling<br>
</p>

<pre class="brush:php;toolbar:false">* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #161616;
  }

  .scroll {
    position: relative;
    display: flex;
    width: 700px;
    overflow: hidden;

      -webkit-mask-image: linear-gradient(90deg, transparent, #fff 30%,
    #fff 70%, transparent);

  }

  .scroll div {
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
  }

  .scroll div:nth-child(2) {
    animation: animate2 var(--t) linear infinite;
  }

  @keyframes animate {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes animate2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200%);
    }
  }

  .scroll div span {
    display: inline-flex;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    background: #333;
    color: #fff;
    transition: 0.5s;
  }

  .scroll div span:hover {
    background: #f52789;
    cursor: pointer;
  }

Comment ça marche

Animation fluide :

La règle @keyframes spécifie l'effet de défilement fluide, et la propriété d'animation l'applique au

.

Bouclage transparent :

Deux

sections identiques créent l'illusion d'un défilement sans fin en commençant un bloc à mi-chemin.

Effet de survol :

Lorsque vous survolez un élément, son arrière-plan devient rose vif (#f52789).

Personnalisez votre chapiteau

Modifiez les éléments : mettez à jour les balises pour afficher votre propre contenu, comme des services, des outils ou des témoignages.

Ajuster la vitesse : utilisez la variable CSS --t pour contrôler la durée de l'animation. Une valeur plus petite le rend plus rapide.

Changer les couleurs : personnalisez la couleur de l'arrière-plan et du texte en fonction de votre thème sur le site Web.

Conclusion

Un chapiteau de défilement est une fonctionnalité simple mais puissante pour rendre votre site Web attrayant. Ce didacticiel vous apprendra comment créer facilement un chapiteau de défilement adapté à votre contenu et à vos préférences de conception. Essayez ceci.

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!