JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<h1>Jumpable - CSS3 animations and jQ</h1>
<div class="jumpable">
    <h1>Text</h1>
    <p>Text</p>
</div>
<div class="jumpable">
    <h1>Text</h1>
    <p>Text</p>
</div>

<div class="jumpable">
    <h1>Texter</h1>
    <p>Teeeeext</p>
</div>

CSS

body { 
    padding: 25px;
    font-family: arial;
}
h1 { font-size: 1.5em; }
.jumpable {
     position: relative;
     display: inline-block;
     margin: 20px 0 20px 5px;
}
.jumpable:first-child { margin-left: 0; }
.jumpable-content {
     background: #f1f1f1;
     border: 1px solid #ccc;
     border-left-width: 10px;
     border-radius: 6px;
     position: relative;
     display: inline-block;
     position: relative;
     bottom: 0;
     left: 0;
     padding: 5px 10px;
     z-index: 6;
}
@-webkit-keyframes shShrink {
    0%   {width: 100%;-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.8)}
    100% {width: 80%; -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3)}
}
@-webkit-keyframes shGrow {
    0%   {width: 80%; -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .8);}
    100% {width: 100%;-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0);}
}
.jumpable .shadow {
     margin: 0 auto;
     padding: 0;
     display: none;
     width: 80%;
     height: 0px;
     left: 0;
     background-color: rgba(0, 0, 0, 0);
     position: relative;
     bottom: -5%;
     z-index: 3;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
     box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);     
}
.jumpable .shadow.shrink {
    -webkit-animation: shShrink .5s;
}
.jumpable .shadow.grow {
    -webkit-animation: shGrow .5s;
}

JavaScript

// trigger and ender
triggererer = 'mouseenter';
endererer = 'mouseleave';

$('.jumpable').each(function () {
    $(this).wrapInner('<div class="jumpable-content" />');
});

$('.jumpable').hover(function(){
     // this jumpable
     var jumper = $(this);

     // create shadow element
     var shadow = $(document.createElement('div'));

     // resets shadow
     //$('.shadow').remove();

     // append it to the jumpable
     if($(this).children('.shadow').length == 0)
         $(this).append(shadow);
         
     // add styling
     $(shadow).addClass('shadow shrink');

     // fade in Shadow and box jump
    
     $(shadow).stop(true, false).fadeIn(5, function(e){
         $('.jumpable-content',jumper).stop(true, false).animate({top: '-15px'}, 180);
         $(this).addClass('active');
     });

     // box fall and shadow reset
}, function() {
     var jumper = $(this);
         $('.jumpable-content',jumper).stop(true, false).animate({ top: '0px' }, 200, function() {
             $(this).siblings('.shadow').remove();
         });        
     $(this).removeClass('active');
 });