Jump to content

Adding revolving text for homepage headline

Recommended Posts

  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create a code block and save it.

Get the block id for the code block. You can use Heather Tovey's most excellent looking Squarespace ID Finder.

Edit the code block and add the following replacing [enter block id here] with the block id.

<!--

  begin code block text swap
  
  Version         : 0.1d0
  
  SS Versions     : 7.1, 7.0
  
  v7.0 Templates  : all
  
  Note            : the code is comprised of several tags. all are needed for
                    the full effect to work
  
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    @keyframes swap {
    
      0% {
      
        content : var( --text );
        
        }
        
      25% {
      
        content : 'fears';
        
        }
        
      50% {
      
        content : 'doubts';
        
        }
        
      75% {
      
        content : 'limits';
        
        }
        
      }
      
    [enter block id here] {
    
      --duration : 4s;
      --word-count : 4;
      --text : 'yourself';
      
      }
      
    [enter block id here] p {
    
      /* enter property value pairs to style text here */
      
      text-transform : uppercase;
      
      }
      
    [enter block id here] p span {
    
      /* enter property value pairs to style swap text here */
      
      }
      
    [enter block id here] .sqs-block-content span::after {
    
      animation : swap calc( var( --duration ) * var( --word-count ) ) linear
                  infinite;
                  
      content : var( --text );
      
      }
      
    </style>
    
  <p>
  
    <!-- enter text here -->
    
    conquer
    
    <span>
    
      <!-- leave this empty -->
      
      </span>. <!-- need ending puncuation? put it right after the </span> -->
      
    </p>
    
  <!-- end code block text swap -->

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 comment
1 hour ago, creedon said:

Create a code block and save it.

Get the block id for the code block. You can use Heather Tovey's most excellent looking Squarespace ID Finder.

Edit the code block and add the following replacing [enter block id here] with the block id.

<!--

  begin code block text swap
  
  Version         : 0.1d0
  
  SS Versions     : 7.1, 7.0
  
  v7.0 Templates  : all
  
  Note            : the code is comprised of several tags. all are needed for
                    the full effect to work
  
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    @keyframes swap {
    
      0% {
      
        content : var( --text );
        
        }
        
      25% {
      
        content : 'fears';
        
        }
        
      50% {
      
        content : 'doubts';
        
        }
        
      75% {
      
        content : 'limits';
        
        }
        
      }
      
    [enter block id here] {
    
      --duration : 4s;
      --word-count : 4;
      --text : 'yourself';
      
      }
      
    [enter block id here] p {
    
      /* enter property value pairs to style text here */
      
      text-transform : uppercase;
      
      }
      
    [enter block id here] p span {
    
      /* enter property value pairs to style swap text here */
      
      }
      
    [enter block id here] .sqs-block-content span::after {
    
      animation : swap calc( var( --duration ) * var( --word-count ) ) linear
                  infinite;
                  
      content : var( --text );
      
      }
      
    </style>
    
  <p>
  
    <!-- enter text here -->
    
    conquer
    
    <span>
    
      <!-- leave this empty -->
      
      </span>. <!-- need ending puncuation? put it right after the </span> -->
      
    </p>
    
  <!-- end code block text swap -->

Let us know how it goes.

Sorry, this is the first time I'm trying something like this. I've managed to find the block id (thank you!) and swapped it in, but don't understand what property value pairs are. What should I be entering there?

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.