{"id":1041,"date":"2025-11-14T10:51:47","date_gmt":"2025-11-14T10:51:47","guid":{"rendered":"https:\/\/laywow.com\/animation\/background-color-change-on-scroll\/"},"modified":"2025-11-14T11:10:29","modified_gmt":"2025-11-14T11:10:29","slug":"background-color-change-on-scroll","status":"publish","type":"post","link":"https:\/\/laywow.com\/en\/animations\/background-color-change-on-scroll\/","title":{"rendered":"Background Color Change on Scroll"},"content":{"rendered":"\n

This effect changes the background color of the <body><\/code><\/strong> when the user scrolls to different sections of a page \u2014 perfect for creating a fluid and immersive storytelling experience.<\/p>\n\n

Add Classes and Attributes in Elementor<\/h2>\n\n

Step 1: Add the Class .panel<\/code><\/h3>\n\n

For each section where you want to change the background color, as well as the ones preceding and following it:<\/p>\n\n

    \n
  1. Select your section<\/strong> in Elementor<\/li>\n\n\n\n
  2. Go to Advanced \u2192 CSS Classes<\/strong><\/li>\n\n\n\n
  3. Add: panel<\/code> \"\"<\/li>\n<\/ol>\n\n

    Step 2: Define the Color via an Attribute<\/h3>\n\n

    Still in your section:<\/p>\n\n

      \n
    1. Go to Advanced \u2192 Attributes<\/strong><\/li>\n\n\n\n
    2. Add a new attribute: Key:<\/strong> data-color<\/code> Value:<\/strong> gray<\/code> or blue<\/code> or purple<\/code><\/li>\n<\/ol>\n\n
      \"\"<\/figure>\n\n
      \n

      Example: data-color|blue<\/code> will apply the class .color-blue<\/code> to the body when the section is visible.<\/p>\n<\/blockquote>\n\n

      Add Color Styles to your Site<\/h2>\n\n

      Go to Appearance \u2192 Customize \u2192 Additional CSS<\/strong>, or in Elementor \u2192 Custom Code \u2192 Global CSS.<\/p>\n\n

      Add this code:<\/p>\n\n

      body {\n    background-color: #101012;\n    transition: background-color 1s ease;\n}\n\n.color-blue {\n    background-color: #7dc4ea!important;\n}\n\n.color-gray {\n    background-color: #222225!important;\n}\n\n.color-purple {\n    background-color: #7300FF!important;\n}\n<\/code><\/pre>\n\n
      You can create as many colors as you want<\/strong>:Declare a .color-xxx<\/code> then use data-color|xxx<\/code> in your section.<\/p>\n\n
      Add the jQuery Script in Elementor<\/h2>\n\n
        \n
      1. Go to Elementor \u2192 Custom Code<\/strong><\/li>\n\n\n\n
      2. Click Add New Code<\/strong><\/li>\n\n\n\n
      3. Choose position Footer \u2013 End of <\/body><\/code><\/strong> <\/li>\n\n\n\n
      4. Paste this code:<\/li>\n<\/ol>\n\n
        <script>\njQuery(function($){\n    $(window).scroll(function() {\n\n        var $window = $(window),\n            $body = $('body'),\n            $panel = $('.panel'); \/\/ Chaque section \u00e0 d\u00e9tecter\n        \n        var scroll = $window.scrollTop() + ($window.height() \/ 2);\n\n        $panel.each(function () {\n            var $this = $(this);\n\n            \/\/ V\u00e9rifie si la section est au milieu de l'\u00e9cran\n            if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {\n\n                \/\/ Supprime toutes les classes color-*\n                $body.removeClass(function (index, css) {\n                    return (css.match(\/(^|\\s)color-\\S+\/g) || []).join(' ');\n                });\n\n                \/\/ Ajoute la couleur li\u00e9e \u00e0 la section active\n                $body.addClass('color-' + $(this).data('color'));\n            }\n        });\n\n    }).scroll(); \/\/ Ex\u00e9cute au chargement\n});\n<\/script><\/code><\/pre>\n\n
        How Does it Work?<\/h2>\n\n
          \n
        • Each section with .panel<\/code> is monitored.<\/li>\n\n\n\n
        • When the scroll reaches the middle of this section<\/strong>, the script:\n
            \n
          • removes all current color-*<\/code> classes from the body<\/li>\n\n\n\n
          • adds color-gray<\/code>, color-purple<\/code>, etc.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • The CSS then changes the background color of the site.<\/li>\n<\/ul>\n\n
            With the transition:<\/p>\n\n
            transition: background-color 1s ease;\n<\/code><\/pre>\n\n
            The color changes smoothly<\/strong>, for a storytelling effect.<\/p>\n\n
            Tips & Customization<\/h2>\n\n
            Add more Colors<\/h3>\n\n
            Declare a new class:<\/p>\n\n
            .color-green {\n    background-color: #1abc9c!important;\n}\n<\/code><\/pre>\n\n
            Then in Elementor:<\/p>\n\n
            data-color|green\n<\/code><\/pre>\n\n
            Make the Change Faster or Slower<\/h3>\n\n
            Modify in body<\/code>:<\/p>\n\n
            transition: background-color 0.4s ease;\n<\/code><\/pre>\n\n
            Change the Detection Area (Middle of Section)<\/h3>\n\n
            In the JS:<\/p>\n\n
            var scroll = $window.scrollTop() + ($window.height() \/ 2);\n<\/code><\/pre>\n\n
            Replace \/ 2<\/code> with:<\/p>\n\n
              \n
            • \/ 3<\/code> \u2192 triggers earlier<\/li>\n\n\n\n
            • \/ 1.5<\/code> \u2192 triggers later<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
              This effect changes the background color of the <body> when the user scrolls to different sections of a page \u2014 perfect for creating a fluid and immersive storytelling experience. Add Classes and Attributes in Elementor Step 1: Add the Class .panel For each section where you want to change the background color, as well as […]<\/p>\n","protected":false},"author":1,"featured_media":1040,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25,1],"tags":[22,28],"class_list":["post-1041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animations","category-animation","tag-scroll","tag-transitions"],"acf":[],"_links":{"self":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/1041","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=1041"}],"version-history":[{"count":1,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/1041\/revisions"}],"predecessor-version":[{"id":1042,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/1041\/revisions\/1042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media\/1040"}],"wp:attachment":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media?parent=1041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/categories?post=1041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/tags?post=1041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}