JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="girl">
    <div class="ribbon"></div>
</div>

CSS

.girl {
    width: 320px;
    height: 390px;
    position: relative;
    background: url("https://cloclo11.cloud.mail.ru/weblink/thumb/xw1/fa985eb50116/%D0%B4%D0%B5%D0%B2%D1%83%D1%88%D0%BA%D0%B0.jpg") 0 0 no-repeat;
}
.ribbon {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: url("http://jira2.itech-service.ru/secure/attachment/16963/%D0%BB%D0%B5%D0%BD%D1%82%D0%B0.png") no-repeat 0px 0px;
}

JavaScript

var cW = 320;
var cH = 390;


var posTop = 0;
var posLeft = 0;
var countLeft = 0;
var countTop = 0;
var $obj = $('div.ribbon');

var _int;

$obj.css({
    'width': cW + 'px',
    'height': cH + 'px'
});

$('.girl').hover(function(){
    $('.ribbon').show();
    clearInterval(_int);
    _int = setInterval(function () {
    
        $obj.css({
            'background-position': posLeft + 'px ' + posTop + 'px'
        });
        posLeft = posLeft - cW;
        countLeft++;
        if (countLeft == 48) {
            clearInterval(_int);
            //countLeft = 0;
            //posLeft = 0;
        }
    
    }, 15);
}, function(){
    clearInterval(_int);
    posLeft = 0;
    countLeft = 0;
    $('.ribbon').fadeOut(200, function(){
    $obj.css({
            'background-position': posLeft + 'px ' + posTop + 'px'
        });
    });
});