Comment faire défiler automatiquement horizontalement lors du défilement vertical avec Divi & GSAP

Plus vous explorez des sites Web sur le Web, plus vous rencontrez des expériences vraiment personnalisées sur la page. Vous vous êtes peut-être demandé comment obtenir certaines fonctionnalités avancées et la réponse est souvent la suivante : en utilisant une bibliothèque JavaScript d'animation. Une bibliothèque d'animation populaire de nos jours est GSAP. Mais ce n'est pas parce que vous souhaitez utiliser une bibliothèque JavaScript pour quelque chose que vous devez également parcourir manuellement les parties HTML et CSS. Divi peut prendre en charge la plus grande partie de votre processus de conception Web ; la construction et la conception, ce qui vous laisse plus de temps pour vous concentrer sur des fonctionnalités et des animations personnalisées. Dans le tutoriel d'aujourd'hui, par exemple, nous allons vous montrer comment faire défiler horizontalement lors d'un défilement vertical à l'aide de Divi et de GSAP. Il en résulte un effet d'animation avancé que vous pouvez personnaliser à votre guise. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez d'abord les télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Aperçu de l'approche

Ce que nous utilisons

• Divi
• Bibliothèque JavaScript GSAP
• Plugin ScrollTrigger pour GSAP
• Démo ScrollTrigger

Ce que nous créons

• Faux défilement horizontal lors du défilement vertical
• Effet épingle
• Faire fonctionner l'effet sur un certain nombre de sections de notre choix (pas nécessairement la page entière)
• Une expérience d'écran horizontale sans effort sur toutes les tailles d'écran

1. Ajouter des sections d'espace réservé

Ajouter la section #1

Commencez par ajouter une première section à la page sur laquelle vous travaillez. Cette section servira d'espace réservé afin que nous puissions voir l'effet se mettre en place.

Dimensionnement

Ouvrez les paramètres de section et attribuez une hauteur aux paramètres de dimensionnement.

• Hauteur: 60vh

Cloner la section #1

Ensuite, clonez une fois la section d'espace réservé. Cela nous aidera à générer de l'espace en haut et en bas de notre page, sans que cela fasse partie du défilement horizontal (voir aperçu).

1. Conception de la section de construction

Ajouter une nouvelle section entre les sections

Maintenant que nous avons les deux sections d'espace réservé en place, il est temps de créer la première section que nous utiliserons à l'intérieur de notre défilement horizontal. Ajoutez cette section juste entre les deux sections d'espace réservé.

Dimensionnement

Ouvrez les paramètres de la section et attribuez une hauteur maximale dans les paramètres de dimensionnement.

• Hauteur maximale : 100 vh

Débordements

Nous définissons également le débordement vertical sur automatique. Ceci, en combinaison avec la hauteur maximale de l'étape précédente, nous aidera à générer automatiquement une barre de défilement sur certaines tailles d'écran où les éléments de section dépassent la hauteur de la fenêtre.

• Débordement vertical : automatique

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Image de fond

Sans ajouter encore de modules, ouvrez les paramètres de ligne et utilisez une image d'arrière-plan.

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre

Dimensionnement

Modifiez les paramètres de dimensionnement de la ligne suivante.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur:
  • Ordinateur de bureau : 70 %
  • Tablette et téléphone : 80 %

Espacement

Avec les paramètres d'espacement.

• Rembourrage supérieur :
  • Ordinateur de bureau : 30 vh
  • Tablette et téléphone : 20 vh
• Rembourrage inférieur : 0px

Paramètres de colonne

Ensuite, ouvrez les paramètres de la colonne.

Couleur de l'arrière plan

Utilisez une couleur de fond blanc pour la colonne.

• Couleur d'arrière-plan : #ffffff

Espacement

Passez à l'onglet de conception de la colonne et appliquez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 5 %
• Rembourrage inférieur : 5 %
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Frontière

Utilisez aussi une bordure.

• Largeur de la bordure : 1px
• Couleur de la bordure : #000000

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu H4

Il est temps d'ajouter des modules, en commençant par un premier module de texte contenant du contenu H4.

Paramètres de texte H4

Passez à l'onglet de conception du module et modifiez les paramètres de texte H4 comme suit :

• Police de l'en-tête 4 : Source Code Pro
• Titre 4 Couleur du texte : #000000
• Titre 4 Taille du texte :
  • Ordinateur de bureau : 1.2vw
  • Tablette : 2.5vw
  • Téléphone : 3.5vw
• En-tête 4 Espacement des lettres : 1px

Ajouter le module de texte #2 à la colonne

Ajouter du contenu H3

Ajoutez un autre module de texte juste en dessous du précédent et utilisez du contenu H3 dans la zone de contenu.

Paramètres de texte H3

Passez à l'onglet de conception du module et modifiez les paramètres de texte H3 en conséquence :

