{"id":124614,"date":"2018-09-17T08:02:51","date_gmt":"2018-09-17T06:02:51","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/parallax\/"},"modified":"2025-02-03T20:53:25","modified_gmt":"2025-02-03T19:53:25","slug":"parallax","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/parallaxe","title":{"rendered":"Parallaxe"},"content":{"rendered":"

Vous pouvez facilement cr\u00e9er des en-t\u00eates, des pieds de page et des pop-ups flottants dans Justinmind en utilisant des positions \u00e9pingl\u00e9es. Les \u00e9l\u00e9ments restent normalement en place pendant que vous simulez, mais s’ils sont \u00e9pingl\u00e9s, ils se d\u00e9placent avec le d\u00e9filement de l’\u00e9cran. Consultez les exemples ci-dessous pour apprendre \u00e0 utiliser les \u00e9l\u00e9ments \u00e9pingl\u00e9s et d’autres effets de parallaxe. <\/p>\n

<\/a>\u00c9pinglez en haut et en bas (en-t\u00eates et pieds de page autocollants)<\/h2>\n

    \n
  1. Concevez un en-t\u00eate ou un pied de page \u00e0 l’aide de rectangles, de texte et d’images. Une fois votre design termin\u00e9, s\u00e9lectionnez tous les \u00e9l\u00e9ments, cliquez avec le bouton droit de la souris, allez dans Grouper et s\u00e9lectionnez \u00ab\u00a0Grouper dans le panneau dynamique\u00a0\u00bb.
    \n\"S\u00e9lectionnez
    \nTous les \u00e9l\u00e9ments sont alors plac\u00e9s dans un panneau dynamique, qui fonctionne comme un conteneur. Vous pourrez \u00e9pingler ce panneau dynamique (et tous les \u00e9l\u00e9ments qu’il contient) en haut ou en bas de l’\u00e9cran.  <\/p>\n

    Notez que vous ne pourrez pas \u00e9pingler un groupe r\u00e9gulier lui-m\u00eame. Vous devrez placer plusieurs \u00e9l\u00e9ments dans un panneau dynamique afin de les \u00e9pingler. Si vous n’utilisez qu’un seul \u00e9l\u00e9ment comme en-t\u00eate\/pied de page, vous n’aurez pas besoin de le regrouper dans un panneau dynamique. <\/p>\n<\/li>\n

  2. Lorsque l’en-t\u00eate ou le pied de page est s\u00e9lectionn\u00e9, acc\u00e9dez \u00e0 la palette Propri\u00e9t\u00e9s. Cliquez sur le bouton \u00ab\u00a0Pin\u00a0\u00bb \u00e0 c\u00f4t\u00e9 des positions X et Y de l’en-t\u00eate. \"Cliquez<\/li>\n
  3. Vous verrez alors appara\u00eetre deux menus d\u00e9roulants. Cliquez sur celle qui se trouve \u00e0 c\u00f4t\u00e9 de la position Y et s\u00e9lectionnez \u00ab\u00a0\u00c9pingler en haut\u00a0\u00bb pour cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9, et s\u00e9lectionnez \u00ab\u00a0\u00c9pingler en bas\u00a0\u00bb pour cr\u00e9er un pied de page \u00e9pingl\u00e9. \"Choisissez<\/li>\n<\/ol>\n
    Remarque :<\/strong> assurez-vous que votre en-t\u00eate et votre pied de page se trouvent au-dessus des autres \u00e9l\u00e9ments dans la palette des calques, ou marquez-les comme \u00ab\u00a0toujours en haut\u00a0\u00bb dans la palette des propri\u00e9t\u00e9s.<\/div>\n

    \"Marquez
    \nAppuyez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet et v\u00e9rifier comment votre en-t\u00eate et votre pied de page resteront en place \u00e0 l’\u00e9cran lorsque vous ferez d\u00e9filer la page.<\/p>\n

    <\/a>Centre \u00e9pingl\u00e9 (pop-up fixe)<\/h2>\n

      \n
    1. Cr\u00e9ez une fen\u00eatre contextuelle avec des rectangles, des \u00e9l\u00e9ments de texte et un champ de saisie. S\u00e9lectionnez tous les \u00e9l\u00e9ments de la fen\u00eatre contextuelle, cliquez avec le bouton droit de la souris, allez dans Grouper et s\u00e9lectionnez \u00ab\u00a0Grouper dans un panneau dynamique\u00a0\u00bb. <\/li>\n
    2. Allez dans la palette Propri\u00e9t\u00e9s et cliquez sur le bouton \u00ab\u00a0Epingle\u00a0\u00bb pour ouvrir les options de position de l’\u00e9pingle. Dans les menus d\u00e9roulants X et Y, s\u00e9lectionnez \u00ab\u00a0\u00c9pingler au centre\u00a0\u00bb. \u00c0 pr\u00e9sent, la fen\u00eatre contextuelle doit \u00eatre \u00e9pingl\u00e9e aux centres horizontal et vertical de l’\u00e9cran lorsque vous le faites d\u00e9filer. <\/li>\n
    3. La fen\u00eatre pop-up \u00e9tant toujours s\u00e9lectionn\u00e9e, cliquez sur le bouton \u00ab\u00a0\u0153il\u00a0\u00bb dans la palette Propri\u00e9t\u00e9s, ce qui aura pour effet de masquer la fen\u00eatre pop-up par d\u00e9faut pendant la simulation.\"Marquez<\/li>\n
    4. Vous pouvez maintenant cr\u00e9er un \u00e9v\u00e9nement pour afficher la fen\u00eatre contextuelle avec un effet de fondu au chargement de la page. Cr\u00e9ez un \u00e9v\u00e9nement On Page Load<\/strong> + Show<\/strong> element, en s\u00e9lectionnant la fen\u00eatre contextuelle \u00e0 afficher. Ajoutez un effet de fondu et cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l’\u00e9v\u00e9nement. \"Afficher<\/li>\n<\/ol>\n

      Appuyez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet et voir comment votre pop-up s’affiche au chargement de l’\u00e9cran et reste \u00e9pingl\u00e9 au centre de l’\u00e9cran lorsque vous le faites d\u00e9filer.<\/p>\n

      <\/a>Effets de parallaxe<\/h2>\n

      biblioth\u00e8que de widgets parallaxe<\/a> pour cr\u00e9er des effets de parallaxe en fondu, en diapositive et flottants. Apr\u00e8s avoir t\u00e9l\u00e9charg\u00e9 la biblioth\u00e8que, importez-la dans votre palette Biblioth\u00e8ques (lien vers le tutoriel sur les biblioth\u00e8ques UI). Pour commencer, cr\u00e9ez un projet Web et augmentez sa hauteur \u00e0 environ 4 000 px. Placez un en-t\u00eate en haut de l’\u00e9cran et un pied de page en bas de l’\u00e9cran.<\/p>\n

      Fondu sur l’image du h\u00e9ros<\/h3>\n
        \n
      1. Faites glisser l’\u00e9l\u00e9ment Fade in layer de la biblioth\u00e8que parallaxe elements en haut du Canvas. Redimensionnez-le jusqu’\u00e0 ce qu’il occupe toute la largeur de l’\u00e9cran et qu’il ait une longueur d’environ 700 px. \"Faites<\/li>\n
      2. Examinez de plus pr\u00e8s l’\u00e9l\u00e9ment sur le canevas. Vous verrez qu’il s’agit d’un panneau dynamique comportant un \u00e9l\u00e9ment de texte cach\u00e9 intitul\u00e9 \u00ab\u00a0position initiale\u00a0\u00bb et un graphique \u00e0 l’int\u00e9rieur.Vous pouvez aller de l’avant et supprimer le graphique, mais assurez-vous de laisser le texte \u00ab\u00a0position initiale\u00a0\u00bb.L’effet de fondu fonctionne en affichant le panneau dynamique lorsque le d\u00e9filement de l’\u00e9cran est sup\u00e9rieur \u00e0 la position du texte de la \u00ab\u00a0position initiale\u00a0\u00bb. Comme il est plac\u00e9 en haut de l’\u00e9cran, l’\u00e9v\u00e9nement sera d\u00e9clench\u00e9 d\u00e8s que vous commencerez \u00e0 faire d\u00e9filer l’\u00e9cran. <\/li>\n
      3. Pour correspondre \u00e0 l’exemple, ajoutez une image d’arri\u00e8re-plan au panneau dynamique dans la palette Propri\u00e9t\u00e9s.\"Ajoutez<\/li>\n<\/ol>\n

        Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. D\u00e8s que vous commencez \u00e0 d\u00e9filer, l’image du h\u00e9ros doit appara\u00eetre. <\/p>\n

        Effets de glissement<\/h3>\n
          \n
        1. Faites glisser le calque Slide left de la biblioth\u00e8que parallaxe vers le Canvas, en le pla\u00e7ant au-dessus de l’image du h\u00e9ros. Redimensionnez le panneau jusqu’\u00e0 ce qu’il occupe toute la largeur de l’\u00e9cran et qu’il ait une longueur d’environ 850 px.
          \n\"S\u00e9lectionnez
          \nComme l’\u00e9l\u00e9ment de calque fondu, l’effet de glissement vers la gauche fonctionne en affichant le panneau dynamique chaque fois que le d\u00e9filement de l’\u00e9cran est sup\u00e9rieur au texte \u00ab\u00a0position initiale\u00a0\u00bb. <\/p>\n

          Le texte \u00ab\u00a0position initiale\u00a0\u00bb est plac\u00e9 \u00e0 l’endroit o\u00f9 commence l’image du h\u00e9ros, de sorte que vous verrez ce calque glisser vers la gauche lorsque vous ferez d\u00e9filer l’image du h\u00e9ros.<\/li>\n

        2. Supprimez les graphiques mais laissez le texte \u00ab\u00a0position initiale\u00a0\u00bb. Maintenez la touche Commande<\/kbd> (sur Mac) ou Contr\u00f4le<\/kbd> (sur Windows) enfonc\u00e9e pour placer des \u00e9l\u00e9ments \u00e0 l’int\u00e9rieur du panneau dynamique. Pour correspondre \u00e0 l’exemple, ajoutez trois \u00e9l\u00e9ments de texte et un rectangle, et donnez-leur le style souhait\u00e9. <\/li>\n
        3. Vous allez maintenant ajouter un \u00e9l\u00e9ment qui se glissera par la droite. Placez l’\u00e9l\u00e9ment Slide right de la biblioth\u00e8que parallaxe sur le Canvas \u00e0 l’endroit o\u00f9 se termine l’image du h\u00e9ros et redimensionnez-le pour qu’il soit de la largeur de l’\u00e9cran et d’une longueur de 850px. Placez trois \u00e9l\u00e9ments Text et un Rectangle \u00e0 l’int\u00e9rieur du panneau. \"Ajoutez<\/li>\n<\/ol>\n

          Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. Vous verrez appara\u00eetre l’image du h\u00e9ros et le panneau gauche de la diapositive peu apr\u00e8s. Continuez \u00e0 faire d\u00e9filer l’\u00e9cran et vous verrez appara\u00eetre le panneau de droite. <\/p>\n

          \u00c9pingler des \u00e9l\u00e9ments lors du d\u00e9filement<\/h3>\n
            \n
          1. Placez un rectangle sur le canevas sous l’\u00e9l\u00e9ment Slide right et redimensionnez-le pour qu’il prenne toute la largeur de l’\u00e9cran. Ajoutez une image d’arri\u00e8re-plan au rectangle pour qu’il corresponde \u00e0 l’exemple. <\/li>\n
          2. Le rectangle \u00e9tant toujours s\u00e9lectionn\u00e9, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/li>\n
          3. Cr\u00e9ez un \u00e9v\u00e9nement On Scroll<\/strong> + Move<\/strong>. S\u00e9lectionnez le rectangle comme \u00e9l\u00e9ment \u00e0 d\u00e9placer. Vous verrez appara\u00eetre deux menus d\u00e9roulants au-dessous desquels vous pouvez d\u00e9finir l’endroit o\u00f9 vous souhaitez que le rectangle se d\u00e9place. Cliquez sur le menu d\u00e9roulant \u00ab\u00a0Y\u00a0\u00bb (vertical) et s\u00e9lectionnez \u00ab\u00a0\u00c9pingler en haut\u00a0\u00bb. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l’\u00e9v\u00e9nement.\"\u00c9pinglez<\/li>\n
          4. De retour dans la palette \u00c9v\u00e9nements, cliquez sur le lien \u00ab\u00a0Ajouter une condition\u00a0\u00bb au-dessus de l’\u00e9v\u00e9nement que vous venez de cr\u00e9er.
            \n\"Cliquez
            \nConstruire la condition : <\/p>\n
              \n
            • a.<\/strong> Allez dans l’onglet Constantes et faites glisser la constante Window Scroll Y (Scroll Y)<\/strong> vers l’espace libre de l’expression.\"Faites<\/li>\n
            • b.<\/strong> Revenez \u00e0 l’onglet Fonctions et descendez jusqu’\u00e0 la section Logique. Faites glisser la fonction Greater (><\/strong> ) vers l’expression. <\/li>\n
            • c.<\/strong> Vous verrez un nouvel espace ouvert appara\u00eetre dans l’expression. Cliquez dans cet espace et saisissez la position Y (verticale) du rectangle. Dans cet exemple, le rectangle est positionn\u00e9 \u00e0 1686px sur le canevas. \"Tapez<\/li>\n
            • d.<\/strong> Cet \u00e9v\u00e9nement et cette condition \u00e9pingleront le rectangle en haut de l’\u00e9cran lorsque vous ferez d\u00e9filer le canevas au-del\u00e0 de 1686px.<\/li>\n<\/ul>\n<\/li>\n
            • Cliquez sur le lien \u00ab\u00a0Autre\u00a0\u00bb situ\u00e9 sous l’\u00e9v\u00e9nement que vous venez de cr\u00e9er dans la palette \u00c9v\u00e9nements. Cr\u00e9ez un \u00e9v\u00e9nement On Scroll<\/strong> + Move<\/strong> (D\u00e9filement<\/strong> + D\u00e9placement<\/strong> ). S\u00e9lectionnez le rectangle comme \u00e9l\u00e9ment \u00e0 d\u00e9placer. Laissez les menus d\u00e9roulants \u00ab\u00a0X\u00a0\u00bb et \u00ab\u00a0Y\u00a0\u00bb fix\u00e9s \u00e0 leurs valeurs par d\u00e9faut et cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l’\u00e9v\u00e9nement.
              \n\"Cr\u00e9ez
              \nCet \u00e9v\u00e9nement ram\u00e8ne le rectangle \u00e0 sa position initiale lorsque le d\u00e9filement de l’\u00e9cran est inf\u00e9rieur \u00e0 1686px.<\/li>\n
            • Sous le rectangle, ajoutez deux \u00e9l\u00e9ments de texte et stylisez-les comme vous le souhaitez. Copiez et collez-les deux fois et r\u00e9partissez-les \u00e0 intervalles r\u00e9guliers sur le canevas. Assurez-vous qu’ils se trouvent au-dessus du rectangle dans la palette des calques. \"Placez<\/li>\n<\/ol>\n

              Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. Faites d\u00e9filer le projet et vous verrez que le rectangle reste en haut de l’\u00e9cran tandis que les \u00e9l\u00e9ments de texte passent au-dessus de lui. <\/p>\n","protected":false},"excerpt":{"rendered":"

              Vous pouvez facilement cr\u00e9er des en-t\u00eates, des pieds de page et des pop-ups flottants dans Justinmind en utilisant des positions \u00e9pingl\u00e9es. Les \u00e9l\u00e9ments restent normalement en…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8420],"tags":[],"class_list":["post-124614","post","type-post","status-publish","format-standard","hentry","category-formation","category-interactions-web-et-mobiles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124614"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124614"}],"version-history":[{"count":3,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124614\/revisions"}],"predecessor-version":[{"id":126271,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124614\/revisions\/126271"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}