Si vous cherchez un moyen de créer des animations fluides avec les effets de défilement intégrés de Divi, vous allez adorer ce tutoriel. Nous allons vous montrer comment combiner l’accrochage au défilement avec les effets de mouvement intégrés de Divi pour créer des sections pleine hauteur que vous pouvez faire défiler en une seule fois. 

Nous allons commencer par créer la première section. Nous allons donc réutiliser cette section tout au long de la conception de notre page. Pour activer l’accrochage au défilement, nous utiliserons les propriétés d’accrochage au défilement CSS que nous attribuerons aux sections, HTML, en-tête et pied de page de notre page. 

Résultat Possible

Avant de plonger dans le didacticiel, examinons rapidement le résultat sur différentes tailles d’écran.

Divi scroll snapping desktop preview

1. Créer une nouvelle page et commencer à concevoir la première section

Ajouter une nouvelle page et basculer vers Visual Builder

Commencez par ajouter une nouvelle page. Saisissez le titre de la page, publiez la page et basculez vers Visual Builder.

Ajouter un article divi
Creation article divi

Paramètres de section

Dimensionnement

Une fois à l’intérieur de la nouvelle page, ouvrez la section qui s’y trouve déjà et modifiez les paramètres de dimensionnement.

  • Hauteur min: 100vh
Dimensionnement divi

Main Element

Nous ajoutons également deux lignes de code CSS à la section. Ces lignes de code CSS nous aideront à transformer la section en un point d’accrochage pour l’accrochage au défilement.

scroll-snap-align: start;scroll-snap-stop: normal;

Contenu css divi section

Visibilité

Pour vous assurer que rien ne dépasse le conteneur de section, nous cacherons les débordements de la section.

  • Débordement horizontal: caché
  • Débordement vertical: caché
Masuer section divi

Ajouter la ligne # 1

Structure de colonne

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

Choisir structure colonne

Dimensionnement

Without adding any modules yet, open the row settings and modify the sizing as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%
Configuration espacement colonne

Spacing

We’re removing the section’s default top and bottom padding as well.

  • Top Padding: 0px
  • Bottom Padding: 0px
Configurer lespacement divi

Position

And we’ll reposition the row accordingly:

  • Position: Absolute
  • Location: Bottom Center
Configuration position divi colonne

Add Text Module to Column

Leave Content Box Empty

The only module we need in this row is a Text Module. Make sure you leave the module’s content box empty.

Module texte divi

Background Color

Then, change the background color.

  • Background Color: #ffee00
Configuration texte couleur arriere plan divi

Text Settings

We’ll remove the module’s text line height too.

  • Text Line Height: 1em
Reglage texte hauteur ligne divi

Sizing

Then, we’ll go to the sizing settings and change the width.

  • Width: 30%
Espacement module texte divi

Spacing

We’ll turn the module into a square by adding some top padding as well.

  • Top Padding: 30%
Espacement interne module divi

Add Row #2

Column Structure

Sur la ligne suivante. Utilisez la structure de colonnes suivante:

Choisr mise en pge ligne 2 divi

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement dans l’onglet de conception:

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Largeur: 60vw
  • Largeur max: 100%
Configuraiton colonne 2 divi

Espacement

Ajoutez ensuite une marge supérieure personnalisée sur différentes tailles d’écran.

  • Marge supérieure: 20vh (ordinateur de bureau), 5vw (tablette et téléphone)
Configuration espacement module colonne divi

Colonne 2 Espacement

Ensuite, nous ouvrirons les paramètres de la colonne 2 et ajouterons des valeurs de remplissage personnalisées.

  • Rembourrage supérieur: 2vh (tablette et téléphone)
  • Rembourrage gauche: 2vw
  • Rembourrage droit: 2vw
Configuration espacement colonne 2 module divi

Ajouter un module d’image à la colonne 1

Upload Image

Il est temps d’ajouter des modules, ajoutez un module d’image à la colonne 1 et téléchargez une image de votre choix.

Mise en ligne dimage diiv

Dimensionnement

Nous forcerons ensuite la pleine largeur sur le module.

  • Forcer la pleine largeur: Oui
Forcer la pleine largeur divi

Ajouter le module de texte n ° 1 à la colonne 2

Ajouter du contenu H2

Dans la deuxième colonne, le premier module dont nous avons besoin est un module de texte avec du contenu H2.

Module texte colonne 2

Paramètres de texte H2

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

  • Heading 2 Font: Anton
  • Rubrique 2 Taille du texte: 5vw (bureau), 7vw (tablette), 9vw (téléphone)
Changement police diiv

Ajouter le module de texte n ° 2 à la colonne 2

Ajouter du contenu

Ajoutez un autre module de texte juste en dessous juste en dessous du précédent et insérez le contenu de la description de votre choix.

Ajouter contenu module texte divi

Paramètres de texte

Modifiez les paramètres de texte du module comme suit:

  • Text Font: Open Sans
  • Taille du texte: 0.8vw (bureau), 2vw (tablette), 2.5vw (téléphone)
  • Hauteur de la ligne de texte: 1,8 em
