Les animations JS sur un site, c'est vraiment utile pour la conversion?

Script
1

Je travaille actuellement sur une refonte du site web de notre entreprise. Notre objectif est d’augmenter l’engagement des utilisateurs et la durée de leur visite. Je pense que l’intégration d’animations d’entrée pour les éléments de la page pourrait rendre notre site plus dynamique et engageant. Je suis donc à la recherche de conseils et d’exemples réussis dans ce domaine. Qu’en pensez-vous ? Des animations d’entrée pour les éléments de ma page : ça rend le site plus cool, non ?

2 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animations d'entrée</title>
<style>
  /* Animations CSS */

  /* Fade In */
  .fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Slide In From Left */
  .slide-in-left {
    transform: translateX(-100%);
    animation: slideInLeft 0.5s ease forwards;
  }

  @keyframes slideInLeft {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }

  /* Scale In */
  .scale-in {
    transform: scale(0);
    animation: scaleIn 0.5s ease forwards;
  }

  @keyframes scaleIn {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }

  /* Rotate In */
  .rotate-in {
    transform: rotate(-180deg);
    animation: rotateIn 0.5s ease forwards;
  }

  @keyframes rotateIn {
    from {
      transform: rotate(-180deg);
    }
    to {
      transform: rotate(0);
    }
  }

  /* Bounce In */
  .bounce-in {
    transform: translateY(-100%);
    animation: bounceIn 0.5s ease forwards;
  }

  @keyframes bounceIn {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }

</style>
</head>
<body>

<h2>Animations CSS :</h2>
<div class="fade-in">Fade In</div>
<div class="slide-in-left">Slide In From Left</div>
<div class="scale-in">Scale In</div>
<div class="rotate-in">Rotate In</div>
<div class="bounce-in">Bounce In</div>

<h2>Animations JavaScript :</h2>
<script>
  // Fade In (avec JavaScript)
  const fadeInElement = document.createElement('div');
  fadeInElement.textContent = 'Fade In (JavaScript)';
  fadeInElement.style.opacity = 0;
  fadeInElement.style.transition = 'opacity 1s ease';
  document.body.appendChild(fadeInElement);
  setTimeout(() => {
    fadeInElement.style.opacity = 1;
  }, 100);

  // Slide In From Top (avec JavaScript)
  const slideInElement = document.createElement('div');
  slideInElement.textContent = 'Slide In From Top (JavaScript)';
  slideInElement.style.transform = 'translateY(-100%)';
  slideInElement.style.transition = 'transform 0.5s ease';
  document.body.appendChild(slideInElement);
  setTimeout(() => {
    slideInElement.style.transform = 'translateY(0)';
  }, 100);

  // Scale In (avec JavaScript)
  const scaleInElement = document.createElement('div');
  scaleInElement.textContent = 'Scale In (JavaScript)';
  scaleInElement.style.transform = 'scale(0)';
  scaleInElement.style.transition = 'transform 0.5s ease';
  document.body.appendChild(scaleInElement);
  setTimeout(() => {
    scaleInElement.style.transform = 'scale(1)';
  }, 100);

  // Rotate In (avec JavaScript)
  const rotateInElement = document.createElement('div');
  rotateInElement.textContent = 'Rotate In (JavaScript)';
  rotateInElement.style.transform = 'rotate(-180deg)';
  rotateInElement.style.transition = 'transform 0.5s ease';
  document.body.appendChild(rotateInElement);
  setTimeout(() => {
    rotateInElement.style.transform = 'rotate(0)';
  }, 100);

  // Bounce In (avec JavaScript)
  const bounceInElement = document.createElement('div');
  bounceInElement.textContent = 'Bounce In (JavaScript)';
  bounceInElement.style.transform = 'translateY(-100%)';
  bounceInElement.style.transition = 'transform 0.5s ease';
  document.body.appendChild(bounceInElement);
  setTimeout(() => {
    bounceInElement.style.transform = 'translateY(0)';
  }, 100);
</script>

</body>
</html>
3

  1. Animate.css: C’est une bibliothèque de CSS qui permet d’ajouter facilement des animations à votre site web. C’est gratuit et facile à utiliser. https://animate.style/

  2. AOS - Animate On Scroll: Il s’agit d’une bibliothèque JavaScript gratuite qui permet d’animer des éléments à mesure qu’ils apparaissent dans la fenêtre de vision lors du défilement. https://michalsnik.github.io/aos/

  3. GreenSock (GSAP): GSAP est une bibliothèque JavaScript robuste et puissante pour l’animation. Elle est gratuite pour une utilisation non commerciale. Elle offre un contrôle précis des animations et est compatible avec toutes les principales bibliothèques JavaScript. https://greensock.com/gsap/

  4. ScrollReveal: Il s’agit d’une bibliothèque JavaScript gratuite qui offre une animation de défilement simple mais puissante. Vous pouvez animer des éléments à mesure qu’ils apparaissent dans la fenêtre de vision. https://scrollrevealjs.org/

  5. WOW.js: C’est une bibliothèque JavaScript gratuite qui révèle des animations CSS lors du défilement. Elle fonctionne parfaitement avec Animate.css. https://wowjs.uk/

  6. Mo.js: C’est une bibliothèque d’animation JavaScript orientée mouvement. Elle est gratuite et offre des animations de haute qualité. http://mojs.io/

  7. Velocity.js: C’est une bibliothèque d’animation JavaScript rapide qui fonctionne comme jQuery, mais sans la nécessité de jQuery. Elle est gratuite. http://velocityjs.org/

  8. Anime.js: C’est une bibliothèque JavaScript légère pour créer des animations. Elle est gratuite et offre une syntaxe simple et claire pour créer des animations complexes. https://animejs.com/

  9. Typed.js: C’est une bibliothèque JavaScript gratuite qui crée un effet de machine à écrire. C’est un excellent moyen d’ajouter de l’animation à votre site. https://mattboldt.com/demos/typed-js/

  10. Hover.css: Il s’agit d’une collection de CSS pour les effets de survol. Il est gratuit et peut être utilisé pour animer des boutons, des logos, des SVG, des images de produits, etc. http://ianlunn.github.io/Hover/