• Police de la rubrique 3 : Alata
• Titre 3 Taille du texte :
  • Ordinateur de bureau : 2.5vw
  • Tablette : 4vw
  • Téléphone : 7vw

Ajouter le module de texte n° 3 à la colonne

Ajouter du contenu

Ajoutez un dernier module de texte à la colonne avec un contenu de description de votre choix.

Paramètres de texte

Modifiez les paramètres de texte du module en conséquence :

• Police de texte : Source Code Pro
• Taille du texte:
  • Ordinateur de bureau : 0.8vw
  • Tablette : 2vw
  • Téléphone : 3vw
• Hauteur de la ligne de texte : 1,5 em

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Largeur:
  • Ordinateur de bureau : 67 %
  • Tablette et téléphone : 100 %

Espacement

Et complétez les paramètres du module en appliquant des valeurs de remplissage réactif aux paramètres d'espacement.

• Rembourrage supérieur :
  • Bureau : 3vh
  • Tablette et téléphone : 5vh
• Rembourrage inférieur :
  • Bureau : 3vh
  • Tablette et téléphone : 5vh

Ajouter un module de bouton à la colonne

Ajouter une copie

Le dernier module dont nous avons besoin pour terminer la conception de la ligne est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Passez à l'onglet de conception du module et modifiez les paramètres des boutons en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton :
  • Ordinateur de bureau : 0.8vw
  • Tablette : 2vw
  • Téléphone : 3vw
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px
• Police des boutons : Source Code Pro
• Style de police des boutons : majuscules

Espacement

Ajoutez ensuite des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 15px
• Rembourrage inférieur : 15px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Position

Et repositionnez le module dans l'onglet avancé.

• Position : Absolu
• Emplacement : coin inférieur gauche
• Décalage vertical : -5%
• Décalage horizontal : 5 %

2. Section de réutilisation

Cloner la section deux fois

Une fois que vous avez terminé la première section, vous pouvez la cloner deux fois.

Modifier l'image et la copie et le lien

Assurez-vous de modifier l'image, la copie et le lien dans chaque section en double.

2. Ajouter des fonctionnalités

Ajoutez une classe CSS à chaque section que vous souhaitez inclure dans le défilement horizontal

Maintenant que nous avons tous les éléments en place, nous pouvons commencer à nous concentrer sur la fonctionnalité de tout cela. La première étape pour atteindre le résultat consiste à attribuer une classe CSS personnalisée à chaque section que vous souhaitez inclure dans le défilement horizontal. Dans ce cas, cela signifie les trois sections entre les sections d'espace réservé.

• Classe CSS : section horizontale

Ajouter un nouveau module de code quelque part à l'intérieur de la page

Ensuite, ajoutez un module de code à la page. Cela peut être n'importe où vous voulez.

Ajoutez d'abord les bibliothèques GSAP et ScrollTrigger

Copiez-collez les bibliothèques GSAP et ScrollTrigger à l'intérieur du module de code. Utilisez des balises de script pour cela avec les sources suivantes :

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

Ajouter de nouvelles balises de script pour le code personnalisé

Juste en dessous des balises de script de la bibliothèque, nous ajouterons de nouvelles balises de script.

Ajouter un code JS

Se préparer à l'utilisation de JQuery

À l'intérieur de ces balises de script, nous commencerons par charger JQuery.

jQuery(document).ready(function($){  
});

Enregistrer le plugin ScrollTrigger

Ensuite, nous enregistrerons le plugin ScrollTrigger.

gsap.registerPlugin(ScrollTrigger);

Enveloppez toutes les sections pertinentes dans une nouvelle div

Nous plaçons également chacune des sections pertinentes dans un nouveau div en utilisant les lignes de code suivantes :

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');  

Créer une nouvelle interpolation GSAP avec ScrollTrigger

Pour faire fonctionner le faux défilement horizontal, nous allons utiliser une nouvelle interpolation avec un déclencheur de défilement. Le code qui permet cela est le suivant :

gsap.to(allSections, {
  xPercent: -100 * (allSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: false,
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  }
});

Ajouter des balises de style pour le code CSS personnalisé

Ensuite, nous ajouterons des balises de style à notre module de code.

Insérer du code CSS entre les balises de style

Et nous terminerons le didacticiel et les fonctionnalités en ajoutant les lignes de code CSS suivantes entre les balises de style :

.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
width: 100%;
will-change: transform;
}

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment faire un effort supplémentaire pour votre site Web avec Divi et GSAP. Plus précisément, nous vous avons montré comment faire défiler horizontalement lors d'un défilement vertical sur votre page. Il s'agit d'un type d'animation personnalisé que vous avez peut-être rencontré à un moment donné et vous vous êtes demandé comment vous pouviez le faire avec DIvi. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.