{"id":975,"date":"2025-08-19T10:53:37","date_gmt":"2025-08-19T10:53:37","guid":{"rendered":"https:\/\/laywow.com\/animation\/parallax-effect-on-an-image\/"},"modified":"2025-09-17T15:08:47","modified_gmt":"2025-09-17T15:08:47","slug":"parallax-effect-on-an-image","status":"publish","type":"post","link":"https:\/\/laywow.com\/en\/animations\/parallax-effect-on-an-image\/","title":{"rendered":"Parallax Effect on an Image"},"content":{"rendered":"\n

The parallax<\/strong> effect adds depth to a website by making an image move slower than its container when scrolling. Here’s how to easily integrate it into Elementor<\/strong> using GSAP + ScrollTrigger<\/strong>.<\/p>\n\n

<\/p>\n\n

Add the GSAP Code in Elementor<\/h2>\n\n

\ud83d\udc49 In Elementor:<\/p>\n\n

    \n
  • Go to your WordPress dashboard<\/strong>.<\/li>\n\n\n\n
  • Navigate to Elementor > Custom Code<\/strong>.<\/li>\n\n\n\n
  • Click on Add New Code<\/strong>.<\/li>\n\n\n\n
  • Name it, for example: Effet de parallaxe sur une image<\/code>.<\/li>\n\n\n\n
  • Paste the following code, selecting the location <\/body – End><\/strong> \"\" :<\/li>\n<\/ul>\n\n
    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.9.1\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.9.1\/ScrollTrigger.min.js\"><\/script>\n\n<script>\ngsap.utils.toArray(\".section-parallax .parallax-content\").forEach((section, i) => {\n  const heightDiff = section.offsetHeight - section.parentElement.offsetHeight;\n  \n  gsap.fromTo(section,{ \n    y: -heightDiff\n  }, {\n    scrollTrigger: {\n      trigger: section,\n      scrub: true\n    },\n    y: 0,\n    ease: \"none\"\n  });\n});\n<\/script><\/code><\/pre>\n\n
    <\/p>\n\n
    Create the Structure in Elementor<\/h2>\n\n
    Step 1: the Parent Container<\/h3>\n\n
      \n
    • Add an Elementor container<\/strong>.<\/li>\n\n\n\n
    • Give it the CSS class: section-parallax<\/code><\/li>\n\n\n\n
    • Set the container height to approximately 80vh<\/strong> (smaller than the image to see the effect).<\/li>\n<\/ul>\n\n
      \"\"<\/figure>\n\n
      Step 2: the Image<\/h3>\n\n
        \n
      • Add an Image<\/strong> widget to this container.<\/li>\n\n\n\n
      • Give it the CSS class: parallax-content<\/code><\/li>\n\n\n\n
      • In the image’s advanced settings:\n
          \n
        • Position<\/strong>: Absolute<\/li>\n\n\n\n
        • Size<\/strong>: fully cover the container (width 100%, height auto or fixed).<\/li>\n\n\n\n
        • Height<\/strong>: in the demo \u2192 approximately 200vh<\/strong> (taller than the container to clearly see the offset).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n
          \"\"<\/figure>\n\n
          <\/p>\n\n
          Expected Result<\/h2>\n\n
          When you scroll, the image moves slower than the rest of the content \u2192 creating an elegant and modern depth effect<\/strong>.<\/p>\n\n
          <\/p>\n\n
          Customize the Code<\/h2>\n\n
          Let’s look at the key part:<\/p>\n\n
          gsap.fromTo(section,{ \n    y: -heightDiff\n  }, {\n    scrollTrigger: {\n      trigger: section,\n      scrub: true\n    },\n    y: 0,\n    ease: \"none\"\n});\n<\/code><\/pre>\n\n
          Explanations:<\/h3>\n\n
            \n
          • y: -heightDiff<\/strong> \u2192 The image starts offset upwards by the difference between its size and the container’s.<\/li>\n\n\n\n
          • y: 0<\/strong> \u2192 The image returns to its normal position during scrolling.<\/li>\n\n\n\n
          • scrub: true<\/strong> \u2192 Synchronizes the animation with the scroll progress.<\/li>\n\n\n\n
          • ease: “none”<\/strong> \u2192 No acceleration, the effect remains linear.<\/li>\n<\/ul>\n\n
            Possible Customizations:<\/h3>\n\n
              \n
            1. Change the scroll speed<\/strong>\n
                \n
              • Replace scrub: true<\/code> with scrub: 1<\/code> or scrub: 2<\/code> \u2192 adds an inertia effect (smoother).<\/li>\n<\/ul>\n<\/li>\n\n\n\n
              • Limit the trigger area<\/strong> scrollTrigger: { trigger: section, start: \"top 80%\", \/\/ commence quand le container arrive \u00e0 80% du viewport end: \"bottom 20%\", \/\/ termine quand le bas atteint 20% scrub: true }<\/code><\/li>\n\n\n\n
              • Add an easing for a smoother effect<\/strong> ease: \"power2.out\"<\/code><\/li>\n\n\n\n
              • Apply to multiple images<\/strong>\n
                  \n
                • The code gsap.utils.toArray(\".section-parallax .parallax-content\")<\/code> already handles multiple sections automatically.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n
                  <\/p>\n\n
                  \u2705 You can now create a modern and professional parallax<\/strong> effect on your images with Elementor + GSAP.<\/p>\n","protected":false},"excerpt":{"rendered":"
                  The parallax effect adds depth to a website by making an image move slower than its container when scrolling. Here’s how to easily integrate it into Elementor using GSAP + ScrollTrigger. Add the GSAP Code in Elementor \ud83d\udc49 In Elementor: Create the Structure in Elementor Step 1: the Parent Container Step 2: the Image Expected […]<\/p>\n","protected":false},"author":1,"featured_media":969,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25],"tags":[22],"class_list":["post-975","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animations","tag-scroll"],"acf":[],"_links":{"self":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/comments?post=975"}],"version-history":[{"count":1,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/975\/revisions"}],"predecessor-version":[{"id":976,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/975\/revisions\/976"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media\/969"}],"wp:attachment":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media?parent=975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/categories?post=975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/tags?post=975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}