Articles in this section

See more

Dynamic page background that changes color on scroll

  • Updated

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.

You can view a live example of this effect here.

 

dynamic-background-shift.gif

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 bar for this page in the Page Settings.

Step 2

Open your page and click on "Branding" tab which you can find in the page editor header. Then click on "Edit Custom CSS" and paste the following code:

/* 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

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 4

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

Related articles