Skip to content
Advertisements

Elon Musk

CODEPEN


HTML

    <button id="but">CLICK</button>
    <div id="result"></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');

body{
    background: #262626;
    font-family: 'Montserrat', sans-serif;

}
button{
    border: none;
    background: none;
    outline: none;
}
#result{
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #eee;
}

JS

$(document).ready(function(){
    $("#but").click(function(){
        setTimeout(function(){
            $("#result").text(function(){
            return "when"
        })
        },1000)
        setTimeout(function(){
            $("#result").text(function(){
            return "something"
        })
        },1200)
        setTimeout(function(){
            $("#result").text(function(){
            return "is"
        })
        },1500)
        setTimeout(function(){
            $("#result").text(function(){
            return "important"
        })
        },1700)
        setTimeout(function(){
            $("#result").text(function(){
            return "enough,"
        })
        },2000)
        setTimeout(function(){
            $("#result").text(function(){
            return "you"
        })
        },2300)
        setTimeout(function(){
            $("#result").text(function(){
            return "do"
        })
        },2500)
        setTimeout(function(){
            $("#result").text(function(){
            return "it"
        })
        },2750)
        setTimeout(function(){
            $("#result").text(function(){
            return "even"
        })
        },2950)
        setTimeout(function(){
            $("#result").text(function(){
            return "if"
        })
        },3100)
        setTimeout(function(){
            $("#result").text(function(){
            return "the"
        })
        },3300)
        setTimeout(function(){
            $("#result").text(function(){
            return "odds"
        })
        },3500)
        setTimeout(function(){
            $("#result").text(function(){
            return "are"
        })
        },3800)
        setTimeout(function(){
            $("#result").text(function(){
            return "not"
        })
        },4000)
        setTimeout(function(){
            $("#result").text(function(){
            return "in"
        })
        },4200)
        setTimeout(function(){
            $("#result").text(function(){
            return "your"
        })
        },4500)
        setTimeout(function(){
            $("#result").text(function(){
            return "favor"
        })
        },4800)
        setTimeout(function(){
            $("#result").text(function(){
            return "ELON MUSK"
        })
        },6000)
        
    })
  })
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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

%d bloggers like this: