Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Background change color on scroll - help!


oldegray
Go to solution Solved by creedon,

Question

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

Link to post
  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@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. 

@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>

Posted Images

18 answers to this question

Recommended Posts

  • 1

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 1

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.

1293819610_ScreenShot2021-02-03at12_48_37PM.png.3455998975368a957f4f83f15c181efe.png

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.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

@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

Link to post
  • 0

@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?

Link to post
  • 0

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

Link to post
  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...