Configuration alignement divi

Espacement

Et ajoutez une marge supérieure et inférieure personnalisée aux paramètres d’espacement.

  • Marge supérieure: 2vw
  • Marge inférieure: 2vw
Configuraiton espacement module texte divi

Ajouter un module de boutons à la colonne 2

Ajouter une copie

Le module suivant et dernier dont nous avons besoin dans cette colonne est un module de bouton. Ajoutez une copie de votre choix.

Ajouter un bouton divi

Paramètres des boutons

Stylisez le bouton en conséquence:

  • Utiliser des styles personnalisés pour le bouton: Oui
  • Taille du texte du bouton: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Couleur Text Bouton: #333333
  • Couleur Bordure Bouton: #333333
  • Rayon Bouton : 1px
Reglages bouton divi
  • Police Bouton: Anton
  • Style Police Bouton : Uppercase
Style bouton module divi

Espacement

Et complétez les réglages du module en ajoutant une valeur personnalisé en fonction des tailles d’écrans.

  • Marge Interne Haute: 1vw (Desktop), 2vw (Tablette), 3vw (TéléPhone)
  • Marge Interne Basse: 1vw (Desktop), 2vw (Tablette), 3vw (TéléPhone)
  • Marge Interne Gauche: 3vw (Desktop), 5vw (Tablette), 7vw (TéléPhone)
  • Marge Internet Droite: 3vw (Desktop), 5vw (Tablette), 7vw (TéléPhone)
Configuration espacement bouton divi

2. Ajouter des effets de défilement à différents éléments

Module texte dans la ligne #1

Animation Verticale

Once all elements are in place, it’s time to add the scroll effects. Open the Text Module in your first row and use some vertical motion.

  • Enable Vertical Motion: Yes
  • Starting Offset: 4
  • Mid Offset: 0
  • Ending Offset: -4
  • Motion Effect Trigger: Middle of Element
Animation module texte divi

Ligne #2

Colonne 1

Animation Horizontale

Ensuite, ouvrez la première colonne de votre deuxième ligne et ajoutez un mouvement horizontal.

  • Activer le mouvement horizontal: Oui
  • Décalage de départ: -3
  • Décalage moyen: 0 (de 40% à 60%)
  • Décalage de fin: -3
  • Déclenchement d’effet de mouvement: milieu de l’élément
Animation horizontale
Fondu entrant et sortant

Nous appliquons également un effet de fondu d’entrée et de sortie à cette même colonne.

  • Activer le fondu entrant et sortant: Oui
  • Opacité de départ: 0%
  • Opacité moyenne: 100%
  • Opacité de fin: 100%
  • Déclenchement d’effet de mouvement: milieu de l’élément
Animation fondu

Colonne 2

Mouvement horizontal

Ensuite, nous ouvrirons les paramètres de la deuxième colonne et appliquerons les paramètres de mouvement horizontal suivants:

  • Activer le mouvement horizontal: Oui
  • Décalage de départ: 3
  • Décalage moyen: 0 (de 40% à 60%)
  • Décalage de fin: 3
  • Déclenchement d’effet de mouvement: milieu de l’élément
Movement horizontale colonne 2
Fondu entrant et sortant

Avec un effet de fondu entrant et sortant.

  • Activer le fondu entrant et sortant: Oui
  • Opacité de départ: 0%
  • Opacité moyenne: 100%
  • Opacité de fin: 100%
  • Déclenchement d’effet de mouvement: milieu de l’élément
Sortie fondue

4. Réutiliser la première section

Cloner la section quatre fois

Une fois que vous avez terminé la première section et ses effets de défilement, vous pouvez la cloner autant de fois que vous le souhaitez.

Cloner la section

Modifier les couleurs d’arrière-plan de toutes les autres sections

Nous changerons la couleur d’arrière-plan de toutes les autres sections.

  • Couleur d’arrière-plan: # 111111

5. Ajoutez du code CSS pour activer la capture par défilement sur le HTML de la page

Ajouter un module de code à la dernière section de la page

Maintenant, pour activer la capture de défilement sur le HTML de notre page, nous allons ajouter un module de code n’importe où à la dernière section de notre page.

Insertion module code

Insérer du code CSS HTML

Ces lignes de code CSS nous aideront à appliquer l’alignement du défilement au code HTML de notre page:

<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>

Ajouter Scroll Snapping Start à l’en-tête et au pied de page

Nous nous assurerons que notre en-tête et pied de page sont également des points de capture de défilement (tout comme nos sections) en ajoutant également les lignes de code CSS suivantes:

header, footer {scroll-snap-align: start;}

Pour Finir

Dans cet article, nous vous avons montré comment créer des animations fluides en combinant l’accrochage au défilement avec les effets de mouvement intégrés de Divi. C’est un excellent moyen d’activer les effets de défilement avec un seul défilement. 

La capture de défilement aide les visiteurs à parcourir sans effort les différentes parties de votre site Web. Nous l’avons combiné avec une conception de section pleine hauteur. Vous avez également pu télécharger gratuitement le fichier JSON! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.