JSFiddle - React, Tailwind, and code Playground

by ataylor

HTML

<h1>Scroll Sucka!</h1>
<div class="tall-boy">
    <div class="button animated" data-animation="shake">Shake, Baby</div>
</div>
<h1>Keep Scrolling</h1>
<div class="tall-boy">
    <div class="button animated" data-animation="tada">Tada</div>
</div>
<h1>And Scrolling...</h1>
<div class="tall-boy">
    <div class="button animated" data-animation="bounce">Bounce</div>
</div>
<h1>Do I Still Have To Tell You To Scroll?</h1>
<div class="tall-boy">
    <div class="button animated" data-animation="rotateIn">RotateIn</div>
</div>
<h1>Now Scroll Back Up, Slowly</h1>

CSS

@charset"UTF-8";
 body {
    -webkit-backface-visibility:hidden;
}
.animated {
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
}
.animated.hinge {
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    -o-animation-duration:2s;
    animation-duration:2s;
}
@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
@-moz-keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
@-o-keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
@keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
.animated.flash {
    -webkit-animation-name:flash;
    -moz-animation-name:flash;
    -o-animation-name:flash;
    animation-name:flash;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform:translateX(10px);
    }
}
@-moz-keyframes shake {
    0%, 100% {
        -moz-transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -moz-transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -moz-transform:translateX(10px);
    }
}
@-o-keyframes shake {
    0%, 100% {
        -o-transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -o-transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -o-transform:translateX(10px);
    }
}
@keyframes shake {
    0%, 100% {
        transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform:translateX(10px);
   ...

JavaScript

jQuery(document).ready(function($) {
    function animated_scroll() {
        /* Check the location of each element */
        $('.animated').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).height();
            var top_of_object = $(this).offset().top;
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            var top_of_window = bottom_of_window - $(window).height();
            var animation = $(this).attr('data-animation');
            /* If the object is completely visible in the window add the class active */
            if (bottom_of_window > top_of_object && top_of_window < bottom_of_object) {
                if (!$(this).hasClass(animation)) {
                    $(this).addClass(animation);
                }
                /* Otherwise remove the active class */
            } else {
                $(this).removeClass(animation);
            } //end else
        });
    } //animated_scroll

    animated_scroll();
    $(window).scroll(animated_scroll);
});