JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css">
<div class="tutorialOverlay">
    <div class="tutorialStepWrap">
        <div class="tutorialStep tutorialStep1">
            <span class="tutorialStepNum">1</span>
            <div class="tutorialGfx">
                <svg class="tutorialGfxMail tutorialGfxSvg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="100px" height="66px" viewBox="0 0 100 66" enable-background="new 0 0 100 66" xml:space="preserve">
                    <path d="M0,0v66h100V0H0z M92.721,4L50,40.373L7.28,4H92.721z M4,6.46l30.044,25.575L4,60.312V6.46z M8.043,62l29.066-27.355
                        L50,45.617l12.891-10.973L91.957,62H8.043z M96,60.312L65.956,32.035L96,6.46V60.312z"/>
                </svg>
                    
                <span class="tutorialGfxMailBadge">1</span>
            </div>
            
            <div class="tutorialStepDesc">
                Bekreftelses-epost sendt til [email protected] 01.01.2014 14:50
            </div>
        </div>
    </div>
    <div class="tutorialStepWrap">
        <div class="tutorialStep tutorialStep2">
            <span class="tutorialStepNum">2</span>
            <div class="tutorialGfx">
                <svg class="tutorialGfxMail tutorialGfxSvg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="100px" height="66px" viewBox="0 0 100 66" enable-background="new 0 0 100 66" xml:space="preserve">
                    <path d="M0,0v66h100V0H0z M92.721,4L50,40.373L7.28,4H92.721z M4,6.46l30.044,25.575L4,60.312V6.46z M8.043,62l29.066-27.355
                        L50,45.617l12.891-10.973L91.957,62H8.043z M96,60.312L65.956,32.035L96,6.46V60.312z"/>
                </svg>
                
                <span class="tutorialGfxMailBadge">1</span>
                
               ...

CSS

.tutorialOverlay {
    background: rgba(17, 17, 17, 0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    
    color: white;
    font-family: Arial, sans-serif;
    line-height: 140%;
}

.tutorialStepWrap {
    width: 33.33%;
    float: left;
    position: relative;
    height: 100%;
    opacity: 0.5;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    transition: opacity 1s;
}
.tutorialStepWrap:hover {
    opacity: 1;
}
.tutorialStep {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    min-height: 200px;
    min-width: 200px;
}

.tutorialStepNum {
    display: block;
    text-align: center;
    font-size: 3em;
    padding: 40px 0 50px 0;
    font-weight: bold;
}

.tutorialStepDesc {
    text-align: center;
    color: white;
    font-size: 1em;
    padding-top: 20px;
}

.tutorialGfx {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    position: relative;
}
.tutorialGfxSvg {
    fill: white;
}
.tutorialGfxHand {
    width: 50%;
    height: 50%;
    position: absolute;
    right: 20%;
    bottom: -5%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    
/*    opacity: 0.2;
/*    -webkit-transform: translateY(100%);
}
.tutorialStep:hover .tutorialGfxHand {
    opacity: 1;
    -webkit-transform: translateY(0);*/
}

.tutorialGfxMailBadge {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    border-radius: 50%;
    background: #ea004f;
    color: white;
    display: block;
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

JavaScript

var animate = function(el, animation) {
    var d = new $.Deferred();
    $(el)
    .addClass("animated " + animation)
    .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
         function() {
        $(el).removeClass("animated " + animation);
        d.resolve();
    });
    return d.promise();
};

// Badge bounce
$(".tutorialStep1").on("mouseover", function(e) {
    e.stopPropagation();
    animate($(".tutorialGfxMailBadge", this), "bounce");
});


// Step 2
$(".tutorialStep2").on("mouseover", function(e) {
    e.stopPropagation();
    var badge = $(".tutorialGfxMailBadge", this);
    var hand = $(".tutorialGfxHand", this);
        
    $.when(animate(badge, "fadeOutUp"))
    .then(function() {
        return animate(badge, "bounceIn");
    })
/*    .then(function() {
        hand.css("bottom", "30%");
        hand.css("opacity", 1);
        return animate(hand, "fadeOut");
    });*/
});

// Step 3
$(".tutorialStep3").on("mouseover", function(e) {
    e.stopPropagation();
    var hand = $(".tutorialGfxHand", this);
    var link = $(".tutorialGfxDocLink", this);
        link.attr("fill", "#00a1de");
    /*
    $.when(animate(hand, "fadeInUpBig"))
    .then(function() {
        link.attr("fill", "#00a1de");
    });*/
});
$(".tutorialStep3").on("mouseout", function() {
    $(".tutorialGfxDocLink", this).attr("fill", "");
});