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
MySQL 5.0.96 for Windows x86 32-bit green simplified version installation tutorial
MySQL 5.0 has become a classic because of its few...
How to optimize images to improve website performance
Table of contents Overview What is Image Compress...
JavaScript implements AI tic-tac-toe game through the maximum and minimum algorithm
Without further ado, let’s run the screenshot dir...
mysql5.7.14 decompression version installation and configuration method graphic tutorial (win10)
Win10 installs mysql5.7 decompressed version, for...
Tomcat breaks the parent delegation mechanism to achieve isolation of Web applications
Table of contents Tomcat class loader hierarchy W...
React internationalization react-intl usage
How to achieve internationalization in React? The...
Hbase Getting Started
1. HBase Overview 1.1 What is HBase HBase is a No...
MySQL Series 3 Basics
Table of contents Tutorial Series 1. Introduction...
Problems encountered when uploading images using axios in Vue
Table of contents What is FormData? A practical e...
HTML+CSS to achieve cyberpunk style button
First look at the effect: Preface: I came up with...
How to center the entire page content so that the height can adapt to the content and automatically expand
How to center the entire page content and how to m...
Detailed explanation of WeChat Mini Program official face verification
The mini program collected user personal informat...
MySQL chooses the right storage engine
When it comes to databases, one of the most frequ...
Detailed explanation of Vuex overall case
Table of contents 1. Introduction 2. Advantages 3...
Steps to initialize the password after the first successful installation of MySQL
Unzip the file into a directory This is the direc...