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

  1. Good compatibility
  2. 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
  3. It’s like talking to people and getting closer to users

Disadvantages of Typewriter effects

  1. Not widely used by enterprises
  2. Less applicable scenarios

The final result

Add HTML files

  1. Outermost add<main>Used to store body content
  2. <main>It’s got one<h1>As a container for all the text
  3. <h1>It’s got two<span>
  4. An ID namedtypeText 的 <span>Used to store typewritten words
  5. A class namedmark 的 <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

  1. Set up the* 为 box-sizing: border-box
  2. Set up themainKeep 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.