A general method of realizing unlimited text rotation with native CSS

Time:2021-9-22

Text rotation is very common in life. There are usually text rotation billboards at the door of supermarkets and physical stores. This paper introduces the implementation logic in detail.

scene

The billboard at the head of the store needs to display the announcement through horizontally moving text (the border is added for better demonstration).

Logical description

The logic to realize the infinite rotation of text mainly has two points:

  • Horizontal movement of text
  • End to end of text

The first implementation method is to use CSS animation, transform: translatex (- 50%), that is, translate half of itself to the left.

The implementation method of point 2 is related to point 1. CSS animation is mutated after playing by default, that is, the position mutates to the initial position when playing is completed (the mutation is completed instantaneously and cannot be perceived by human flesh eyes). Therefore, we can use mutation to connect the beginning and end of text.

We use two paragraphs of the same text. When the first paragraph of text is played and the second paragraph of text is played, the animation suddenly starts to play the first paragraph of text again. Because the contents of the two paragraphs of text are the same, the user has no perception.

reflection

Is this implementation universal at present?

This method has actually solved most of the needs, but there is a problem when there are few words and the width of the words is less than the window width. The rotation logic diagram I drew is only one of them.

When the width of the text is less than the width of the window, how to implement it?

In fact, the reason is the same. One of the core of text rotation is that two paragraphs of the same text are required, but it has a premise that the width of a paragraph of text must be greater than the width of the window.

How to achieve this prerequisite?

The answer is to copy the text as a whole until the width of the text is greater than the width of the window, and then process it into two pieces of the same text.

summary

The key points of unlimited text rotation are as follows:

  • The text width must be greater than the window width. If the text width is not enough, copy the text as a whole until the text width is greater than the window width
  • Two paragraphs of the same text
  • Move 50% of the distance

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    < title > unlimited text rotation < / Title >
 
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
 
        #wrap {
            overflow: hidden;
            position: relative;
            width: 200px;
            height: 20px;
            white-space: nowrap;
        }
 
        #inner {
            position: absolute;
            animation: slide 5s linear infinite;
        }
 
        #first{
            display: inline-block;
            border: 1px solid red;
        }
 
        #second{
            display: inline-block;
            border: 1px solid green;
        }
 
        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="inner">
        < span id = "first" > our shop owner sells ramen, sliced noodles, stewed noodles and covered rice</span>
        < span id = "second" > our shop owner sells ramen, sliced noodles, stewed noodles and covered rice</span>
    </div>
</div>
</body>
</html>

This is the end of this article on the general method of implementing text infinite rotation with native CSS. For more relevant content of implementing text infinite rotation with CSS, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!