![]() To make your text scroll vertically, change all occurrences of translateX to translateY. See the Pen Scrolling Text CSS: left to right by Christina Perricone ( on CodePen.ĬSS Vertical Scrolling Text: Bottom-to-Top This makes the text appear immediately at the start of the animation. I’ve also right-aligned the text inside scroll-text. We’ll change all instances of 100% to -100% and all instances of -100% to 100%. CSS Horizontal Scrolling Text: Left-to-Rightįor left-to-right scrolling text, simply swap the positive and negative translateX values. You can set the scroll container width to a specific pixel value to resolve this problem. This means that the text speed changes if the browser window is resized. The scrolling speed is also affected by the div's width: The wider the scroll container, the faster the text will scroll. A lower value will speed up the scrolling effect, while a higher value slows it down. To change the scroll speed, change the seconds value of the animation property from 10s to a different number. You’ll have to tinker with the CSS to create your desired text scrolling effect. ![]() See the Pen Scrolling Text CSS: right to left by Christina Perricone ( on CodePen. The HTML, scroll animation CSS, and output are shown below. This element will move inside its container div, scroll-container. To make text scroll right-to-left, place it inside a div with the id scroll-text. CSS Horizontal Scrolling Text: Right-to-Left Ready to get started creating scrolling text animation CSS style? Let’s start with right-to-left text. ![]() To ensure cross-browser compatibility, we’ll also add animation rules with the vendor prefixes -webkit- (for Safari and Chrome) and -moz- (for Firefox). To create our scrolling text, we’ll use CSS animations paired with the transform: translateX and transform: translateY properties. HTML5 Scrolling Text: A Note on the marquee Element We’ve also provided four code templates you can copy and tweak to create your own scrolling text for your site easily. This guide will teach you how to generate scrolling text animation CSS and HTML style. ![]() While, generally speaking, it’s best to keep your website simple and content-focused, the occasional creative touch can go a long way in drawing new visitors in. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |