Like with horizontal scrolling, we just need to flip our positive and negative translateY values to change the direction of the vertical scroll: See the Pen Scrolling Text CSS: bottom to top by Christina Perricone on CodePen.Д¬SS Vertical Scrolling Text: Top-to-Bottom IвЂ™ve also centered the text, lowered the animation duration to 5 seconds, and given the div container a height value so the vertical scroll is more apparent. To make your text scroll vertically, change all instances 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 IвЂ™ve also right-aligned the text inside scroll-text so that the text appears immediately at the start of the animation. So, 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, just swap the positive and negative translateX values. To resolve this problem, you can set the scroll container width to a specific pixel value. This means that the text speed with change if the browser window is resized. The scrolling speed is also affected by the width of the div: The wider the scroll container, the faster the text will scroll. A lower value speeds up the scrolling effect and a higher value slows it down. To change the scroll speed, change the seconds value of the animation property from 10s to something else. 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

Create scrolling text for website