This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August
Author: battleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if need to be reproduced can contact the author authorized
background
Typewriter effect: it refers to the effect of automatically simulating keyboard typing, so that the text is displayed one by one, and then automatically simulating the keyboard delete key to delete the text one by one animation effect. This animation, usually at the top of the main content of the home page, is used to show key text messages to the user. But because the information can’t be fixed, users miss and have to wait for the next loop; For reasons such as better corporate alternatives for displaying text, this typewriter effect is not widely used by corporations and is now more commonly used on personal pages and blogs.
Typewriter effects advantages
- Good compatibility
- The simulated typing effect, combined with the blinking cursor effect, makes it easier to draw the user’s attention to the content in this area
- It’s like talking to people and getting closer to users
Disadvantages of Typewriter effects
- Not widely used by enterprises
- Less applicable scenarios
The final result
Add HTML files
- Outermost add
<main>
Used to store body content <main>
It’s got one<h1>
As a container for all the text<h1>
It’s got two<span>
- An ID named
typeText
的<span>
Used to store typewritten words - A class named
mark
的<span>
Used to store the blinking cursor
<main>
<h1>
<span id="typeText" data-text='[" Hello ", "welcome to a front-end inner world "," Looking forward to growing with you "]></span>
<span class="mark"></span>
</h1>
</main>
Copy the code
2. Add the CSS file
Initialize the page first
- Set up the
*
为box-sizing: border-box
- Set up the
main
Keep the whole project centered
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
background: rgb(67.66.73);
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
Copy the code
The main CSS code
h1 {
color: #f1f2f6;
font-size: 5em;
font-weight: 300;
}
span.mark {
border-right: 2px solid white;
animation: blink 0.6 s step-end infinite;
}
@keyframes blink {
from.to {
border-color: transparent;
}
50% {
border-color: white; }}Copy the code
Add JS files
The main logic
// Get the span element that displays the text
const typeText = document.querySelector("#typeText");
// Gets and parses the array of text to display
const texts = JSON.parse(typeText.getAttribute("data-text"));
// The number of rows in the current display text array
let index = 0;
// The current number of characters displayed
let charIndex = 0;
// The default display interval for each word is 500 ms
let delta = 500;
// Record the start time of animation execution
let start = null;
// Whether to delete the animation
let isDeleting = false;
// Animation callback function
function type(time) {
window.requestAnimationFrame(type);
// Initialize the start time
if(! start) start = time;// Get the interval
let progress = time - start;
// Print out a new character at regular intervals
if (progress > delta) {
// Get the full character
let text = texts[index];
// If it is typing
if(! isDeleting) {// Add a new character to the span that displays the text, replace it with innerHTML, increment the charIndex by 1, and return a new string of characters
typeText.innerHTML = text.slice(0, ++charIndex);
// Each character is printed at a different speed, mimicking the speed of human typing
delta = 500 - Math.random() * 400;
} else {
// Delete the text one by one
typeText.innerHTML = text.slice(0, charIndex--);
}
// Update star to current time for next cycle
start = time;
// If the text has been printed completely
if (charIndex === text.length) {
// Start deleting text next time
isDeleting = true;
// Delete text at an interval of 200 milliseconds
delta = 200;
// Wait an additional 1.2 seconds before deleting
start = time + 1200;
}
// If the text is deleted
if (charIndex < 0) {
isDeleting = false;
// Add an additional 200 ms delay
start = time + 200;
// Move index to the next text and loop through the number of elements in the text arrayindex = ++index % texts.length; }}}window.requestAnimationFrame(type);
Copy the code
❤️ thank you
If this article is helpful to you, please support it by clicking a “like”. Your “like” is my motivation for writing.
If you like this article, you can “like” + “favorites” + “forward” to more friends.