How To Get Scrolling Text On Your Squarespace Or Showit Website - Rebekah Read Creative

How To Get Scrolling Text On Your Squarespace Or Showit Website

*2022 update* The Showit code sometimes doesn’t work – I am unsure why. I’ve played around with it, but am not a coding expert and can’t seem to get it right. SORRY!

What better way to celebrate my 150th blog post then with some of my all time FAVORITE codes! These will work on Squarespace or Showit. Enjoy friends!

Code used on Squarespace website page:


<div class="typeit"> ACCOUNTING AND BOOKKEEPING FOR SMALL BUSINESSES</div>

WOHOOO! Now go to Custom CSS and enter this snippet of code:

.typeit {
  overflow: hidden; 
  font-size:25px; /* this can be any font size you want */

  border-right: 2px solid #e37263; /* change this color in the keyframe too */

  white-space: nowrap; 
  margin: 0 auto; 
  animation: 
    typeit 3.5s steps(40, end),
    right-border .5s step-end infinite;
}

@keyframes typeit {  
from { width: 0 }
to { width: 100% }
}

@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #e37263; /* change this in the CSS above too */ }
}
@media only screen and (max-width: 640px){ .typeit { font-size:13px!important; }}

Code used on Showit website page:


<div class="si-embed">
<div id="container">
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<span class="Typewriter__wrapper"></span><span class="Typewriter__cursor">|</span></div>
<style>@font-face {
  font-family: Tenez Light;
  src: url(https://static.showit.co/file/iauDA5AXSZa1thgAhLruPw/99642/tenez_light-webfont.woff);
}</style>

<script>var container = document.getElementById('container');

var typewriter = new Typewriter(container, {
    loop: false,
});

container.style.font = "normal 30px Tenez Light"
container.style.color = "#3e3d3b"
container.style.textAlign = "center"
container.style.lineheight = "1.6"

typewriter.typeString('Website Designer')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Brand Strategist')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Squarespace Educator')
    .pauseFor(1000)
    .deleteAll()
    .typeString('New Entrepreneur Helper')
    .start();
</script></div>

A FEW THINGS I WANT TO ADD…

Anywhere you see “Tenez Light” you will replace with your font name and make sure (as I showed in the video) that you replace the woff file URL with YOUR FONT URL. So you will be replacing Tenez Light in TWO different spots in that long code as well as the URL.

YOU CAN ACHIEVE THIS ON SQUARESPACE TOO!

Just change out the Source URL from the Showit URL to your fonts URL. You can get that by going to Design – Custom CSS – Manage Custom Files – Upload your font – Go to the bottom of your Custom CSS and click enter to get a new space – click manage custom files again – click on the font (this will get the URL) – copy that URL. Then you go back to your code block and paste in that URL replacing the WOFF file. You don’t need to change the “Tenez Light” in the code.

Want another scrolling text variation for your Squarespace website?


Watch Inside The Square (aka Becca’s) tutorial for another scrolly text variation (versus the typewriter version which mine had)!

Free

Squarespace Coding Resource ↓

squarespace customizations

If you found this post helpful, pin the blog and share the love πŸ’•!

  1. Ashley Brown says:

    hmmm … I tried the showit code – it works perfectly in the editor but when you “preview” or publish it is not appearing? Am I doing something incorrect?

    • Rebekah Read says:

      That’s so strange that it is working on the backend but not the front. Unfortunately I’m not a coding expert so I’m not sure, but you could always reach out to Showit support (the little chat box on the right side) and see if they have any ideas? They are super helpful. Sorry I can’t be of more help!

  2. Shadia says:

    Hi Rebekah! Any chance you could tell me how I can create this effect without the cursor “backspacing” and deleting the text? I’d like to have the text written out and then stay visible. Thank you!

    • Rebekah Read says:

      Hello! You would just delete the “delete all”. So let’s say you wanted JUST website designer and you wanted it to stay, you would delete this:
      deleteAll()
      .typeString(‘Brand Strategist’)
      .pauseFor(1000)
      .deleteAll()
      .typeString(‘Squarespace Educator’)
      .pauseFor(1000)
      .deleteAll()
      .typeString(‘New Entrepreneur Helper’)

  3. Amy says:

    I watched the video for the scrolling marquee but it’s not a code that worked in Showit. Are you able to cover this? Thanks

    • Rebekah Read says:

      Hello Amy, thanks for making me aware of this! I am unsure why this is happening. I’ve played around with it, but am not a coding expert and can’t seem to get it right. I’M SORRY!

      • Trisha Marie says:

        Hey, rebekah, let me know if this is still an issue for you on Showit for others. I am a coder and have perfected it both on squarespace and showit.

        • Rebekah Read says:

          Oh good! I love to know of coders that know Showit and Squarespace so I will keep you in mind to refer to people!

  4. Sarah says:

    Hi Rebekah!
    To your knowledge, is it possible to achieve the Showit scrolling effect on Squarespace? Thanks

    • Rebekah Read says:

      Yep! I plugged the code in using a code block on Squarespace 7.0 and it worked!

    • Rebekah Read says:

      Just change out the Source URL from the Showit URL to your fonts URL. You can get that by going to Design – Custom CSS – Manage Custom Files – Upload your font – Go to the bottom of your Custom CSS and click enter to get a new space – click manage custom files again – click on the font (this will get the URL) – copy that URL. Then you go back to your code block and paste in that URL replacing the WOFF file. You don’t need to change the “Tenez Light” in the code.

  5. Erin says:

    Thanks so much for this code! I love how it looks on my site, but I needed it left justified, which I did fine, but now, because of the slant of the font it’s in, the left-most part of the first letter is chopped off. How and where do I add the padding-left: 5% code?
    Thanks!

    • Erin says:

      Also, how would I make the cursor not visible in the code?

      • Rebekah Read says:

        Hey Erin! I am glad you got it on your site. I unfortunately am not a coding expert so I am not sure how to fix your problem. Are you on Squarespace or Showit? There are some great coding Facebook groups with people that could probably tell you what to do to fix it! Sorry I couldn’t be of more help, I wish I knew!

  6. Hi, on my desktop version it works perfect! But on the mobile version (even tough i have changed the font size to 20) It turns out very big and doesnt change the size. Do you have any idea how i can fix this? (on showit)

    • Rebekah Read says:

      Hello Eline! I worked a bit with the code on Showit and for some reason it isn’t working on mobile – I am unsure why. I’ve played around with it, but am not a coding expert and can’t seem to get it right. SORRY!

  7. Hayley says:

    Hey Rebeka, thanks for this! I’m using Showit and it’s working πŸ™‚ I just want to get the text to be on an infinite loop. I have three words that it types out, but when it gets to the third it stays there instead of starting again from the beginning. Any tips on how I can fix this?

    • Rebekah Read says:

      Hello Hayley,
      I’m glad it is working for you!! I definitely wish I knew how to fix that, but I don’t. Mine does that too. I will say, it is mostly for a cool effect. People (generally) aren’t even reading more than the first typed out description, so I wouldn’t worry about it too much (in my opinion). Sorry I can’t be of more help! Maybe someday I will become a coding expert πŸ™‚

  8. Amy says:

    Hello is it possible to make it so it doesn’t stop, and just keeps looping forever?

Leave a Reply

Your email address will not be published. Required fields are marked *

with their Showit or Squarespace website with intentional website strategy so they can book more clients and make more money doing what they love!

Helping creative entrepreneurs

Home

Read The Blog

Privacy policy

back to top

How to design a website that converts!  Learn how to DIY your website with this FREE guide.

Let's connect!

I WANT THAT!