{"id":3627,"date":"2024-10-21T22:08:34","date_gmt":"2024-10-21T14:08:34","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=3627"},"modified":"2024-10-21T22:11:37","modified_gmt":"2024-10-21T14:11:37","slug":"how-to-create-stunning-scroll-triggered-animations-in-elementor-pro-a-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/fr\/comment-creer-de-superbes-animations-declenchees-par-le-defilement-dans-elementor-pro-un-guide-etape-par-etape","title":{"rendered":"Comment cr\u00e9er de superbes animations d\u00e9clench\u00e9es par le d\u00e9filement dans Elementor Pro : Un guide \u00e9tape par \u00e9tape"},"content":{"rendered":"

Les animations d\u00e9clench\u00e9es par le d\u00e9filement peuvent changer la donne pour votre site web, en am\u00e9liorant son interactivit\u00e9 et en rendant son contenu plus attrayant. Lorsque les utilisateurs font d\u00e9filer la page vers le bas, les animations lui donnent de la profondeur, attirent l'attention et rendent l'exp\u00e9rience de navigation plus immersive. Si vous utilisez Elementor Pro<\/mark><\/strong>En outre, l'ajout de ces animations est tr\u00e8s simple. Voici un guide qui vous aidera \u00e0 d\u00e9marrer et \u00e0 tirer le meilleur parti de ces effets, y compris des animations de parallaxe pour une conception plus stratifi\u00e9e.<\/p>

\"\"<\/figure><\/div>

Pourquoi utiliser des animations d\u00e9clench\u00e9es par le d\u00e9filement ?<\/h3>

Ces animations pr\u00e9sentent des avantages non n\u00e9gligeables :<\/p>

  • Mettez en \u00e9vidence les \u00e9l\u00e9ments importants<\/strong>: Les animations attirent naturellement l'attention, ce qui vous permet de mettre en valeur les sections essentielles de votre site.<\/li>\n\n
  • Am\u00e9liorer l'engagement des utilisateurs<\/strong>: Lorsque le contenu se d\u00e9voile progressivement, les utilisateurs sont plus enclins \u00e0 rester engag\u00e9s.<\/li>\n\n
  • Racontez une histoire<\/strong>: La fa\u00e7on dont le contenu se d\u00e9roule peut guider l'utilisateur \u00e0 travers votre page, \u00e9tape par \u00e9tape, en maintenant son int\u00e9r\u00eat.<\/li><\/ul>

    Avec Elementor Pro<\/strong>il est facile de mettre en \u0153uvre ces animations et d'amener votre site web \u00e0 un niveau de qualit\u00e9 sup\u00e9rieur. vie<\/strong>.<\/p>

    \u00c9tape 1 : Configurer la structure de votre page dans Elementor Pro<\/h3>

    Avant de commencer \u00e0 animer, vous devez d\u00e9finir la structure de base de votre page. Par exemple, disons que vous cr\u00e9ez une section \"h\u00e9ros\" avec un titre, une image et un texte d'accompagnement.<\/p>

    Cr\u00e9ation d'une nouvelle section<\/strong>:<\/p>

    1. Ouvrir Elementor<\/strong>ajoutez une nouvelle page et utilisez Elementor Edit pour acc\u00e9der \u00e0 la page d'\u00e9dition.<\/li><\/ol>
      \"\"<\/figure><\/div>
      1. Cliquez sur le bouton \"Ajouter un nouveau conteneur<\/strong>\"sur la page.<\/li><\/ol>
        \"\"<\/figure><\/div>
        1. S\u00e9lectionnez un disposition en deux colonnes<\/strong> avec le c\u00f4t\u00e9 gauche pour ajouter du contenu textuel (tel qu'un titre<\/strong> et texte justificatif<\/strong>) et le c\u00f4t\u00e9 droit pour ajouter une image afin d'am\u00e9liorer l'aspect visuel.<\/li><\/ol>
          \"\"<\/figure><\/div>

          Ajouter du contenu :<\/h4>
          1. Colonne de gauche<\/strong>: Ajouter un widget titre<\/strong> et un widget de texte<\/strong> pour afficher les informations principales de la page.<\/li><\/ol>
            \"\"<\/figure><\/div>
            1. Colonne de droite<\/strong>: ajouter un widget image<\/strong> pour placer une image visuelle pertinente afin d'ajouter un attrait visuel \u00e0 la page.<\/li><\/ol>
              \"\"<\/figure><\/div>

              Chaque bloc peut \u00eatre modifi\u00e9 pour compl\u00e9ter les \u00e9l\u00e9ments souhait\u00e9s. Cette configuration simple pr\u00e9pare le terrain pour une conception efficace avant que vous ne commenciez \u00e0 ajouter des animations.<\/p>

              \u00c9tape 2 : Ajouter une animation de d\u00e9filement \u00e0 votre titre<\/h3>
              \"\"<\/figure><\/div>

              Animons le titre pour qu'il glisse en douceur depuis la gauche lorsque l'utilisateur fait d\u00e9filer l'\u00e9cran vers le bas.<\/p>

              S\u00e9lection du widget d'en-t\u00eate<\/strong>:<\/p>

              • Cliquez sur le widget Heading pour ouvrir ses param\u00e8tres.<\/li><\/ul>

                Activation des effets de d\u00e9filement<\/strong>:<\/p>

                • Allez dans l'onglet Avanc\u00e9.<\/li><\/ul>
                  \"\"<\/figure>
                  • Sous Effets de mouvement<\/strong>, allumez Effets de d\u00e9filement<\/strong>.<\/li><\/ul>
                    \"\"<\/figure><\/div>

                    R\u00e9glage du d\u00e9filement horizontal<\/strong>:<\/p>

                    • Activer le d\u00e9filement horizontal<\/em><\/strong> effet.<\/li><\/ul>
                      \"\"<\/figure><\/div>
                      • R\u00e9glez la direction sur \"de gauche \u00e0 droite.<\/strong>“<\/li><\/ul>
                        \"\"<\/figure><\/div>
                        • Ajustez la vitesse \u00e0 environ 4<\/strong> pour un effet lisse et visible.<\/li><\/ul>

                          Avant-premi\u00e8re<\/strong>:<\/p>

                          Lorsque vous faites d\u00e9filer la page, vous verrez le titre glisser vers la gauche. Vous pouvez modifier la vitesse et la direction jusqu'\u00e0 ce que vous obteniez l'effet d\u00e9sir\u00e9.<\/p>

                          \u00c9tape 3 : Ajout d'un effet de parallaxe \u00e0 l'image<\/h3>

                          Pour rendre votre page plus dynamique, nous allons maintenant ajouter un effet de parallaxe \u00e0 l'image. L'image se d\u00e9place \u00e0 une vitesse diff\u00e9rente de celle du texte, ce qui cr\u00e9e un effet de superposition et de 3D.<\/p>

                          S\u00e9lection du widget image<\/strong>:<\/p>

                          • Cliquez sur le widget Image et ouvrez ses param\u00e8tres.<\/li><\/ul>
                            \"\"<\/figure><\/div>

                            Activation des effets de d\u00e9filement<\/strong>:<\/p>

                            • Sous l'onglet Avanc\u00e9, activez Effets de d\u00e9filement<\/strong>.<\/li><\/ul>
                              \"\"<\/figure>

                              Application du d\u00e9filement vertical<\/strong>:<\/p>

                              • Activez le d\u00e9filement vertical et r\u00e9glez la vitesse \u00e0 environ 1,5. Vous obtiendrez ainsi un effet de parallaxe subtil et fluide, l'image se d\u00e9pla\u00e7ant plus lentement que le texte.<\/li><\/ul>
                                \"\"<\/figure><\/div>

                                Ajout de modifications de l'opacit\u00e9<\/strong>:<\/p>

                                • Activer Transparence<\/mark><\/strong> sous les options de d\u00e9filement.<\/li><\/ul>
                                  \"\"<\/figure><\/div>
                                  • R\u00e9glez le Transparence<\/strong> pour se situer dans une fourchette de 0% (enti\u00e8rement transparent)<\/strong> \u00e0 100% (enti\u00e8rement visible)<\/strong>L'effet de fondu permet \u00e0 l'image de s'int\u00e9grer progressivement au fur et \u00e0 mesure que l'utilisateur fait d\u00e9filer la page. Ajustez la barre de d\u00e9filement pour contr\u00f4ler le moment o\u00f9 l'effet de fondu commence et se termine, afin d'am\u00e9liorer l'exp\u00e9rience de d\u00e9filement gr\u00e2ce \u00e0 une transition visuelle en douceur.<\/li><\/ul>
                                    \"\"<\/figure><\/div>

                                    L'image appara\u00eetra progressivement, ce qui ajoutera de la profondeur \u00e0 l'exp\u00e9rience visuelle.<\/p>

                                    \u00c9tape 4 : Cr\u00e9ation d'un visuel en couches avec Parallaxe<\/h3>

                                    Pour am\u00e9liorer encore le design, vous pouvez ajouter des effets de parallaxe \u00e0 d'autres \u00e9l\u00e9ments, tels que les images d'arri\u00e8re-plan.<\/p>

                                    Ajout d'une image d'arri\u00e8re-plan<\/strong>:<\/p>

                                    • Cliquez sur le conteneur ext\u00e9rieur de votre section et acc\u00e9dez \u00e0 l'onglet Style.<\/li><\/ul>
                                      \"\"<\/figure><\/div>
                                      • Ajoutez une image de fond.<\/li><\/ul>
                                        \"\"<\/figure>

                                        Activation des effets de d\u00e9filement pour l'arri\u00e8re-plan<\/strong>:<\/p>

                                        • Dans l'onglet Avanc\u00e9, activez Effets de d\u00e9filement<\/strong>.<\/li><\/ul>
                                          \"\"<\/figure><\/div>
                                          • R\u00e9glez la vitesse de d\u00e9filement vertical \u00e0 environ 0,5, de sorte que l'arri\u00e8re-plan se d\u00e9place plus lentement que les \u00e9l\u00e9ments de premier plan.<\/li><\/ul>
                                            \"\"<\/figure>

                                            Avant-premi\u00e8re<\/strong>:<\/p>

                                            En d\u00e9filant vers le bas, vous verrez un effet enti\u00e8rement dynamique : le titre glisse, l'image se d\u00e9place avec un effet de parallaxe et l'arri\u00e8re-plan se d\u00e9place subtilement \u00e0 l'arri\u00e8re.<\/p>

                                            \u00c9tape 5 : Ajouter une animation de d\u00e9clenchement de d\u00e9filement pour le texte<\/h3>

                                            S\u00e9lectionnez le widget de texte :<\/strong><\/p>

                                            • Cliquez sur le bouton zone de texte<\/strong> pour acc\u00e9der \u00e0 l'interface de param\u00e9trage du texte.<\/li><\/ul>
                                              \"\"<\/figure><\/div>

                                              Activez l'effet de d\u00e9filement :<\/strong><\/p>

                                              1. Aller \u00e0 le niveau avanc\u00e9<\/strong> tabulation.<\/li>\n\n
                                              2. Sous Effets de mouvement<\/strong>, permettre D\u00e9filement<\/strong> Effets<\/strong>.<\/li><\/ol>
                                                \"\"<\/figure><\/div>

                                                S\u00e9lectionnez l'option Transparence<\/strong> pour cr\u00e9er un effet de fondu sur le texte.<\/p>

                                                1. <\/li><\/ol>

                                                  D\u00e9finissez l'animation de la transparence :<\/strong><\/p>

                                                  • D\u00e9finissez la plage de transparence de 0%<\/strong> (totalement transparent) \u00e0 100%<\/strong> (enti\u00e8rement visible). Le texte passera de transparent \u00e0 visible lorsque l'utilisateur fera d\u00e9filer la page, cr\u00e9ant ainsi une transition en douceur.<\/li><\/ul>
                                                    \"\"<\/figure><\/div>

                                                    D\u00e9finissez le point de d\u00e9clenchement :<\/strong><\/p>

                                                    • Dans le cadre de la Effet de d\u00e9filement<\/strong> vous pouvez ajuster les param\u00e8tres de la Fen\u00eatre de visualisation<\/strong> Pourcentage pour sp\u00e9cifier o\u00f9 l'animation commence et se termine le d\u00e9filement. Par exemple, si vous r\u00e9glez l'animation pour qu'elle se d\u00e9clenche lorsque l'utilisateur fait d\u00e9filer la page entre 20% et 80% de<\/strong> la page permet au texte d'appara\u00eetre avec le contenu de la page.<\/li><\/ul>
                                                      \"\"<\/figure><\/div>

                                                      \u00c9tape 6 : Ajouter un effet de diapositive<\/h3>

                                                      S\u00e9lectionnez l'effet Diapositive :<\/strong><\/p>

                                                      • Dans le cadre de la Avanc\u00e9 > Effets de mouvement<\/strong> s\u00e9lectionnez Vers l'animation<\/strong>puis s\u00e9lectionnez Slide In<\/strong> dans le menu d\u00e9roulant.<\/li><\/ul>
                                                        \"\"<\/figure>
                                                        • Vous pouvez choisir l'insertion par la gauche, l'insertion par la droite ou l'insertion par le bas, en fonction de vos besoins en mati\u00e8re de conception.<\/li><\/ul>
                                                          \"\"<\/figure>

                                                          Cela s'applique \u00e0 tous les sc\u00e9narios dans lesquels vous souhaitez am\u00e9liorer l'attrait visuel d'une page web et l'interactivit\u00e9 avec l'utilisateur.<\/p>

                                                          \u00c9tape 7 : Optimisation de l'exp\u00e9rience utilisateur<\/h3>

                                                          Les animations d\u00e9clench\u00e9es par le d\u00e9filement peuvent am\u00e9liorer consid\u00e9rablement un site web, mais vous devez veiller \u00e0 ce que l'exp\u00e9rience de l'utilisateur soit fluide. Voici quelques conseils :<\/p>

                                                          Restez simple<\/strong>: Trop d'animations peuvent submerger l'utilisateur. Contentez-vous de quelques effets bien plac\u00e9s pour conserver un aspect professionnel.<\/p>

                                                          Optimisation mobile<\/strong>: Toutes les animations ne fonctionnent pas bien sur les appareils mobiles. Dans Elementor Pro, vous pouvez d\u00e9sactiver des animations sp\u00e9cifiques pour les mobiles et les tablettes afin que le site reste r\u00e9actif et convivial.<\/p>

                                                          \"\"<\/figure><\/div>

                                                          Tests inter-navigateurs<\/strong>: Les animations de d\u00e9filement peuvent se comporter diff\u00e9remment d'un navigateur \u00e0 l'autre. Testez toujours votre projet dans les navigateurs les plus courants pour vous assurer de sa coh\u00e9rence.<\/p>