AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Display flex text overflow ellipsis12/1/2022 ![]() ![]() This is somewhat common on websites and adds some extra dimensionality to increase engagement. This next example triggers side-scrolling text from a user’s scrolling action. See the Pen Infinite scrolling horizontal text by Jonathan Marzullo ( on CodePen. The cool thing about this implementation is that you can add as many list items as you want without needing to alter the script. ![]() This first example uses JavaScript (specifically jQuery) to generate a rotating ticker animation from a group of list items. ![]() Here are a couple of examples of using JavaScript for this purpose. More elaborate and dynamic scrolling text elements may require JavaScript to mimic a marquee effect, rather than relying purely on CSS animations. See the Pen Scrolling Text CSS: top to bottom by Christina Perricone ( on CodePen. 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 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. #Display flex text overflow ellipsis codeBelow, 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. ![]() #Display flex text overflow ellipsis how toIn 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. Since the filename base element has the text-overflow, white-space and overflow properties, the ellipsis will be rendered properly.That’s why we recommend trying something new every once in a while. In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion.īy using min-width: 0, we are changing the minimum size of the flexbox container, which will resize the child elements of the container that don’t use the flex-shrink attribute. The keyword was previously defined in this specification, but is now defined in the CSS Sizing module. Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties. The trick is using the property min-width, as covered in this pen by AJ Foster and CSS Tricks. The ellipsis effect can be done by combining text-overflow, white-space and overflow properties, however, we still need to figure out the relation between the filename base and its parent, which also contains the file extension. ![]()
0 Comments
Read More
Leave a Reply. |