Fire bird animation effects

launch bird
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        /*CSS source code*/
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        a{
            text-decoration:none;
        }
        a:link{color:green;}
        a:visited{color:green;}
        a:hover{color:green;}
        .svg-path {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .cloud {
            position: absolute;
            z-index: 90;
            display: none;
            left: 120%;
        }

        .title {
            width: 100%;
            position: absolute;
            top: 70%;
            z-index: 1;
            font-family: Arial;
            text-align: center;
            font-size: 45px;
            color: #00ADE6;
        }
        .title span {
            display: inline-block;
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .title span:nth-child(2) {
            opacity: 0;
            transform: translate3d(0, 80%, 0);
        }
        .title.pressed span:nth-child(1) {
            opacity: 0;
            transform: translate3d(0, -80%, 0);
        }
        h1.pressed span:nth-child(2) {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        #box {
            cursor: pointer;
        }


        /* TWITTER BIRD ANIMATION */

        .animation {
            background-image: url(http://twin-dev.net/experiments/codevember/maki/ressources/twitter-transparent.png);
            height: 110px; /* width and height of each frame */
            width: 150px;
            position: absolute;
            z-index: 100;
            left: 50%;
            top: 10%;
            transform: translate(-50%, -10%);
        }

        .animationBird {
            -webkit-animation: sprite-animation .6s steps(12,end) 8.5; /* steps = number of frames */
            animation: sprite-animation .6s steps(12,end) 8.5;
        }

        @-webkit-keyframes sprite-animation { /* Safari & Chrome */
            from { background-position: 0 0; }
            to { background-position: -1800px 0; } /* negative of sprite sheet width */
        }
        @keyframes sprite-animation {
            from { background-position: 0 0; }
            to { background-position: -1800px 0; } /* negative of sprite sheet width */
        }

        /* CLOUD ANIMATION */

        .animationCloud {
            -webkit-animation: cloud-animation 5s linear;
            animation: cloud-animation 5s linear;
        }

        @-webkit-keyframes cloud-animation { /* Safari & Chrome */
            0% {
                left: 120%;
            }

            100% {
                left: -25%;
            }
        }

        @keyframes cloud-animation {
            0% {
                left: 120%;
            }

            100% {
                left: -25%;
            }
        }

        .Signature {
            position: absolute;
            z-index: 100;
            bottom: 20px;
            right: 20px;
            color: #00ADE6;
            line-height: .2;
            font-size: .7em;
            font-family: Open Sans, sans-serif;
        }

    </style>
</head>
<body>
<!-- Do not add <body> tags to HTML snippets //-->
<div class="animation"></div>

<img src="http://twin-dev.net/experiments/codevember/maki/ressources/white-cloud.png" class="cloud">

<h1 id="title" class="title"><span>press</span><span>release</span></h1>

<svg viewbox="0 0 100 200" id="svg"  preserveAspectRatio="none" class="svg-path">
    <path id="box" d="M0,0 H100 V100 Q50,200 0,100" fill="#00ADE6">
</svg>

<aside class="Signature">
    <p><a href="http://www.gbtags.com">极客标签gbtags.com</a></p>
</aside>


<!-- Open source CDN is recommended to select external JS to be referenced //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dynamics.js/0.0.7/dynamics.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<script>
    /*Javascript code snippet*/
    $( document ).ready(function() {

        var path = document.getElementById('box');
        var title = document.getElementById('title');

        var spring = .9;
        var friction = .8;
        var easing = .1;

        var sy = 200;
        var dy = 100;
        varvy = 0;
        var released = true;

        requestAnimationFrame(function update(){
            requestAnimationFrame(update);

            if (released) {
                vy + = (dy - sy) * spring;
                and += (iron *= friction);
            } else {
                sy += (dy - sy) * easing;
            }

            path.setAttribute('d', 'M0,0 H100 V100 Q50,' + sy + ' 0,100');
        });


        var clicking = false;

        document.addEventListener('mousedown', function(){
            released = false;
            dy = 200;
            $(".animation").animate({
                top: "40%"
            }, 200);

            title.classList.add('pressed');
        });

        document.addEventListener('mouseup', function(){

            $(".animation").animate({
                top: "10%"
            });
            $(".animation").addClass("animationBird");
            $(".cloud").show().addClass("animationCloud");

            setTimeout(releaseHeader, 600);

            title.classList.remove('pressed');
        });


        function releaseHeader() {
            released = true;
            dy = 100;

            setTimeout(removeClass, 4500);
        }

        function removeClass() {
            $(".animation").removeClass("animationBird");
            $(".cloud").removeClass("animationCloud");
        }

    });

</script>


</body>
</html>
Fire bird animation effects

Guess you like
