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

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>

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)!

If you found this post helpful, pin the blog and share the love 💕!

Leave a Reply

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

Instagram is kind of my thing!
Let's connect!
@rebekahreadcreative

pair beautiful brand design with an intentional website strategy so they can book more clients and make more money doing what they love!

Helping creative entrepreneurs

Home

Read The Blog

Contact Bekah

back to top

How to design a website that converts!  Learn my best tricks to SEO, copywriting + branding!

Let's connect!

I WANT THAT!