How To Use HTML And CSS To Implement Typing Effect

This article tells you how to use HTML + CSS to achieve typing effect.

1. How To Implement Typing Effect Use Html + CSS.

  1. You can think there are 3 layers of the typing effects.
  2. The bottom layer is the text layer.
  3. The middle layer is the background that cover the text.
  4. The top layer shows the cursor.
  5. The text layer is static, while the background in the middle layer and the cursor at the top layer are dynamic.
  6. Initially, the background covers all the text and the cursor is at the far left point.
  7. As the animation progresses, the background and cursor move from left to right at the same pace.
  8. At the end of the animation, the background no longer covers the text, and the cursor blinks on the far right point.

2. Example Source Code.

  1. Create a Html file implement_typing_effect_use_html_css.html.
  2. Copy and paste the below Html source code to the above file.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Implement Typing Effect Use Html + CSS</title>
    <style>
    
    :root {
        /* number of characters in the displayed string in the html div element. */
        --steps: 56;
        /* animation duration, the total time that will cost to print the text string. */
        --duration: 10s;
        /* font size */
        --fontSize: 50px;
        /* cursor size */
        --cursorSize: 20px;
    }
    
    .text {
        color: #333;;
        position: relative;
        display: inline-block;
        font-family: 'Courier New', Courier, monospace;
        font-size: var(--fontSize);
        line-height: 1;
    }
    
    .text::after {
        content: '';
        width: var(--cursorSize);
        height: var(--fontSize);
        background-color: black;
        z-index: 2;
        position: absolute;
        animation: blink 1s var(--duration) step-end infinite,
                   moveCursor var(--duration) steps(var(--steps)) forwards;
    }
    
    .text::before {
        content: '';
        width: 100%;
        height: var(--fontSize);
        z-index: 1;
        position: absolute;
        background: linear-gradient(#fff, #fff) no-repeat top right;
        animation: showText var(--duration) steps(var(--steps)) forwards;
    }
    
    /* Cursor blink animation */
    @keyframes blink {
        0% {
            background-color: black;
        }
        50% {
            background-color: transparent;
        }
        100% {
            background-color: black;
        }
    }
    
    /* Cursor move animation */
    @keyframes moveCursor {
        0% {
            left: 0%;
        }
        100% {
            left: 100%;
        }
    }
    
    /* background move animation */
    @keyframes showText {
        0% {
            background-size: 100% 100%;
        }
        100% {
            background-size: 0% 100%;
        }
    }
    
    
    
    </style>
    </head>
    <body>
    
    <div class="text">This typing effect is implemented use Html & CSS!</div>
    
    </body>
    </html>

3. The Demo Video For The Typing Effect Animation.

typing effect implemented with html... x
typing effect implemented with html css
 

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Clicky
0
Would love your thoughts, please comment.x
()
x