Jump to content

Moving/Scrolling Logo Banner

Recommended Posts

I am wondering if there is a way to add a "Logo Wall" on the bottom of a page, just above the footer that scrolls automatically through all the logos.

In essence, I want to be able to add as many Brand logos that I work for to automatically scroll through at the bottom of the page for prospective clients and site visitors to view.

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 weeks later...
On 8/8/2022 at 10:48 AM, DevonHarris said:

hey @tuanphan just wondering if anyone ever figured this out?  Trying to make a smooth-scrolling logo section.  website: tlastmarks.com/home-1. you'll see the accolades section.  Just wondering how I can use a list or carousel to replicate this look and make it scrolling?  Thanks!

What is access password?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
9 hours ago, tuanphan said:

What is access password?

Access PW is Devon.  Just FYI for anyone interested in achieving this 'look' but don't need it to be functional, I used Carl Johnson's image banner hack from YouTube.  However it would be great to be able to apply a smooth-scroll to the List Carousel layout, with each item being clickable

Link to comment
On 8/8/2022 at 10:48 AM, DevonHarris said:

hey @tuanphan just wondering if anyone ever figured this out?  Trying to make a smooth-scrolling logo section.  website: tlastmarks.com/home-1. you'll see the accolades section.  Just wondering how I can use a list or carousel to replicate this look and make it scrolling?  Thanks!

The page doesn't work now.

To make list section autoscroll, you can add this code to Code Injection > Footer

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

  $( ( ) => {
  
    /*
    
      auto click user items list arrow right
      
      Version       : 0.1d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      Note          : this effect is not active in SS Preview to test it use
                      private browsing < https://bit.ly/3f6lhq2 >.
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const clickIntervalSeconds = 3;
    
    const dataSectionIds = [
    
      /*
      
        to limit the effect to certain page sections, enter data section ids for
        each page section.
        
        the format of each line is a data section id
        
        following is an example line. copy the example line below and paste
        after the example line. remove '// ' at beginning of pasted line. repeat
        for as many data sections ids as needed
        
        */
        
      // '[enter data section id here between single quotes]',
      
      ];
      
    // do not change anything below, there be the borg here
    
    if ( window.frameElement !== null ) return; // bail if in Preview
    
    let selector = [
    
      '.user-items-list-banner-slideshow__arrow-button--right',
      
      '.user-items-list-carousel__arrow-button--right',
      
      ];
      
    // begin shotgun selector
    
      if ( ! dataSectionIds.length ) dataSectionIds.push ( '' );
      
      selector = $.map ( selector, function ( s, i ) {
      
        if ( ! dataSectionIds.length ) dataSectionIds.push ( '' );
        
        const a = $.map ( dataSectionIds, function ( d, i ) {
        
          if ( d ) d = '[data-section-id="' + d + '"] ';
          
          return d + s;
          
          } )
          
        return a;
        
        } )
        
        .join ( ', ' );
        
      // end shotgun selector
    
    const $button = $( selector );
    
    if ( ! $button.length ) return; // bail if no button
    
    const click = ( ) => {
    
      $button.click ( );
      
      }
      
    setInterval ( click, clickIntervalSeconds * 1000 );
    
    } );
    
  </script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.