Jump to content

ANIMATED LOOPING TEXT

Recommended Posts

  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Add a Code Block on top of "UI/UX Designer..." text >> paste this code

<span class="title-holder">
 <span class="title">
  Hi, I'm Gabriel!  
 </span>
</span>
<style>
  .title-holder {
  top: 50%;
  left: 40%;
  position: absolute;
}
.title {
  font-family: 'Lato', sans-serif;
  font-size: 30px;
  color: #f9d566;
  width: 0;
  overflow: hidden;
  white-space: no-wrap;
  display:block;
  border-right: 3px solid #f9d566;
  animation: typewriter 5s steps(7) infinite, blinking-cursor 0.8s infinite;
  animation-fill-mode: forwards
}

@keyframes typewriter {
  0% { width:0 }
  25% { width: 70% }
  48% { width: 100% }
  50% { width: 100% }
  55% { width: 100% }
  75% { width: 70%; }
  85% { width: 30%; }
  100% { width: 0; }
}

@keyframes blinking-cursor {
  from { border-color: transparent }
  to { border-color: #f9d566 }
}
</style>

Also, It looks like you used special character after text "Hi"? It doesnt show on my laptop (Dell/Chrome)

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.