Jump to content

Text Animation Help

Recommended Posts

Site URL: https://www.imperialcitizenship.squarespace.com

password: imperialcitizenship

Hi, I need help adjusting the animation of my code. Currently, this animation start at the edge of the screen on the right. However, I want it to start in the center filling up my whole screen then infinitely continuing. How do I adjust the code?

Animation starts at the right:

image.png.4b60a9c3f663ec27fc6c09bdc69744cf.png

What I want, animation starts in the middle and also going out to the far left of the screen:image.png.f39e09b9037a2cee8293468c4cb77c84.png

 

Existing code:

//SCROLLING VERTICAL TEXT
.vertscroll {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.vertscroll span {
  display: inline-block;
  padding-left: 100%;
  animation: vertscroll 60s linear infinite;
}

.vertscroll2 span {
  animation-delay: 30s;
}

@keyframes vertscroll {
  0% {
    transform: translate(0%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
<h4 class="vertscroll">
  <span>Antiqua and Barbuda&emsp;&emsp;Dominica&emsp;&emsp;St. Lucia&emsp;&emsp;St. Kitts and Nevis&emsp;&emsp;Grenad&emsp;&emsp;Cyprus&emsp;&emsp;Malta&emsp;&emsp;Turkey&emsp;&emsp;Vanuatu&emsp;&emsp;Montenegro&emsp;&emsp;Greece&emsp;&emsp;Portugal&emsp;&emsp;</span>
</h4>
<h4 class="vertscroll vertscroll2">
  <span>Antiqua and Barbuda&emsp;&emsp;Dominica&emsp;&emsp;St. Lucia&emsp;&emsp;St. Kitts and Nevis&emsp;&emsp;Grenad&emsp;&emsp;Cyprus&emsp;&emsp;Malta&emsp;&emsp;Turkey&emsp;&emsp;Vanuatu&emsp;&emsp;Montenegro&emsp;&emsp;Greece&emsp;&emsp;Portugal&emsp;&emsp;</span>
</h4>

Thank you!

Link to comment
  • Replies 0
  • Views 231
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.