Scrolling background-color transition

How To
1

Hi there,

Do you know if it is possible to create background transition with Bricks?
I want the background color to change while scrolling.

Here is an example: Elementor Background Transition Widget - Premium Addons for Elementor

Thanks in advance for your help,
Thomas

2

Hi there,

I found a solution thanks to this post:

I just add the following code to Settings > Page settings > Custom Code > Custom CSS :

body {
  transition: background 1s ease;
}

And the following one to Settings > Page settings > Custom Code > Body (footer) scripts :

<script>
  var body = document.getElementsByTagName('body')[0];
  body.style.backgroundColor = '#329BD3';

  window.onscroll = function (event) {
      var scroll = window.pageYOffset;
      if (scroll < 300) {
          body.style.backgroundColor = '#329BD3';
      } else if (scroll >= 300 && scroll < 600) {
          body.style.backgroundColor = 'yellow';
      } else if (scroll >= 600 && scroll < 1200) {
          body.style.backgroundColor = 'blue';
      } else if (scroll >= 1200 && scroll < 1800) {
          body.style.backgroundColor = 'orange';
      } else if (scroll >= 1800 && scroll < 3000) {
          body.style.backgroundColor = 'red';
      } else {
          body.style.backgroundColor = 'purple';
      }
  }
</script>

Have a great day,
Thomas

1 Like