{"type":"layout","children":[{"type":"section","props":{"style":"default","width":"default","vertical_align":"middle","title_position":"top-left","title_rotation":"left","title_breakpoint":"xl","image_position":"center-center","height":"full","attributes":"data-color=\"white\""},"children":[{"type":"row","props":{},"children":[{"type":"column","props":{"image_position":"center-center","media_overlay_gradient":""},"children":[{"type":"headline","props":{"title_element":"h1","content":"Magic scrolling colours","text_align":"center"}},{"type":"text","props":{"margin":"default","column_breakpoint":"m","content":"Scroll to animate the background colour of the body as a full height panel becomes visible.","text_align":"center"}}]}]}],"name":"White"},{"type":"section","props":{"style":"default","width":"default","vertical_align":"middle","title_position":"top-left","title_rotation":"left","title_breakpoint":"xl","image_position":"center-center","height":"full","attributes":"data-color=\"violet\""},"children":[{"type":"row","props":{},"children":[{"type":"column","props":{"image_position":"center-center","media_overlay_gradient":""},"children":[{"type":"headline","props":{"title_element":"h2","content":"Violet panel","text_align":"center","title_style":"h1"}}]}]}],"name":"Violet"},{"type":"section","props":{"style":"default","width":"default","vertical_align":"middle","title_position":"top-left","title_rotation":"left","title_breakpoint":"xl","image_position":"center-center","height":"full","attributes":"data-color=\"indigo\""},"children":[{"type":"row","props":{},"children":[{"type":"column","props":{"image_position":"center-center","media_overlay_gradient":""},"children":[{"type":"headline","props":{"title_element":"h2","content":"Indigo panel","text_align":"center","title_style":"h1"}}]}]}],"name":"Indigo"},{"type":"section","props":{"style":"default","width":"default","vertical_align":"middle","title_position":"top-left","title_rotation":"left","title_breakpoint":"xl","image_position":"center-center","height":"full","attributes":"data-color=\"blue\""},"children":[{"type":"row","props":{},"children":[{"type":"column","props":{"image_position":"center-center","media_overlay_gradient":""},"children":[{"type":"headline","props":{"title_element":"h2","content":"Blue panel","text_align":"center","title_style":"h1"}}]}]}],"name":"Blue"},{"type":"section","props":{"style":"default","width":"default","vertical_align":"middle","title_position":"top-left","title_rotation":"left","title_breakpoint":"xl","image_position":"center-center","height":"full","attributes":"data-color=\"green\""},"children":[{"type":"row","props":{},"children":[{"type":"column","props":{"image_position":"center-center","media_overlay_gradient":""},"children":[{"type":"headline","props":{"title_element":"h2","content":"green panel","text_align":"center","title_style":"h1"}}]}]}],"name":"green"},{"type":"section","props":{"style":"default","width":"default","vertical_align":"middle","title_position":"top-left","title_rotation":"left","title_breakpoint":"xl","image_position":"center-center","height":"full","attributes":"data-color=\"yellow\""},"children":[{"type":"row","props":{},"children":[{"type":"column","props":{"image_position":"center-center","media_overlay_gradient":""},"children":[{"type":"headline","props":{"title_element":"h2","content":"yellow panel","text_align":"center","title_style":"h1"}}]}]}],"name":"yellow"},{"type":"section","props":{"style":"default","width":"default","vertical_align":"middle","title_position":"top-left","title_rotation":"left","title_breakpoint":"xl","image_position":"center-center","height":"full","attributes":"data-color=\"orange\""},"children":[{"type":"row","props":{},"children":[{"type":"column","props":{"image_position":"center-center","media_overlay_gradient":""},"children":[{"type":"headline","props":{"title_element":"h2","content":"orange panel","text_align":"center","title_style":"h1"}}]}]}],"name":"orange"},{"type":"section","props":{"style":"default","width":"default","vertical_align":"middle","title_position":"top-left","title_rotation":"left","title_breakpoint":"xl","image_position":"center-center","height":"full","attributes":"data-color=\"red\""},"children":[{"type":"row","props":{},"children":[{"type":"column","props":{"image_position":"center-center","media_overlay_gradient":""},"children":[{"type":"headline","props":{"title_element":"h2","content":"red panel","text_align":"center","title_style":"h1"}}]}]}],"name":"red"},{"type":"section","props":{"style":"default","width":"default","vertical_align":"middle","title_position":"top-left","title_rotation":"left","title_breakpoint":"xl","image_position":"center-center"},"children":[{"type":"row","props":{},"children":[{"type":"column","props":{"image_position":"center-center","media_overlay_gradient":""},"children":[{"type":"html","props":{"content":"<style>\n    body{\n        background-color: #fff;\n    transition: background-color 1s ease!important;\n        -webkit-transition: background-color 1s ease!important;\n    }\n    .uk-section-default{\n    background:transparent;        \n    }\n.color-violet {\n  background-color: #7A4EAB;\n}\n.color-indigo {\n  background-color: #4332CF;\n}\n.color-blue {\n  background-color: #2F8FED;\n}\n.color-green {\n  background-color: #4DCF42;\n}\n.color-yellow {\n  background-color: #FAEB33;\n}\n.color-orange {\n  background-color: #F19031;\n}\n.color-red {\n  background-color: #F2293A;\n}\n</style>"},"name":"Styles: move to the the custom settings"},{"type":"html","props":{"content":"<!-- remove this if you have a Jquery connected -->\n<script src=\"https://code.jquery.com/jquery-2.2.4.min.js\"/></script>  \n<!-- end remove block -->\n<script>\n    jQuery(window).scroll(function() {  \n  // selectors\n  var $window = $(window),\n      $body = $('body'),\n      $panel = $('.uk-section-default');\n  \n  // Change 33% earlier than scroll position so colour is there when you arrive.\n  var scroll = $window.scrollTop() + ($window.height() / 3); \n  $panel.each(function () {\n    var $this = $(this);    \n    // if position is within range of this panel.\n    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).\n    // Remember we set the scroll to 33% earlier in scroll var.\n    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {\n        \n      // Remove all classes on body with color-\n      $body.removeClass(function (index, css) {\n        return (css.match (/(^|\\s)color-\\S+/g) || []).join(' ');\n      });       \n      // Add class of currently active div\n      $body.addClass('color-' + $(this).data('color'));\n    }\n  });  \n}).scroll();\n</script>"},"name":"Script: see inside"}]}]}],"name":"Tools"}],"version":"2.5.9","modified":"2021-08-26T08:51:27.354Z","name":"Magic scrolling colours"}