Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Plus vous explorez des sites Web sur le Web, plus vous rencontrez des expériences sur la page vraiment personnalisées. Vous vous êtes peut-être demandé comment réaliser certaines fonctionnalités avancées, et souvent la réponse est: Utilisation d’une bibliothèque d’animations JavaScript. Une bibliothèque d’animation populaire ces jours-ci est GSAP. Ce n’est pas parce que vous souhaitez utiliser une bibliothèque JavaScript pour quelque chose que vous devez également parcourir la partie HTML et CSS manuellement. Divi peut prendre en charge la majeure partie de votre processus de conception Web. Créez et concevez pour que vous ayez plus de temps pour vous concentrer sur les fonctions et les animations personnalisées. Par exemple, dans le tutoriel d’aujourd’hui, nous allons vous montrer comment faire défiler horizontalement lorsque vous faites réellement défiler verticalement avec Divi et GSAP. Il en résulte un effet d’animation avancé que vous pouvez personnaliser à votre guise. Vous pouvez également télécharger le fichier JSON gratuitement!

Commençons.

Aperçu

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

Bureau

défilement horizontal de gsap

Téléphone portable, téléphone portable

défilement horizontal de gsap

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devez d’abord la télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! 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 plus abonné et ne recevrez aucun e-mail supplémentaire.

Aperçu de l’approche

Ce que nous utilisons

Ce que nous pouvons faire

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

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

Ajouter la section 1

Tout d’abord, ajoutez une première section à la page sur laquelle vous travaillez. Cette section agit comme un espace réservé afin que nous puissions regarder l’effet se mettre en place.

défilement horizontal de gsap

Dimensionnement

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

défilement horizontal de gsap

Cloner la section 1

Puis clonez une fois la section d’espace réservé. De cette façon, nous pouvons créer de l’espace en haut et en bas de notre page sans que cela fasse partie du défilement horizontal (voir aperçu).

défilement horizontal de gsap

1. Créez la conception de la section

Ajouter une nouvelle section entre les sections

Maintenant que nous avons configuré les deux sections d’espace réservé, il est temps de créer la première section que nous utiliserons dans notre défilement horizontal. Ajoutez cette section juste entre les deux sections d’espace réservé.

défilement horizontal de gsap

Dimensionnement

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

défilement horizontal de gsap

Les débordements

Nous avons également défini le débordement vertical sur auto. Combinée à la hauteur maximale de l’étape précédente, nous pouvons créer 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éfilement horizontal de gsap

Ajouter une nouvelle ligne

Structure de la colonne

Allez-y en ajoutant une nouvelle ligne à la section avec la structure de colonnes suivante:

défilement horizontal de gsap

image de fond

Ouvrez les paramètres de ligne et utilisez une image d’arrière-plan sans ajouter de modules.

  • Taille de l’image d’arrière-plan: Couverture
  • Position de l’image d’arrière-plan: centre

défilement horizontal de gsap

Dimensionnement

Modifiez les paramètres de taille sur la ligne suivante.

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

défilement horizontal de gsap

distance

Avec les paramètres d’espacement.

  • Rembourrage supérieur:
    • Bureau: 30vh
    • Tablette et téléphone: 20vh
  • Rembourrage au sol: 0px

défilement horizontal de gsap

Paramètres de colonne

Ensuite, ouvrez les paramètres de la colonne.

défilement horizontal de gsap

Couleur de l’arrière plan

Utilisez une couleur d’arrière-plan blanche pour la colonne.

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

défilement horizontal de gsap

distance

Accédez à l’onglet Conception de la colonne et appliquez des valeurs de remplissage personnalisées.

  • Rembourrage supérieur: 5%
  • Rembourrage au sol: 5%
  • Rembourrage gauche: 5%
  • Rembourrage droit: 5%

défilement horizontal de gsap

bord

Utilisez aussi une bordure.

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

défilement horizontal de gsap

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 module de texte initial contenant du contenu H4.

défilement horizontal de gsap

Paramètres de texte H4

Accédez à l’onglet Conception du module et modifiez les paramètres de texte H4 comme suit:

  • Police de titre 4: Source Code Pro
  • Couleur du texte du titre 4: # 000000
  • Taille du texte du titre 4:
    • Bureau: 1.2vw
    • Tablette: 2,5 vw
    • Téléphone: 3.5vw
  • En-tête, espacement de 4 lettres: 1px

défilement horizontal de gsap

Ajouter le module de texte n ° 2 à la colonne

Ajouter du contenu H3

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

défilement horizontal de gsap

Paramètres de texte H3

Accédez à l’onglet Conception du module et modifiez les paramètres de texte H3 en conséquence:

  • Police de titre 3: Alata
  • Taille du texte du titre 3:
    • Bureau: 2.5vw
    • Tablette: 4vw
    • Téléphone: 7vw

défilement horizontal de gsap

Ajouter le module de texte n ° 3 à la colonne

Ajouter du contenu

Ajoutez un module de texte final à la colonne avec une description de votre choix.

défilement horizontal de gsap

Paramètres de texte

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

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

défilement horizontal de gsap

Dimensionnement

Ensuite, modifiez les paramètres de taille.

  • Largeur:
    • Bureau: 67%
    • Tablette et téléphone: 100%

défilement horizontal de gsap

distance

Complétez les paramètres du module en appliquant des valeurs de remplissage réactives aux paramètres d’espacement.

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

défilement horizontal de gsap

Ajouter un module de bouton à la colonne

Ajouter une copie

Le dernier module dont nous avons besoin pour terminer la conception des lignes est un module de boutons. Incluez une copie de votre choix.

défilement horizontal de gsap

Paramètres des boutons

Accédez à l’onglet Conception du module et modifiez les paramètres du bouton en conséquence:

  • Utiliser des styles de boutons personnalisés: Oui
  • Taille du texte du bouton:
    • Bureau: 0.8vw
    • Tablette: 2vw
    • Téléphone: 3vw
  • Couleur du texte du bouton: #ffffff
  • Couleur d’arrière-plan du bouton: # 000000
  • Largeur du cadre du bouton: 0px
  • Rayon du bord du bouton: 0px
  • Police du bouton: Code source Pro
  • Style de police du bouton: lettres majuscules

défilement horizontal de gsap

défilement horizontal de gsap

distance

Ensuite, ajoutez des valeurs de remplissage personnalisées.

  • Rembourrage supérieur: 15px
  • Rembourrage au sol: 15px
  • Rembourrage gauche: 50px
  • Rembourrage droit: 50px

défilement horizontal de gsap

position

Et repositionnez le module sur l’onglet Avancé.

  • Position: Absolument
  • Emplacement: en bas à gauche
  • Décalage vertical: -5%
  • Décalage horizontal: 5%

défilement horizontal de gsap

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.

défilement horizontal de gsap

Modifier et copier et lier l’image

Assurez-vous de modifier, copier et lier l’image dans chaque section dupliquée.

défilement horizontal de gsap

2. Ajouter une fonctionnalité

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

Après avoir installé tous les éléments, nous pouvons nous concentrer sur la fonctionnalité de l’ensemble. La première étape pour obtenir le résultat consiste à attribuer une classe CSS personnalisée à chaque section que vous souhaitez faire partie du défilement horizontal. Dans ce cas, ce sont les trois sections compris entre Sections d’espace réservé.

  • Classe CSS: coupe horizontale

défilement horizontal de gsap

Ajouter un nouveau module de code n’importe où dans la page

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

défilement horizontal de gsap

Ajoutez d’abord les bibliothèques GSAP et ScrollTrigger

Copiez les bibliothèques GSAP et ScrollTrigger dans le module de code. Pour ce faire, utilisez des balises de script provenant des 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"

défilement horizontal de gsap

Ajouter de nouvelles balises de script pour le code personnalisé

Certaines nouvelles balises de script sont ajoutées juste en dessous des balises de script de la bibliothèque.

défilement horizontal de gsap

Ajouter du code JS

Préparez-vous à utiliser JQuery

Dans ces balises de script, nous chargeons d’abord JQuery.

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

défilement horizontal de gsap

Enregistrez le plugin ScrollTrigger

Ensuite, nous enregistrons le plugin ScrollTrigger.

gsap.registerPlugin(ScrollTrigger);

défilement horizontal de gsap

Enveloppez toutes les sections pertinentes dans un nouveau département

Nous placerons é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"/>');  

défilement horizontal de gsap

Créer une nouvelle interpolation GSAP avec ScrollTrigger

Pour que le faux défilement horizontal fonctionne, nous utiliserons 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
  }
});

défilement horizontal de gsap

Ajouter des balises de style pour le code CSS personnalisé

Ensuite, ajoutons quelques balises de style à notre module de code.

défilement horizontal de gsap

Insérer du code CSS entre les balises de style

Pour conclure le didacticiel et les fonctionnalités, ajoutons 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;
}

défilement horizontal de gsap

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

défilement horizontal de gsap

Téléphone portable, téléphone portable

défilement horizontal de gsap

Dernières pensées

Dans cet article, nous vous avons montré comment vous pouvez faire un effort supplémentaire pour votre site Web avec Divi et GSAP. En particulier, nous vous avons montré comment faire défiler horizontalement lorsque vous faites réellement défiler votre page verticalement. Il s’agit d’un type d’animation personnalisé que vous avez peut-être rencontré à un moment donné et vous vous demandez comment le faire avec DIvi. Vous pouvez également 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 voulez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de l’avoir Abonnez-vous à notre newsletter et chaîne Youtube Vous êtes donc toujours l’un des premiers à connaître et à bénéficier de ce contenu gratuit.





Source link

Recent Posts