Défilement horizontal automatique tout en défilant verticalement avec Divi et gsap

Inscription réussie. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Aperçu de la méthode Divi gsap JavaScript Library scrolltrigger plug – in que nous avons utilisé dans la démonstration gsap de scrolltrigger scrolltrigger le faux déclencheur de défilement horizontal que nous avons créé lors de l’effet vertical de l’aiguille de défilement permet à l’effet de fonctionner sur plusieurs parties de notre sélection (pas nécessairement la page entière) toutes les parties permettent une expérience d’écran horizontal facile Taille de l’écran 1. Ajouter une section de substituant ajouter une section 1 ajoutez d’abord la section 1 à la page que vous travaillez. Cette section sera utilisée comme substituant afin que vous puissiez voir ce qui se passe. Redimensionner ouvre les paramètres de section et spécifie la hauteur pour les paramètres de redimensionnement. Hauteur: 60vh Cloner la section # 1, puis cloner la section occupy string une fois. Cela nous aidera à créer de l’espace en haut et en bas de la page au lieu de faire partie d’un défilement horizontal (voir aperçu). 1. Conception de la Section de construction ajouter une nouvelle section entre les sections maintenant que nous avons deux sections de substituants, il est temps de créer la première section et nous l’utiliserons dans le défilement horizontal. Ajoutez cette section entre deux sections de substituants. Redimensionner ouvre les paramètres de section et spécifie la hauteur maximale dans les paramètres de redimensionnement. Hauteur maximale: 100 VH Nous avons également réglé le débordement vertical à automatique. Cela, combiné à la hauteur maximale de l’étape précédente, nous aidera à générer automatiquement des barres de défilement sur certaines tailles d’écran où certains éléments dépassent la hauteur de la fenêtre. Débordement vertical: automatique Ajouter une nouvelle ligne de structure de colonne
Onna continue en ajoutant de nouvelles lignes à la section en utilisant la structure de colonne suivante: Image de fond sans ajouter de module, ouvrez les paramètres de ligne et utilisez l’image de fond. Taille de l’image de fond: couverture emplacement de l’image de fond: Centre Redimensionner modifie les paramètres de taille de 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% Espacement et réglage de l’espacement. Remplissage en haut: Bureau: tablette 30vh et téléphone: 20 VH remplissage en bas: 0px Les paramètres de colonne sont ensuite ouverts. La couleur de fond est la couleur de fond blanche utilisée pour les colonnes. Couleur de fond: # FFFFFF L’espacement passe à l’onglet conception de colonne et applique des valeurs de remplissage personnalisées. Remplissage supérieur: 5% remplissage inférieur: 5% remplissage gauche: 5% remplissage droit: 5% Les bordures utilisent également des bordures. Largeur de la bordure: 1px couleur de la bordure: # 000000 Il est temps d’ajouter un module de texte 1 à la colonne de contenu ajouté H4, en commençant par le premier module de texte qui contient du contenu H4. Paramètres de texte H4 passer à l’onglet conception du formulaire et modifier les paramètres de texte H4 comme suit:
Titre 4: police: code source pro text Color titre 4: # 000000 titre 4 taille du texte: Bureau: 1.2vw tablette: 2.5vw Téléphone: 3.5vw titre 4 espacement des lettres: 1px Ajouter un formulaire de texte # 2 à la colonne ajouter du contenu H3 ajouter un autre formulaire de texte directement en dessous du formulaire de texte précédent et utiliser du contenu H3 dans la zone de contenu. Paramètres de texte H3 passer à l’onglet conception du module et modifier les paramètres de texte H3: titre 3 caractères: aile titre 3 taille du texte: Bureau: 2.5vw tablette: 4vw Téléphone:
– Oui. Ajoutez la classe CSS à chaque section que vous souhaitez inclure dans le défilement horizontal maintenant que nous avons tous les éléments prêts à commencer à nous concentrer sur la fonctionnalité de tout le contenu. La première étape vers la réalisation des résultats consiste à assigner une classe CSS personnalisée à chaque partie à faire partie d’un défilement horizontal. Dans ce cas, cela signifie trois parties entre les parties du substituant. Classe CSS: profil horizontal Ajoutez un nouveau formulaire de code à un endroit sur la page, puis ajoutez un formulaire de code à la page. Ça peut être n’importe où. Ajouter des bibliothèques gsap et scrolltrigger copiez et collez d’abord les bibliothèques gsap et scrolltrigger dans le module Code. Utilisez les balises de script pour les sources suivantes: src = \
Src = ‘ https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.5.1\/ScrollTrigger.min.js \
}); Enregistrez le plug – in scrolltrigger, puis nous enregistrerons le plug – in scrolltrigger. Gsap. Registerplugin (Roll trigger); Nous insérons également chaque section pertinente dans la nouvelle DIV en utilisant le code suivant: var allsections = $(\
Toutes les parties. Wrapall (‘) ‘); Créer une nouvelle interpolation gsap en utilisant scrolltrigger pour faire défiler horizontalement les erreurs, nous utiliserons une nouvelle interpolation avec un déclencheur de défilement. Le Code pour ce faire est le suivant: gsap. To (all parts {
X Pourcentage: – 100 * (toutes les sections. Longueur – 1),
Facile: \
Déclencheur de défilement: {
Déclencheur: ‘.Ho’
Conteneur rizontal»,
Pin: correct,
\
Frottement: 1,
Snap: false,
\/ \/ rouler verticalement en fonction de la largeur du récipient pour le rendre plus naturel.
Fin: () = > \
}
}); Ajoutez des balises de style au code CSS personnalisé ensuite, nous ajouterons quelques balises de style au formulaire de code. Insérez le code CSS entre les balises de style et nous compléterons le tutoriel et les fonctionnalités en ajoutant les lignes de code CSS suivantes entre les balises de style:. Récipient horizontal {
Largeur: 300%;
Hauteur: 100%;
Affichage: Flex;
Emballage flexible: nowrap;
Largeur maximale: aucune;
}
Conteneur de page
Débordement: caché;
}
– Oui. Section horizontale
Largeur: 100%;
Changement: Conversion;
} Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous vous montrons comment utiliser Divi et gsap pour faire tout ce qui est possible pour votre site Web. Plus précisément, nous vous montrons comment défiler horizontalement lorsque vous Défilez verticalement sur une page. Il s’agit d’une animation personnalisée que vous avez peut – être rencontrée à un moment donné et que vous voulez savoir comment l’implémenter en utilisant Divi. Vous pouvez également télécharger gratuitement le fichier json! Si vous avez des questions ou des suggestions, n’hésitez pas à faire part de vos commentaires dans la section commentaires ci – dessous. Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.