A general method for implementing infinite text carousel with native CSS
|
Text carousels are very common in our daily life. There are usually billboards with text carousels at the door of supermarkets and physical stores. This article introduces the implementation logic in detail. ScenarioStore door billboards need to display announcements through horizontally moving text (borders are added for better demonstration).
Logical description
There are two main logics for achieving infinite text rotation:
The first implementation method is to use CSS animation, transform: translateX(-50%), which means translating half of itself to the left. The implementation method of point 2 is related to point 1. By default, CSS animations mutate after playback is completed, that is, the position mutates to the initial position when playback is completed (the mutation is completed instantly and cannot be perceived by the naked eye), so we can use mutation to connect the beginning and the end of the text. We use two identical texts. When the first text is finished playing and the second text starts playing, the animation suddenly changes and starts playing the first text again. Since the content of the two texts is the same, the user is unaware of it. thinkIs this implementation currently common? This method has actually solved most of the needs, but when there is less text or when the text width is smaller than the window width, there will be problems. The rotation logic diagram I drew is just one of the cases. How to achieve this when the text width is smaller than the window width? In fact, the principle is the same. One of the core functions of text rotation is to have two identical texts, but it has a prerequisite, which is that the width of a 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 larger than the width of the window, and then process it into two identical pieces of text. SummarizeThe key points of infinite text rotation are as follows:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text infinite carousel</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 store mainly sells ramen, sliced noodles, stewed noodles, and rice bowls</span>
<span id="second">Our store mainly sells ramen, sliced noodles, stewed noodles, and rice bowls</span>
</div>
</div>
</body>
</html>This concludes this article on the general method of implementing infinite text carousel with native CSS. For more relevant content on implementing infinite text carousel with CSS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Ubuntu builds Mysql+Keepalived high availability implementation (dual-active hot standby)
>>: Detailed steps for setting up and configuring nis domain services on Centos8
Recommend
How to use Maxwell to synchronize MySQL data in real time
Table of contents About Maxwell Configuration and...
Detailed explanation of deploying MySQL using Docker (data persistence)
This article briefly describes how to use Docker ...
Analysis of the project process in idea packaging and uploading to cloud service
one. First of all, you have to package it in idea...
MySQL 8.0.16 installation and configuration tutorial under Windows 10
This article shares with you the graphic tutorial...
Several ways to run Python programs in the Linux background
1. The first method is to use the unhup command d...
Solve the problem of insufficient docker disk space
After the server where Docker is located has been...
MySQL 8.0.18 installation and configuration method graphic tutorial
This article records the installation and configu...
Summary of several commonly used string methods in JavaScript (must-read for beginners)
Several commonly used string methods in JavaScrip...
Docker installation and configuration command code examples
Docker installation Install dependency packages s...
Docker Compose practice and summary
Docker Compose can realize the orchestration of D...
mysql-8.0.15-winx64 uses the zip package to install and the service is shut down immediately after starting
The MySQL version used in this example is mysql-8...
WeChat applet implements a simple handwritten signature component
Table of contents background: need: Effect 1. Ide...
Teach you the detailed process of installing DOClever with Docker Compose
Table of contents 1. What is Docker Compose and h...
Detailed explanation of the entry-level use of MySql stored procedure parameters
Use of stored procedure in parameters IN paramete...
Tutorial on installing Ubuntu 20.04 and NVIDIA drivers
Install Ubuntu 20.04 Install NVIDIA drivers Confi...