Skip to content

Jquery Basic Animation

Codepen

Jquery Basic Animation

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

    <div class="box"></div>
    <div class="text">CODEBLOGGER</div>
-


</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');
.box{
    position: absolute;
    background: #DA5437;
    width: 100px;
    height: 100px;
}
.text{
    position: absolute;
    z-index: 99;
    font-weight: bold;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 0px;
    color: #eee;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

JS CODE

$(document).ready(function(){
        $(".box").click(function(){
            let box = $(this);
            let txt = $(".text")
            box.animate({
                width: "500px",
            },"slow")
            box.animate({
                left: "407px",
                width: "100px"
            },"slow")
            box.animate({
                height: "500px"
            },"slow")
            box.animate({
                top: "407px",
                height: "100px",
            },"slow")
            box.animate({
                top: "-50%",
                left: "-50%",
                width: "200%",
                height: "200%",
                borderRadius: "50%"
            },"slow")
            setTimeout(function(){
                txt.animate({
                fontSize: "100px"
                })
            },3000)
        })
    })

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: