Comment avoir l'effet de sélection sans utiliser la balise <marquee> (avec CSS, JavaScript et jQuery)

Faire l'effet de sélection avec des animations CSS (horizontalement et verticalement)
Faire l'effet de chapiteau avec JavaScript
Faire le plugin de défilement de texte avec jQuery

La balise <marquee> n'est plus utilisée. Il s'agit d'un élément HTML ancien et non standard, utilisé pour créer automatiquement le texte ou l'image à faire défiler vers le haut, le bas, la gauche ou la droite de la page Web..

De nos jours, les gens n'aiment pas du tout l'utiliser. On considère qu'il n'est ni nécessaire ni avantageux de faire défiler le texte en permanence. Personne ne voudrait lire un texte qui ne reste pas silencieux.

Cependant, si vous avez besoin de l’effet de sélection, trouvez ci-dessous des solutions alternatives avec CSS, JavaScript et jQuery.

Faire l'effet de sélection avec des animations CSS (horizontalement et verticalement)

Utilisez les propriétés CSS animation, transform avec la règle @keyframes pour avoir l'effet de sélection sans utiliser la balise <marquee>.

Pour le texte déroulant horizontalement, définissez la valeur "marquee 10s linear infinite;" pour la propriété animation (changez les secondes selon votre besoins). Puis, définissez l'animation pour la bouger:

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

Maintenant voyons à quoi ressemblera le texte défilant de droite à gauche:

Exemple

<!DOCTYPE html>
<html>
  <title>Titre du document</title>
  <head>
    <style>
      div {
        background-color: #1c87c9;
        color: #fff;
        padding: 5px;
      }
      p {
        -moz-animation: marquee 10s linear infinite;
        -webkit-animation: marquee 10s linear infinite;
        animation: marquee 10s linear infinite;
      }
      @-moz-keyframes marquee {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      @-webkit-keyframes marquee {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      @keyframes marquee {
        0% {
          -moz-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          transform: translateX(100%);
        }
        100% {
          -moz-transform: translateX(-100%);
          -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
        }
      }
    </style>
  </head>
  <body>
    <div>
      <p>C'est un texte défilant horizontalement sans la balise marquee.</p>
    </div>
  </body>
</html>

Essayez-vous-même!

Ensuite, faisons le texte défiler verticalement. Dans ce cas, on a besoin de changer les valeurs de la propriété transform comme ça:

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100%);
  }
}

Notre texte défilant en bas en haut sera comme ça:

Exemple

<!DOCTYPE html>
<html>
  <title>Titre du document</title>
  <head>
    <style>
      div {
        background-color: #1c87c9;
        color: #fff;
        text-align: center;
      }
      p {
        padding-top: 100%;
        -moz-animation: marquee 5s linear infinite;
        -webkit-animation: marquee 5s linear infinite;
        animation: marquee 5s linear infinite;
      }
      @-moz-keyframes marquee {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(0, -100%);
        }
      }
      @-webkit-keyframes marquee {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(0, -100%);
        }
      }
      @keyframes marquee {
        0% {
          -moz-transform: translate(0, 0);
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
        }
        100% {
          -moz-transform: translate(0, -100%);
          -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
        }
      }
    </style>
  </head>
  <body>
    <div>
      <p>C'est un texte défilant verticalement sans la balise marquee.</p>
    </div>
  </body>
</html>

Essayez-vous-même!

Vous pouvez utiliser le sélecteur :hover avec la propriété animation-play-state pour arrêter le défilement du texte en survol. Définissez la valeur "paused" pour animation-play-state .

:hover {
  animation-play-state: paused;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .marquee {
        margin: 0 auto;
        width: 600px;
        height: 30px;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
      }
      .marquee:before,
      .marquee:after {
        position: absolute;
        top: 0;
        width: 50px;
        height: 30px;
        content: "";
        z-index: 1;
      }
      .marquee:before {
        left: 0;
        background: linear-gradient(to right, #ccc 10%, transparent 80%);
      }
      .marquee:after {
        right: 0;
        background: linear-gradient(to left, #ccc 10%, transparent 80%);
      }
      .marquee__content {
        width: 300%;
        display: flex;
        line-height: 30px;
        animation: marquee 10s linear infinite forwards;
      }
      .marquee__content:hover {
        animation-play-state: paused;
      }
      .list-inline {
        display: flex;
        justify-content: space-around;
        width: 33.33%;
        /* reset list */
        list-style: none;
        padding: 0;
        margin: 0;
      }
      @keyframes marquee {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-66.6%);
        }
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="marquee__content">
        <ul class="list-inline">
          <li>Texte 1</li>
          <li>Texte 2</li>
          <li>Texte 3</li>
          <li>Texte 4</li>
          <li>Texte 5</li>
        </ul>
        <ul class="list-inline">
          <li>Texte 1</li>
          <li>Texte 2</li>
          <li>Texte 3</li>
          <li>Texte 4</li>
          <li>Texte 5</li>
        </ul>
        <ul class="list-inline">
          <li>Texte 1</li>
          <li>Texte 2</li>
          <li>Texte 3</li>
          <li>Texte 4</li>
          <li>Texte 5</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Essayez-vous-même!

Faire l'effet de sélection avec JavaScript

Ici vanilla JS est utilisé:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        font-family: sans-serif;
        font-weight: 700;
        height: 600vh;
        background: #d66d75;
        background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
      }
      .marquee {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
      }
      .marquee .inner {
        position: relative;
        width: 100%;
        display: flex;
        color: white;
        font-size: 8rem;
      }
      .marquee .inner > * {
        white-space: nowrap;
        padding: 0 4rem;
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="inner">
        <p>Bonjour, le monde des gens.</p>
      </div>
    </div>
    <script>
      function handleMarquee() {
        const marquee = document.querySelectorAll(".marquee");
        let speed = 4;
        let lastScrollPos = 0;
        let timer;

        marquee.forEach(function (el) {
          const container = el.querySelector(".inner");
          const content = el.querySelector(".inner > *");
          //Get total width
          const elWidth = content.offsetWidth;

          //Duplicate content
          let clone = content.cloneNode(true);
          container.appendChild(clone);

          let progress = 1;
          function loop() {
            progress = progress - speed;
            if (progress <= elWidth * -1) {
              progress = 0;
            }
            container.style.transform = "translateX(" + progress + "px)";
            container.style.transform += "skewX(" + speed * 0.4 + "deg)";

            window.requestAnimationFrame(loop);
          }
          loop();
        });

        window.addEventListener("scroll", function () {
          const maxScrollValue = 12;
          const newScrollPos = window.scrollY;
          let scrollValue = newScrollPos - lastScrollPos;

          if (scrollValue > maxScrollValue) scrollValue = maxScrollValue;
          else if (scrollValue < -maxScrollValue) scrollValue = -maxScrollValue;

          speed = scrollValue;

          clearTimeout(timer);
          timer = setTimeout(handleSpeedClear, 10);
        });

        function handleSpeedClear() {
          speed = 4;
        }
      }

      handleMarquee();
    </script>
  </body>
</html>

Essayez-vous-même!

Faire le plugin de défilement de texte avec jQuery

Utiliser jQuery est un autre moyen alternatif pour avoir le résultat de sélection. Apprenons comment utiliser ça pas à pas:

Inclure bibliothèque jQuery et Marquee.js en votre en-tête (header):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>

Inclure plugin d'atténuation de jQuery pour les options de l'atténuation:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

Mattre en place le balisage:

<div class="marquee">Quelque texte va ici.</div>

Appeler au plugin:

<script>
	$(function(){
		$('.marquee').marquee();		
	});
</script>

Définissez ces options si vous voulez réécrire les fonctionnalités initiales:

$(function(){
  $('.marquee').marquee({

  //Si vous voulez toujours animer avec jQuery
  allowCss3Support: true,

  //fonctionne quand allowCss3Support esr défini à true - pour la liste complète voyez http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
  css3easing: 'linear',

  //demande plugin d'atténuation jQuery. L'initiale 'linear'
  easing: 'linear',

  //pauser le temps avant l'animation suivante devient en milisecondes
  delayBeforeStart: 1000,
  //'left', 'right', 'up' or 'down'
  direction: 'left',

  //vrai ou faux- la sélection, doit-elle être dupliquée pour montrer un effet de continues flow
        duplicated: false,

  //vitesse en milisecondes de la sélection en milisecondes
  duration: 5000,

  //écart en pixels entre les tickers
  gap: 20,

  //en cycle pauser la sélection
  pauseOnCycle: false,

  //en survol pauser la sélection - utiliser plugin jQuery https://github.com/tobia/Pause
  pauseOnHover: false,

  ////la sélection est visible positionnée initialement à côté de la bordure suivante vers laquelle elle se déplacera
        startVisible: false
  
  });
});

Maintenant voyons à quoi cela ressemblera:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <div class="marquee">Quelque texte va ici.</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script>
      $(function () {
        $(".marquee").marquee({
          //Si vous vouler toujours animer avec jQuery
          allowCss3Support: true,

          //fonctionne quand allowCss3Support est définie à true - pour la liste complète voyez http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
          css3easing: "linear",

          //demande plugin d'atténuation jQuery. L'initial est 'linear'
          easing: "linear",

          //pauser le temps avant l'animation suivante devient en milisecondes
          delayBeforeStart: 1000,
          //'left', 'right', 'up' or 'down'
          direction: "left",

          //vrai ou faux- la sélection, doit-elle être dupliquée pour montrer un effet de continues flow
          duplicated: false,

          //vitesse en milisecondes de la sélection en milisecondes
          duration: 5000,

          //écart en pixels entre les tickers
          gap: 20,

          //sur cycle pauser la sélection
          pauseOnCycle: false,

          //en survol pauser la sélection - utiliser plugin  jQuery https://github.com/tobia/Pause
          pauseOnHover: false,

          //la sélection est visible positionnée initialement à côté de la bordure suivante vers laquelle elle se déplacera
          startVisible: false,
        });
      });
    </script>
  </body>
</html>

Essayez-vous-même!