Effets de mouvement sont un ensemble puissant de commandes pour ajouter de belles transitions et animations à votre conception.
Hasta ahora, los diseñadores la toile que querían incorporar animaciones y efectos de movimiento necesitaban utilizar bibliotecas externas o código personalizado.
Elementor Pro 2.5 offre une solution tout-en-un pour la création de parallaxe, d'animations et d'autres effets de mouvement, le tout intégré de manière transparente dans l'éditeur Elementor.
Effets de défilement
Utiliser Effets de défilement para crear animaciones e interacciones sorprendentes cuando el Nom d'utilisateur se desplaza por la página. Aquí hay una lista de los efectos de desplazamiento:
Déplacement vertical
C'est l'effet de parallaxe classique que vous attendiez. Le défilement vertical entraîne le déplacement de l'élément à une vitesse différente de celle de la page lors du défilement, dans la direction et la vitesse de votre choix.
Déplacement horizontal
Le défilement horizontal signifie que lorsque le visiteur fait défiler vers le haut et vers le bas, l'élément se déplace vers la droite et la gauche en conséquence. Un exemple d'utilisation: une section avec des nuages qui se déplace vers la droite lorsque le visiteur fait défiler vers le bas.
Transparence
La transparence permet de rendre les éléments progressivement plus transparents ou plus visibles en corrélation avec le défilement du visiteur. Un exemple est qu'un titre apparaît puis se dissout en fonction du parchemin.
Il y a 4 directions d'effet possibles:
Fusionner - Ce qui signifie que l'élément commence comme transparent et devient progressivement visible.
Disparaître - L'élément commence comme visible et devient progressivement transparent.
Fondu en - L'élément commence comme visible, puis s'estompe, puis redevient visible.
Fondu - L'élément commence comme transparent, puis redevient visible, puis à nouveau transparent.
Se brouiller
Ce paramètre est similaire à la transparence, mais au lieu de la transparence, l'élément devient flou. Les images d'arrière-plan sont un bon exemple, qui ne sont correctement mises au point que lorsque l'utilisateur fait défiler vers le bas.
Tourner
Ici, l'élément tourne en se déplaçant. Un bon exemple est vu dans la rotation des étoiles dans l'image suivante:
Noter: Les deux paramètres, Points d'ancrage X et Y, détermine l'axe autour duquel l'élément est mis à l'échelle ou tourne. Si vous définissez l'orientation en haut à gauche, la rotation se produira autour du point supérieur gauche de l'élément. Si vous définissez l'orientation centre-centre, la rotation tournera autour de son centre, comme une roue. Ce paramètre n'est pertinent que pour ce qui précède 'Tourner'effet ainsi que'Escalader'effet énuméré ci-dessous.
Escalader
Escalader vous permet d'agrandir et de réduire les articles en fonction du déplacement. Exemple: un fonds qui grandit au fur et à mesure que vous vous déplacez.
Noter: Utilisez le ' Appliquer des effets sur 'pour déterminer si les effets de mouvement s'appliquent aux appareils mobiles, aux ordinateurs de bureau ou aux tablettes. Les effets de souris n'affecteront que les appareils de bureau.
Effets de souris
Piste de la souris
Créez une impression de profondeur en faisant bouger les objets en fonction du mouvement de la souris du visiteur.
Inclinaison 3D
Semblable à la façon dont la piste de souris déplace l'élément par rapport au mouvement de la souris, l'effet d'inclinaison 3D incline l'élément selon le même mouvement du curseur.
Compatibilidad del le navigateur de efectos de movimiento
| Chrome | Firefox | Safari | Opéra | Bord | navigateur Internet |
| Prise en charge | Prise en charge | Prise en charge | Prise en charge | Prise en charge * | Non supporté |
* Comportement légèrement retardé
Remarque: Elementor respecte la préférence de «propriété de mouvement réduit» qu'un utilisateur peut définir. Si un utilisateur a configuré l'une des options suivantes, les effets de mouvement seront désactivés pour cet utilisateur:
- Mac: «Preferencias del sistema> Accessibilité> Pantalla» y marca / desmarca la casilla «Reducir movimiento».
- iOS: «Paramètres> Général> Accessibilité» et activer / désactiver «Réduire les mouvements»
- Windows 10: "Paramètres> Accessibilité> Affichage> Simplifier et personnaliser Windows"
Nota: En Safari, si no ve los efectos del mouse o si experimenta el problema de la desaparición de elementos en Safari, esto se debe a que WordPress utiliza una versión antigua de jQuery. En algunos casos, ver los efectos de la pista del mouse a través de Safari puede causar un error de jQuery que hará que desaparezcan elementos, como flechas del carrusel que faltan, por ejemplo. Si esto sucede, también puede ver un error que hace referencia al «tamaño máximo de pila de llamadas excedido». Para resolver el problema, elimine las animaciones de entrada de los widgets con efectos de movimiento y / o elimine los efectos del mouse de las áreas que tienen activados simultáneamente los efectos de desplazamiento y de mouse.
