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


Version 4.3 de Deux a apporté une fonctionnalité intéressante en termes de conception Web: les effets de défilement.
En effet, il est désormais possible d’affecter un certain nombre de transformations aux éléments de notre choix qui s’appliqueront lors du défilement de la page.
Cette nouvelle option nous permet de dynamiser nos sites Divi en minimisant l’ajout de ressources externes.
Voyons comment récupérer cette fonctionnalité prometteuse.

Quels sont les effets de défilement?

Ces transformations appartiennent à la famille des effets de parallaxe.
Vous connaissez déjà l’option de parallaxe pour les fonds d’écran dans le Générateur de Divi.
Et si vous êtes un fervent lecteur de Communauté Divi, alors vous avez probablement lu mon article Ajouter des effets de parallaxe avancés à Divi. 😉
Dans ce tutoriel, j’ai expliqué comment utiliser un jQuery Plugin, vous pouvez ajouter des effets de traduction horizontale et verticale à n’importe quel élément Générateur de Divi.

Vous verrez maintenant que ces nouveaux effets de défilement sont implémentés dans Générateur de Divi Vous pouvez l’utiliser pour obtenir le même résultat … et bien plus encore!
Tout cela sans avoir à mettre la main sur le code en ajoutant des scripts supplémentaires.

Pour vous donner un aperçu des possibilités qu’offrent les effets sur Divis Scroll, j’ai rassemblé une page de démonstration avec un exemple pour chaque effet.

Les 6 effets de transformation disponibles

Divis différents effets de défilement

6 Les effets de transformation peuvent donc être appliqués à n’importe quel module, ligne ou section.
Soit individuellement, soit en combinaison les uns avec les autres pour obtenir des effets complexes.

Pour activer l’un de ces effets, cliquez simplement sur Activer [effect name] Le bouton et les options de paramètres disponibles s’affichent.

1. Le mouvement vertical

Traduction verticale des effets dans le défilement Divis

Ajustez le déplacement de votre élément sur l’axe Y afin qu’il se déplace verticalement.
Ajuste le Indice Z Valeur de l’élément pour écraser les autres.

2. Mouvement horizontal

Traduction horizontale des effets avec le défilement Divis

Ajustez le mouvement de votre élément sur l’axe X afin qu’il se déplace horizontalement.

Selon vos préférences, votre site peut être redimensionné si votre élément « disparaît de la page ». Cela conduit à l’ajout d’une barre de défilement horizontale.

Pour éviter cela, utilisez la règle CSS suivante:

3. La décoloration

Afficher les effets dans Divis Scroll

Ajustez l’opacité de votre élément pour le changer de visible à invisible (ou vice versa).

4. L’échelle

Mise à l'échelle des effets sur le défilement Divis

Ajustez la taille de votre élément pour changer ses dimensions.
Je vous conseille d’utiliser cet effet en plus de ça Générateur de Divi Options de positionnement disponibles pour chaque module Avancé -> Article. Vous pouvez placer vos différents éléments où vous le souhaitez pour un rendu intéressant.

5. Rotation

Effets de rotation sur Divis Scroll

Ajustez l’orientation de votre élément afin que le degré de rotation change.

6. Le flou

Effets de défilement Divis flou

Ajustez la netteté de votre élément.
Cette option fonctionne généralement bien avec l’option Taille, vous permettant de simuler un effet de profondeur de champ comme en photographie.

Options des effets de défilement

Options des effets de défilement Divi

Une fois qu’un effet est activé, les paramètres ci-dessus sont affichés. Voyons ce qu’ils correspondent en détail.

  1. Viewport ci-dessous: Spécifie le point de départ de l’animation par rapport au bas de l’écran
    Par défaut, la valeur est 0qui correspond au bas de l’écran.
    Si vous augmentez cette valeur, l’animation démarrera plus tard.
  2. Le point central: Ce point définit le centre de l’animation.
    Par défaut, la valeur est 50%. Cela signifie qu’il s’agit du point médian absolu entre les Viewport ci-dessous Element et le Fenêtre supérieure Élément.
    Lorsque vous diminuez cette valeur, vous déplacez le centre de l’animation vers le bas.
    Lorsque vous augmentez cette valeur, vous déplacez le centre de l’animation vers le haut.
  3. Fenêtre supérieure: Définit le point final de l’animation par rapport au haut de l’écran.
    Par défaut, la valeur est 100%qui correspond au haut de l’écran.
    Si vous diminuez cette valeur, l’animation s’arrêtera plus tôt.
  4. Décalage de départ: Il s’agit de la valeur de départ de l’élément au début de l’animation.
  5. Décalage moyen: Il s’agit de la valeur attribuée à l’élément au milieu de l’animation.
  6. Décalage de fin: Il s’agit de la valeur finale de l’élément à la fin de l’animation.

Particularité du centre

L'objectif principal des effets de défilement Divis

Le point central peut être divisé en cliquant sur l’extrémité gauche ou droite.
Ceci est utilisé pour geler l’effet à la valeur définie pour la période souhaitée.

Comprendre l’importance de l’animation

Pour imiter les options d’effet du défilement de Divi, j’ai préparé un diagramme qui symbolise une fenêtre de navigateur Web.
J’ai montré les différents points clés de l’animation qui sont personnalisables.
La chose la plus importante est que l’animation commence au bas de l’écran où l’élément apparaîtra lorsque l’utilisateur fera défiler la page.

Sens de l'animation de défilement Divis

Le dernier mot

Cette nouvelle fonctionnalité d’effets de défilement ouvre vraiment de nouvelles possibilités pour la conception Web.
Il vous permet de rendre nos sites Divi encore plus dynamiques, très simples et, grâce au rendu en direct, encore plus faciles Générateur visuel Divi.

Notez que ces types d’effets fonctionnent bien lors du mixage, et en particulier lors de l’utilisation d’éléments redirigés.
Comme d’habitude, je vous conseille de ne pas encombrer vos sites web avec des tonnes d’effets, sinon vos pages deviendront lourdes et l’expérience utilisateur en sera affectée.
Enfin, il est également préférable de désactiver ces effets de défilement sur les appareils mobiles. Cela vous évite de perdre du temps à ajuster les paramètres pour différentes largeurs d’écran et facilite la navigation de vos visiteurs mobiles.

En conclusion, voici un Quelques exemples de sites Web pour vous aider à trouver l’inspiration pour les effets de défilement.



Source link

Recent Posts