Comment combiner la capture de défilement et les effets de mouvement pour des animations fluides

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 cet article. Nous allons vous montrer comment combiner l'accrochage du défilement avec les effets de mouvement intégrés de Divi pour créer des sections pleine hauteur entre lesquelles vous pouvez faire défiler en une seule fois. Nous allons commencer par créer la première section. Nous réutiliserons ensuite 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. Vous pourrez également télécharger gratuitement le fichier JSON de la page !

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 gratuitement la mise en page des animations fluides

Pour mettre la main sur la mise en page gratuite des animations fluides, vous devrez d'abord la télécharger en utilisant le 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 !

1. Créez une nouvelle page et commencez à 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 passez à Visual Builder.

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 minimale : 100 vh

Élément principal

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 du défilement.

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

Visibilité

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

• Débordement horizontal : masqué
• Débordement vertical : caché

Ajouter la ligne n° 1

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez le dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Nous supprimons également le rembourrage supérieur et inférieur par défaut de la section.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Position

Et nous allons repositionner la ligne en conséquence :

• Position : Absolu
• Emplacement : En bas au centre

Ajouter un module de texte à la colonne

Laisser la zone de contenu vide

Le seul module dont nous avons besoin dans cette ligne est un module de texte. Assurez-vous de laisser la zone de contenu du module vide.

Couleur de l'arrière plan

Ensuite, changez la couleur d'arrière-plan.

• Couleur de fond : #ffee00

Paramètres de texte

Nous supprimerons également la hauteur de la ligne de texte du module.

• Hauteur de la ligne de texte : 1 em

Dimensionnement

Ensuite, nous allons passer aux paramètres de dimensionnement et modifier la largeur.

• Largeur : 30%

Espacement

Nous allons transformer le module en carré en ajoutant également un rembourrage supérieur.

• Rembourrage supérieur : 30 %

Ajouter la ligne n° 2

Structure des colonnes

Passons à la rangée suivante. Utilisez la structure de colonnes suivante :

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 maximale : 100 %

Espacement

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

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

Espacement de la colonne 2

Ensuite, nous allons ouvrir les paramètres de la colonne 2 et ajouter des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 2vh (tablette et téléphone)
• Rembourrage gauche : 2vw
• Rembourrage droit : 2vw

Ajouter un module d'image à la colonne 1

Télécharger une 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.

Dimensionnement

Nous allons ensuite forcer la pleine largeur sur le module.

• Forcer la pleine largeur : Oui

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.

Paramètres de texte H2

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

• Police de titre 2 : Anton
• Titre 2 Taille du texte : 5vw (ordinateur de bureau), 7vw (tablette), 9vw (téléphone)

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

Ajouter du contenu

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

Paramètres de texte

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

• Police de texte : Open Sans
• Taille du texte : 0,8 vw (ordinateur de bureau), 2 vw (tablette), 2,5 vw (téléphone)
• Hauteur de la ligne de texte : 1,8 em

Espacement

Et ajoutez des marges supérieure et inférieure personnalisées aux paramètres d'espacement.

• Marge supérieure : 2vw
• Marge inférieure : 2vw

Ajouter un module de bouton à la colonne 2

Ajouter une copie

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

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 (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #333333
• Couleur de la bordure du bouton : #333333
• Rayon de la bordure du bouton : 1px

• Police des boutons : Anton
• Style de police des boutons : majuscules

Espacement

Et complétez les paramètres du module en ajoutant des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)

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

Module de texte dans la rangée n° 1

Mouvement vertical

Une fois tous les éléments en place, il est temps d'ajouter les effets de défilement. Ouvrez le module de texte dans votre première rangée et utilisez un mouvement vertical.

• Activer le mouvement vertical : Oui
• Décalage de départ : 4
• Décalage moyen : 0
• Décalage de fin : -4
• Déclencheur d'effet de mouvement : milieu de l'élément

Rangée #2

Colonne 1

Mouvement horizontal

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
• Mid Offset : 0 (de 40 % à 60 %)
• Décalage de fin : -3
• Déclencheur d'effet de mouvement : milieu de l'élément

Entrée et sortie en fondu

Nous appliquons également un effet de fondu entrant et sortant à cette même colonne.

• Activer les fondus entrants et sortants : Oui
• Opacité de départ : 0%
• Opacité moyenne : 100 %
• Opacité finale : 100 %
• Déclencheur d'effet de mouvement : milieu de l'élément

Colonne 2

Mouvement horizontal

Ensuite, nous allons ouvrir les paramètres de la deuxième colonne et appliquer les paramètres de mouvement horizontal suivants :

• Activer le mouvement horizontal : Oui
• Décalage de départ : 3
• Mid Offset : 0 (de 40 % à 60 %)
• Décalage de fin : 3
• Déclencheur d'effet de mouvement : milieu de l'élément

Entrée et sortie en fondu

Avec un effet de fondu entrant et sortant.

• Activer les fondus entrants et sortants : Oui
• Opacité de départ : 0%
• Opacité moyenne : 100 %
• Opacité finale : 100 %
• Déclencheur d'effet de mouvement : milieu de l'élément

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.

Changer les couleurs d'arrière-plan de chaque autre section

Nous allons changer la couleur de fond de chaque autre section.

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

5. Ajoutez du code CSS pour activer l'accrochage du défilement sur le HTML de la page

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

Maintenant, pour activer l'accrochage du défilement sur le code HTML de notre page, nous allons ajouter un module de code n'importe où dans la dernière section de notre page.

Insérer un code CSS HTML

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

<style>

html {
overflow-x: hidden;
scroll-snap-type: y proximity;
}

</style>

Ajouter le début de l'accrochage du défilement à l'en-tête et au pied de page

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

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

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 créer des animations fluides en combinant l'accrochage du 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 par défilement aide les visiteurs à parcourir sans effort les différentes parties de votre site Web. Nous avons combiné cela avec une conception de section pleine hauteur. 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.