Animations - Replay - Artboard & Play-Pause Vidéo au Hover

Détails du Module

Avec ce Replay d'un Live Youtube, je vous montre pas à pas comment recréer un site Webflow moderne et interactif, à l’image de ce projet, intégrant un artboard à découvrir en déplaçant le curseur de la souris.

Solutions

L'alliance de ces solutions nous permettra de créer une structure sans coder et de l'animer avec un comportement spécifique grâce au Javascript.

• Webflow
• Système IX2.0
• Javascript

  Maîtrise

  Avec ce module, vous apprendrez à :
• Importer et configurer une vidéo HTML5 en arrière-plan
• Créer une animation Mouse Based Animation
• Jouer une vidéo au survol du curseur
• Intégrer du Custom Code directement dans Webflow
• Ajouter des animations et effets subtils pour améliorer l'expérience utilisateur
• Optimiser le site pour une performance fluide et une navigation intuitive
  À la fin de ce tutoriel, vous serez capable de maîtriser les bases des interactions vidéo sur Webflow et de créer vos propres interfaces immersives.

  Custom Code

  Le CustomCode nécessaire est disponible ci-dessous, et également dans les Paramètres de la Page du projet Webflow.

  Structure du Code

  Code à Copier/Coller dans les Paramètres de la Page.
  ```

  ### Explication du Code
  **Contrôle de vidéos au survol de la souris**
  Ce script JavaScript a pour but de gérer automatiquement la lecture de vidéos intégrées dans une page web, en fonction des mouvements de la souris de l’utilisateur. Il s’applique à tous les éléments HTML contenant une vidéo et ayant la classe CSS `.project_video`.
  **Sélection des éléments**
  La première étape du script consiste à sélectionner tous les éléments du DOM portant la classe `.project_video`. Cette opération est réalisée à l’aide de `document.querySelectorAll`, qui retourne une liste de tous les éléments correspondants. Ces éléments sont ensuite parcourus un par un à l’aide de `forEach`.
  **Mise en pause initiale**
  Avant même que l’utilisateur interagisse avec la page, le script met en pause la première vidéo contenue dans chaque bloc `.project_video`. Cela garantit que toutes les vidéos sont inactives au chargement de la page, même si certaines sont configurées pour se lancer automatiquement par défaut.
  **Interaction utilisateur**
  Deux événements sont ensuite associés à chaque élément :
  - `mouseover` : lorsqu’un utilisateur survole l’élément avec la souris, une fonction appelée `hoverIN` est déclenchée. Cette fonction active la lecture de la vidéo.
  - `mouseout` : lorsque la souris quitte l’élément, la fonction `hoverOUT` est appelée. Elle met la vidéo en pause et la remet à zéro (grâce à la propriété `currentTime`).
  **Fonctionnement dynamique**
  Ce système permet de créer une interface fluide et interactive, souvent utilisée dans des portfolios ou galeries de projets. Dès que l’on passe la souris sur une vidéo, elle se met à jouer, ce qui attire l’attention de l’utilisateur. Dès que la souris s’en éloigne, la vidéo est remise à l’arrêt et revient au début, prête pour la prochaine interaction.
  **Résumé**
  Ce code est un exemple simple et efficace d’interaction utilisateur avec des vidéos dans une interface web. Il permet :
  - D'attirer visuellement l’utilisateur sans lui imposer de clic.
  - De contrôler précisément quand les vidéos s’activent.
  - De maintenir une interface propre et réactive.