JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<div class="menu">
    <div class="logo">
        <div class="portal"></div>
        <div class="four"></div>
        <div class="yukari"></div>
        <div class="portal-mask"></div>
    </div>
</div>

CSS

.menu {
    border-bottom: #2C4D76 5px solid;
    min-height: 60px;
    background: rgb(59,103,158);
    background: -moz-linear-gradient(top, rgba(59,103,158,1) 54%, rgba(62,112,163,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(54%,rgba(59,103,158,1)), color-stop(100%,rgba(62,112,163,1)));
    background: -webkit-linear-gradient(top, rgba(59,103,158,1) 54%,rgba(62,112,163,1) 100%);
    background: -o-linear-gradient(top, rgba(59,103,158,1) 54%,rgba(62,112,163,1) 100%);
    background: -ms-linear-gradient(top, rgba(59,103,158,1) 54%,rgba(62,112,163,1) 100%);
    background: linear-gradient(to bottom, rgba(59,103,158,1) 54%,rgba(62,112,163,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#3e70a3',GradientType=0 );
}

.logo {
    position: relative;
    height: 60px;
    overflow: hidden;
}

.logo > div {
    width: 102px;
    height: 60px;
    display: inline-block;
    position: absolute;
}

.logo .four {
    text-indent: 0;
    background: url(https://dl.dropboxusercontent.com/u/23033545/Archives/path3935.png) no-repeat center center;
}

.logo .portal {
    display: none;
    background: url(https://dl.dropboxusercontent.com/u/23033545/Archives/image4084.png) no-repeat left bottom;
}

.logo .portal-mask {
    display: none;
    background: url(https://dl.dropboxusercontent.com/u/23033545/Archives/image4084_mask.png) no-repeat left 33px;
}

.logo .yukari {
    top: 60px;
    background: url(https://dl.dropboxusercontent.com/u/23033545/Archives/path3982_.png) no-repeat center top;
}

JavaScript

var portal = $('.portal,.portal-mask'),
    yukari = $('.yukari'),
    four = $('.four')
;

function _yukari(time, callback) {
    yukari.animate({
        top: '-=60px'
    }, time, callback);
}

function _portal(time, callback) {
    portal
        .first().fadeIn(time, callback)
    .end().last().fadeIn(time);
}
    
function _four(time, callback) {
    four
    .animate({ textIndent: '-95px' }, {
        step: function(now,fx) {
            $(this).css({
                transform:'rotate('+now+'deg)',
                '-webkit-transform':'rotate('+now+'deg)',
            }); 
        },
        queue: false,
        duration: 'normal'
    }, 'linear')
    .animate({
        top: '+=60px',        
    }, time, callback);
}

$('.logo').on('mouseenter', function () {
    _portal(300, function () {
        _four(300, function () {
            _yukari(600, function () { 
                console.log('stop');
            });
        });
    });  
})
.on('mouseleave', function () {
    portal.stop();
    yukari.stop();
    four.stop();
    
    yukari.animate({top: '+=60px'}, 100, function () {
        portal.fadeOut('fast', function () {
            four.hide().fadeIn('fast').css({
                'top': '0',
                'transform': 'rotate(0)',
                '-webkit-transform': 'rotate(0)',
                'text-indent': '0'
            });
        });
        yukari.css('top', '60px');
    });
});