Ultimately, you’ll have to do some tinkering with the CSS to get your scrolling effect to look how you want. See the Pen Scrolling Text CSS: right to left by Christina Perricone ( on CodePen. The HTML, scroll animation CSS, and result are below. To make our text scroll right-to-left, we’ll place it inside a div with the id scroll-text - this is the element that will be moving inside its container div, scroll-container. CSS Horizontal Scrolling Text: Right-to-Left To ensure cross-browser compatibility, we’ll also add animation rules with the vendor prefixes -webkit- (for Safari and Chrome) and -moz- (for Firefox). We’ll be using CSS animations paired with the transform: translateX and transform: translateY properties to achieve scrolling text with CSS. Below, we’ve provided four code templates you can copy and tweak for an easy text scrolling effect. While it’s best to keep websites simple and content-focused, some creative touches here and there can draw new visitors in. With this fun trick, you can make a news ticker, create end credits for a movie, or even make visitors feel immersed in a galaxy far, far away.
#Css text styles how to#
In this guide, we’ll show you how to generate scrolling text in HTML and CSS. If now feels like one of those times for you, keep reading.
Maybe it’s learning a new element you’ve never used before, or it’s experimenting with CSS or a framework like Bootstrap. That’s why we recommend trying something new every once in a while.
But, let’s not dance around things - actually writing the code can feel mundane at times, especially if you’re just starting to learn the basics. With some clever use of HTML, CSS, and JavaScript, you can make some pretty amazing websites.