Background change color on scroll - help!

My bad. I messed up the instructions. I've updated my previous post.

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.

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.5.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 Thank you for your response!  Do you think there is  a way to do this on 7.0 Brine template?

@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

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

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

Add the following to Page Settings > Advanced > Page Header Code Injection for the each page where you want the effect.

<!--

  begin change page background color by section on scroll
  
  Version      : 0.1d0
  
  SS Version   : 7.1
  
  Dependancies : jQuery
  
  Notes        : the code is comprised of several tags. all are needed for the
                 effect to work
                 
                 effect does not change the footer
                 
  By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    body {
    
      --timing-function : linear;
      --delay : 0.5s;
      
      background-color : red; /* should match first page section color from
                                 sectionColors below */
      }
      
    </style>
    
  <script>
  
      var sectionColors = [ /* add a color for each page section, except for the
                               footer */
        'red',
        
        'green',
        
        'blue',
        
        ];
        
    </script>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    /* unset all background colors making them transparent */
    
    #page :not( .has-background ) .section-background,
    #page .black:not( .has-background ) .section-background,
    #page .black-bold:not( .has-background ) .section-background,
    #page .bright:not( .has-background ) .section-background,
    #page .bright-inverse:not( .has-background ) .section-background,
    #page .dark:not( .has-background ) .section-background,
    #page .dark-bold:not( .has-background ) .section-background,
    #page .light:not( .has-background ) .section-background,
    #page .light-bold:not( .has-background ) .section-background,
    #page .page-section,
    #page .white:not( .has-background ) .section-background,
    #page .white-bold:not( .has-background ) .section-background
    
      {
      
        background-color : unset;
        
        }
        
    body {
    
      -webkit-transition : background-color var( --delay ) var( --timing-function );
      -o-transition : background-color var( --delay ) var( --timing-function );
      transition : background-color var( --delay ) var( --timing-function );
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      $( window ).scroll ( function ( ) {
      
        $( ':not( #footer-sections ) > .page-section' ).each ( function ( i ) {
        
          if ( ! ( $( this ).position ( ).top <= $( window ).scrollTop ( ) ) )
          
            return true;
            
          $( 'body' ).attr ( 'style', 'background-color :' +
          
            sectionColors [ i ] );
            
          } );
          
        } );
        
      } );
      
    </script>
    
  <!-- end change page background color by section 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.