Background change color on scroll - help!

Site URL: https://codepen.io/tobiasthaden/pen/OVWKjm

Hello there everyone!  I was curious if anyone can help me with inserting this bout of code into Squarespace to change my background.  I am curious if this is even possible, considering that from what I understand to change backgrounds we can only use CSS code?  Am I wrong in that?  Anywho, I'm looking to achieve the same effect as this groovy example .  Any insight would be MUCH appreciated. 

xo

I don't know for sure but I think a similar effect could be achieved in a Squarespace site.

It would require Javascript and CSS. You would need the business plan or above to execute the Javascript. For a v7.1 site I could see a page with multiple sections. Each with a background color defined by some Javascript at initialization and then the window scroll would change the background colors.

@creedon Thank you for your response!  Do you think there is  a way to do this on 7.0 Brine template?

Yes. On v7.0 with an Index page more easily than other types of pages.

Set up an Index page with five pages in it.

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Add the following to Index Settings > Advanced > Page Header Code Injection.

<style>

  body {
  
    -webkit-transition : background-color 0.5s linear;
    -o-transition : background-color 0.5s linear;
    transition : background-color 0.5s linear;
    
    }
    
  .Index-page {
  
    background-color : transparent;
    /* height : 100vh; */ /* can be used when testing with empty sections */
    
    }
    
  </style>

<script>

  $( ( ) => {
  
    /*
    
      change color background on scroll
      
      SS Version : 7.0
      Template : Brine
      
      */
      
    const sectionColors = [ // add a color for each page within the Index page
    
      'white',
      
      'red',
      
      'green',
      
      'blue',
      
      'white' // last or only item doesn't get a comma
      
      ];
      
    // do not change anything below, there be the borg here
    
    $( window ).scroll ( function ( ) {
    
      $( '.Index-page' ).each ( function ( i ) {
      
        if ( ! ( $( this ).position ( ).top <= $( window ).scrollTop ( ) ) )
        
          return true;
          
        $( 'body' ).attr ( 'style', 'background-color :' + sectionColors [ i ] + ' !important' );
        
        } );
        
      } );
      
    } );
    
  </script>

This is for a v7.0 site using the Brine template family.

You can change the number of pages and colors to suit your needs. The names of the Index and other pages can be whatever you need.

Let us know how it goes.

@creedon Thanks for the response!  It seems to make sense, but when I set up a test index page and follow your instruction, I'm not seeing any changes - just the plain background

@creedon THAT'S THE TICKET!  You're a magician! How do I buy you a beer? (or coffee or milk or whatever)

@creedon  So this works great, but it removes my banner images on each index page section.  Does the "background-color : transparent" cause this?  Is there a work-around with that?

***in addition to last note**

I should be more clear - is there a way in squarespace to only apply this block of code to one specific index page instead of the code calling all Index Pages in the website?

Please post the URL for the Index page.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Sure! 

https://www.kaylajoan.com/  

Each page is set up as an Index page with a banner image separating parts of my page.  I've also been practicing coding with the floating ball overlay, if that's irritating I can surely turn them off 😂

I've updated my code post.

3 hours ago, oldegray said:

I've also been practicing coding with the floating ball overlay, if that's irritating I can surely turn them off 

 That code looks somewhat familiar! 🙂

17 hours ago, oldegray said:

to only apply this block of code to one specific index page instead of the code calling all Index Pages in the website?

The code when installed per my instructions should only effect the Index pages in which it is installed.

While I was diagnosing what was going on I noticed a few other things you may want to take care of.

The following code appears to be a previous attempt at a background color change. I suggest removing it as it isn't doing anything functional.

<script>
$(window).scroll(function() {
  
  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');
  
  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 3);
 
  $panel.each(function () {
    var $this = $(this);
    
    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
       
      // Add class of currently active div
      $body.addClass('color-' + $(this).data('color'));
    }
  });    
  
}).scroll();
</script>

The following code is CCS wrapped in a script tag. That won't work. Either the tag should be changed to style or the script tag removed and the CSS moved to Design > Custom CSS.

<script>
[data-section-id="philosophy"] .section-background {
    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;
    background-size: 400% !important;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-animation: Gradient 10s ease infinite !important;
    -moz-animation: Gradient 10s ease infinite !important;
    animation: Gradient 10s ease infinite !important;
}
      </script>

Let us know how it goes.

Hi! Struggling a bit with this, is there a way to do it with Motto template?

@yasminaezz

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@creedon Is there a way to use this code to 7.1? Thank you for time and work. I truly appreciate it. 

@Olivia95

It may be possible to adapt this code to work with a page and page sections for v7.1.

Please post the URL for the page on your site where you want this effect.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@creedonThank you. 

Url: https://wolverine-conch-kjb9.squarespace.com/

pw: flower

@Olivia95

Please see Page Section Background Color Change on Scroll.

Let us know how it goes.

@Creedon Thank you! Thank you! Thank you! You are a legend! You're a hero! You're a national treasure! But seriously thank you for your time. 

Hi @creedon I would love to use this effect but am a noob! How do I target the specific sections?

@cwilk180

The page sections are targeted by position, excluding the footer. It is described In the code cited above.

hi, I went to example where you have: blue, red, etc, and on my computer, I don't see the color changes ... is there something wrong?

Thank you!

9 hours ago, rophillips77 said:

I don't see the color changes ... is there something wrong?

Yes. SS updated how backgrounds are handled and I need to update my code.

It may take me several days to update. If you don't hear back from me soon, please feel free to bump this thread.

I have updated my cited code in my May 10, 2021 post.

Hi , Is this still possible to add to a Squarespace 7.1? in the github project do I need to seperate the html to javascript and css , I want to add a background colour change to 3 sections on my website is that possible using your code? Sorry I am still learning and want to learn coding