{"id":1653,"date":"2024-07-09T18:59:19","date_gmt":"2024-07-09T17:59:19","guid":{"rendered":"https:\/\/test.bknown.be\/?page_id=1653"},"modified":"2024-07-17T17:31:28","modified_gmt":"2024-07-17T16:31:28","slug":"background-change-on-scroll","status":"publish","type":"page","link":"https:\/\/test.bknown.be\/?page_id=1653","title":{"rendered":"BACKGROUND CHANGE ON SCROLL"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1653\" class=\"elementor elementor-1653\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4379fe e-con-full panel e-flex e-con e-parent\" data-id=\"f4379fe\" data-element_type=\"container\" data-e-type=\"container\" data-color=\"blue\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e96b48 elementor-widget elementor-widget-heading\" data-id=\"6e96b48\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">BLUE<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a005bb0 e-con-full panel e-flex e-con e-parent\" data-id=\"a005bb0\" data-element_type=\"container\" data-e-type=\"container\" data-color=\"green\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9a594f3 elementor-widget elementor-widget-heading\" data-id=\"9a594f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">BLUE<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-92f15fb e-con-full panel e-flex e-con e-parent\" data-id=\"92f15fb\" data-element_type=\"container\" data-e-type=\"container\" data-color=\"yellow\">\n\t\t\t\t<div class=\"elementor-element elementor-element-284e6cd elementor-widget elementor-widget-heading\" data-id=\"284e6cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">BLUE<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-56377be e-con-full panel e-flex e-con e-parent\" data-id=\"56377be\" data-element_type=\"container\" data-e-type=\"container\" data-color=\"orange\">\n\t\t\t\t<div class=\"elementor-element elementor-element-138db59 elementor-widget elementor-widget-heading\" data-id=\"138db59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">BLUE<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1fe1d56 e-con-full panel e-flex e-con e-parent\" data-id=\"1fe1d56\" data-element_type=\"container\" data-e-type=\"container\" data-color=\"red\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eeba1dc elementor-widget elementor-widget-heading\" data-id=\"eeba1dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">BLUE<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-04556b5 e-flex e-con-boxed e-con e-parent\" data-id=\"04556b5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a40c86a elementor-widget elementor-widget-html\" data-id=\"a40c86a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\r\njQuery(function($){\r\n    $(window).scroll(function() {\r\n\r\n  \/\/ selectors\r\n  var $window = $(window),\r\n      $body = $('body'),\r\n      $panel = $('.panel');\r\n\r\n  \/\/ Change 33% earlier than scroll position so colour is there when you arrive.\r\n  var scroll = $window.scrollTop() + ($window.height() \/ 3);\r\n\r\n  $panel.each(function () {\r\n    var $this = $(this);\r\n\r\n    \/\/ if position is within range of this panel.\r\n    \/\/ So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).\r\n    \/\/ Remember we set the scroll to 33% earlier in scroll var.\r\n    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {\r\n\r\n      \/\/ Remove all classes on body with color-\r\n      $body.removeClass(function (index, css) {\r\n        return (css.match (\/(^|\\s)color-\\S+\/g) || []).join(' ');\r\n      });\r\n\r\n      \/\/ Add class of currently active div\r\n      $body.addClass('color-' + $(this).data('color'));\r\n    }\r\n  });\r\n\r\n}).scroll();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-042cf65 mesh-test e-flex e-con-boxed e-con e-parent\" data-id=\"042cf65\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6da4ba elementor-widget elementor-widget-heading\" data-id=\"b6da4ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add Your Heading Text Here<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8b2617 elementor-widget elementor-widget-text-editor\" data-id=\"d8b2617\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><iframe title=\"Create AMAZING &amp; ANIMATED Mesh Gradient Backgrounds in Elementor FREE\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/3DEFtjSP5X8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-073ff1b mesh-test e-flex e-con-boxed e-con e-parent\" data-id=\"073ff1b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d86e5ef elementor-widget elementor-widget-heading\" data-id=\"d86e5ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add Your Heading Text Here<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ad51e65 e-flex e-con-boxed e-con e-parent\" data-id=\"ad51e65\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BLUE BLUE BLUE BLUE BLUE Add Your Heading Text Here Add Your Heading Text Here<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1653","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.bknown.be\/index.php?rest_route=\/wp\/v2\/pages\/1653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.bknown.be\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.bknown.be\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.bknown.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.bknown.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1653"}],"version-history":[{"count":43,"href":"https:\/\/test.bknown.be\/index.php?rest_route=\/wp\/v2\/pages\/1653\/revisions"}],"predecessor-version":[{"id":1762,"href":"https:\/\/test.bknown.be\/index.php?rest_route=\/wp\/v2\/pages\/1653\/revisions\/1762"}],"wp:attachment":[{"href":"https:\/\/test.bknown.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}