Retour aux articles
Ajout d'onglets à rotation automatique dans Webflow
Tutoriels

Ajout d'onglets à rotation automatique dans Webflow

Avec un petit peu de code personnalisé, le composant onglet de webflow peut avoir des super pouvoirs. Les onglets à rotation automatique peuvent être un moyen incroyablement efficace d'afficher des informations d'une manière plus attrayante et interactive. Consultez les exemples ci-dessous

Peter Bekkers
6 mai 2021
Exemple de produit fini


Bonjour, dans ce tutoriel, je vais vous montrer comment configurer les onglets de Webflow pour qu'ils passent automatiquement en revue chaque lien d'onglet dans un laps de temps défini. Cela n'interférera pas avec la capacité ordinaire des utilisateurs à cliquer sur les liens de l'onglet. 

Les onglets à rotation automatique peuvent être réalisés en trois étapes simples.

Étape 1. Ajoutez le script dans votre site Webflow

Placez ce code à l'intérieur de la <head>balise</head>

Ce code indique au navigateur de bloquer toute mise en évidence accidentelle des boutons de tabulation pour une meilleure protection, comme le montre la démonstration ci-dessous.


 


<body>Placez ce code avant la</body> balise

C'est la partie importante du code. Vous pouvez modifier le timing comme vous le souhaitez. Il est actuellement fixé à 6 secondes par onglet par défaut.



Ajout d'un script à l'en-tête et au corps des pages



Étape 2. Créez un nouveau composant d'onglets

Il existe deux façons d'ajouter un composant d'onglets : vous pouvez aller dans le panneau d'ajout d'éléments, faire défiler l'écran jusqu'aux composants et faire glisser le composant d'onglets. La méthode la plus rapide est d'appuyer sur ctrl-e, de taper "tabs" et d'appuyer sur entrée. 

Création d'un nouveau composant d'onglets


Étape 3. Donnez à tous vos liens d'onglets la classe "Onglet standard" et à votre menu d'onglets la classe "Menu d'onglets".

Le code que nous avons inséré précédemment accédera aux liens et au menu des onglets par le biais de ces noms de classe. Cependant, vous pouvez changer le nom des classes que le script ciblera.

Donner aux liens d'onglet un nom de classe "Onglet standard".
Donner au menu des onglets le nom de classe "Menu des onglets".

C'est fait. C'est fait. 

Publiez maintenant votre site et visualisez-le en direct pour voir vos onglets auto-rotatifs en action !


Étape bonus !

Si vous voulez aller plus loin, nous vous recommandons de créer une barre de chargement pour donner aux utilisateurs un indice visuel du moment où le prochain changement d'onglet aura lieu. Ne vous inquiétez pas, c'est très facile. 

Étape 1. Ajoutez un bloc div à l'intérieur de votre lien d'onglet - il contiendra votre barre de chargement. 

Vous pouvez définir le nom de la classe, la largeur, la hauteur et la couleur comme vous le souhaitez. Le positionnement absolu est la chose la plus importante ici, car il permettra à la barre de chargement que nous créerons ensuite de se placer au-dessus de ce bloc div. 

Création de la classe "Base de la barre de charge

Étape 2. Ajoutez un autre bloc div à l'intérieur du div que vous venez de créer - ce sera votre barre de chargement.

Cela devrait ressembler à ceci
  • Définissez la largeur à 0% (elle sera animée pour être redimensionnée à 100% plus tard)
  • la hauteur à 100 % pour qu'il occupe toute la hauteur de l'enveloppe de la barre de chargement dans laquelle il se trouve. 
  • Choisissez une couleur qui vous plaît.


Étape 3. Lorsque l'onglet est affiché, nous voulons animer la taille de la "barre de chargement" de 0% à 100% sur 6 secondes. 

  • Une fois le lien "Onglet standard" sélectionné, allez dans la section "Interactions" et ajoutez un nouvel élément déclencheur qui se produira lors du "changement d'onglet".
  • Créez une nouvelle animation temporisée lorsque l'onglet est en vue.
  • Sélectionnez la barre de chargement et ajoutez une nouvelle action pour modifier sa taille.
  • Définissez la largeur à 0% et la durée à 0 seconde.
  • Avec la barre de chargement toujours sélectionnée, ajoutez une autre action pour affecter la taille. Cette fois, nous allons définir la largeur à 100% et la durée à 6 secondes.


Étape 4. Nous devons maintenant faire en sorte que la barre de chargement revienne à 0 % lorsqu'il ne s'agit pas de l'onglet actuel. 

Nous voulons créer une autre nouvelle animation lorsque l'onglet est hors de vue. Avec la barre de chargement sélectionnée, lancez une nouvelle animation et définissez sa taille à 0% de largeur avec un délai de 0 seconde.

Il ne vous reste plus qu'à admirer votre nouvelle animation géniale.

SUR L AUTEUR
Peter Bekkers

Peter est un éminent développeur de Webflow qui s'intéresse particulièrement à l'amélioration de la fonctionnalité des Webflows par le biais de solutions de code personnalisé. Peter est un développeur principal chez Flowbase et a mis la main sur un certain nombre de produits de base de Flowbase.

Vous avez apprécié cette lecture ?

Restez à jour avec les dernières nouvelles, stratégies et idées sur le business vidéo envoyées directement dans votre boîte de réception !

Merci ! Votre soumission a été reçue !
Oups ! Quelque chose s'est mal passé lors de la soumission du formulaire.

Recevez les ressources du webflow directement dans votre boîte aux lettres.

Inscrivez-vous pour recevoir chaque semaine dans votre boîte de réception des informations et de l'inspiration.

AUTRES GUIDES ET LEÇONS

Boostez votre site webflow davantage.