Breaking News: Grepper is joining You.com. Read the official announcement!

typing effect in html

Cuaresma, Pauline Y. answered on March 16, 2023 Popularity 9/10 Helpfulness 2/10

answer typing effect in html

typing effect in html

Comment

//HTMLCODES
 	<div class="landing-pic">
            <div class="inner-landing"><!--wrapper-->
                <!--<button class="started">Let's Get Started</button>-->
                <div class="cols cols0">
                    <h1>Keebs <span class="multiText"></span></h1>
                </div>
            </div> 
        </div>
        
//CSS CODES
 .inner-landing{
            background-image: url("images/keebs-tinted.jpg");
            /*background: lightblue;*/
            background-size: cover;
            height: 400px;
            /*start of animation*/
            display: flex;
            width: 100%;
            justify-content: center;
            align-items: center;
        }
   
        .cols {
            width: 50%;
        }
        .cols h1{
            display: block;
            font-size: 7em;
            font-weight: 900;
            color: #fff;
        }
        .multiText{
            color: #50BCB9;
            text-transform: capitalize;
        }
        span{
            color: #fff;/*typing cursor*/
        }

//JS SCRIPT CODES
//NOTE: ADD THIS BEFORE CLOSING OF YOUR HTML BODY
   <script src="https://unpkg.com/typed.js@2.0.132/dist/typed.umd.js"></script>
    <script>
        var typed = new Typed(".multiText",{
            strings: ["Noob", "World","fantasy"],
            typeSpeed: 150,
            backSpeed: 150,
            loop: true
        })
    </script>

Popularity 9/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: effect html typing

Link to this answer
Share Copy Link

Contributed on Mar 16 2023

Cuaresma, Pauline Y.

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

typing effect in html

Contents

More Related Answers

typing effect in html

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.