Dynamic page background that changes color on scroll

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this hack.

This guide will help you create a dynamic page background and navbar effect that changes color on scroll.

Follow these steps to achieve this result:

Step 1

Create a custom navigation bar with the background color set to "transparent". Set your transparent navigation bar as the custom navigation for this page in the "Page" settings.

Step 2

Open your page and click on the "Branding" (Semplice 4) "Look & Feel" (Semplice 5) tab which you can find in the page editor header. Then click on "Edit Custom CSS" and paste the following CSS:

/* Header - Dark Mode */
#content-holder .semplice-navbar .navbar-inner {
transition: filter 0.3s ease !important;
}

#content-holder .semplice-navbar.dark .navbar-inner {
filter: invert(1) brightness(100) !important;
}

/* Dynamic Section Background */
#content-holder .transition-wrap {
transition: background-color 0.3s ease !important;
}

#content-holder .transition-wrap .content-block.transparent {
background: transparent !important;
background-color: transparent !important;
}

Step 3 (for Semplice 4)

Add a "Code" module at the very bottom of your page. Open the "Code" module settings and paste the following code:

<script>
(function($) {
$(document).ready(function() {
  var controller = new ScrollMagic.Controller();
  var sections = '.transition-wrap .content-block';
  var header = '.semplice-navbar';
 
  function lightOrDark(color) {
    var r, g, b, hsp;

    if (color.match(/^rgb/)) {
      color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);

      r = color[1];
      g = color[2];
      b = color[3];
    } else {
      color = +('0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));

      r = color >> 16;
      g = color >> 8 & 255;
      b = color & 255;
    }

    hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));

    return hsp > 127.5 ? 'light' : 'dark';
  }
 
  function setColor(color) {
    $('.transition-wrap').css('background-color', color);
  }
 
  function setHeaderMode(mode) {
    var $header = $(header);
    if ($header.hasClass(mode)) return;
    $header.removeClass('dark light').addClass(mode);
  }
 
  function init() {
      $(sections).each(function(index, el) {
   var $section = $(el);
   var color = $section.css('background-color');

   if (color.lastIndexOf('rgba', 0) !== 0) {
  new ScrollMagic
    .Scene({ triggerElement: el })
    .addTo(controller)
      .duration(function() { return $section.outerHeight() })
    .on('start end', function() {
      setColor(color);
      setHeaderMode(lightOrDark(color));
    });
   }

   $section.addClass('transparent');
 });
  }
 
  function initTimer() {
    var $containers = $('.content-container');
    if ($containers.length === 1) {
      init();
      clearInterval(timer);
    }
  }
 
  var timer = setInterval(initTimer, 100);
});
})(jQuery);
</script>

Step 3 (for Semplice 5)

Add a "Code" module at the very bottom of your page. Open the "Code" module settings and paste the following code:

<script>
(function($) {
$(document).ready(function() {
var sections = '.transition-wrap .content-block';
var header = '.semplice-navbar';
var animations = {};

function lightOrDark(color) {
var r, g, b, hsp;

if (color.match(/^rgb/)) {
color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);

r = color[1];
g = color[2];
b = color[3];
} else {
color = +('0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));

r = color >> 16;
g = color >> 8 & 255;
b = color & 255;
}

hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));

return hsp > 127.5 ? 'light' : 'dark';
}

function setColor(color) {
$('.transition-wrap').css('background-color', color);
}

function setHeaderMode(mode) {
var $header = $(header);
if ($header.hasClass(mode)) return;
$header.removeClass('dark light').addClass(mode);
}

function init() {
$(sections).each(function(index, el) {
var $section = $(el);
var color = $section.css('background-color');
console.log(color);
if (color.lastIndexOf('rgba', 0) !== 0) {
var sectionId = $section.attr('id');
var trigger = '#' + sectionId;
animations[sectionId] = gsap.timeline({
scrollTrigger: {
trigger: trigger,
start: 'top bottom',
end: 'bottom bottom',
scrub: 0,
onEnter: function() {
setColor(color);
setHeaderMode(lightOrDark(color));
},
onEnterBack: function() {
setColor(color);
setHeaderMode(lightOrDark(color));
}
}
});
}
$section.addClass('transparent');
});
}
function initTimer() {
var $containers = $('.content-container');
if ($containers.length === 1) {
console.log('init');
init();
clearInterval(timer);
}
}
var timer = setInterval(initTimer, 100);
});
})(jQuery);
</script>

Step 4

Now the only thing you need is to set the background color for each section you create on the page. When you will scroll to this section the page background will match the color that was set in the section background.