JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non eleifend massa, sed sodales risus. Mauris et dignissim quam. Nunc nec sapien non odio semper ultrices. Quisque id lectus eu arcu viverra laoreet. Praesent sagittis placerat orci, vitae sodales tortor varius ultrices. Duis eu enim nec metus iaculis malesuada eget ac ante. Ut auctor mi quam. Maecenas placerat a eros ac elementum. Cras non faucibus diam, eu sagittis nibh. Donec nisl enim, congue nec mi sit amet, condimentum imperdiet ante. Cras pretium pellentesque blandit. Nullam aliquet pretium augue, at vestibulum ante tristique vitae. Donec sed aliquet quam. Nullam consectetur quam vitae diam gravida venenatis. Vestibulum ipsum risus, fermentum ut velit at, consectetur lacinia mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend, leo at molestie imperdiet, nibh ante rutrum purus, nec porta purus nulla id dolor. Nunc et ultricies justo. Integer ultrices, lorem eget vulputate dictum, erat ipsum eleifend tortor, at porta leo velit eleifend lacus. Suspendisse fermentum quam nisi, dignissim feugiat turpis hendrerit a. Vivamus egestas, lectus nec lacinia lacinia, nulla massa tempor erat, auctor convallis dui ligula nec nunc. Cras aliquet aliquam mauris nec pharetra. Sed id metus metus. In viverra nisi nec tortor convallis auctor. Sed placerat, nisl in auctor malesuada, mi massa adipiscing arcu, a molestie metus velit at libero. Aliquam faucibus ut lectus vel euismod. Praesent magna dolor, placerat a dui sed, egestas gravida massa. Pellentesque laoreet, augue sit amet mollis aliquam, neque orci feugiat leo, eget congue magna mi blandit nisl. Morbi hendrerit porta molestie. Nunc bibendum eros urna, ac fringilla nibh scelerisque vel. Fusce egestas justo et erat tempus ultricies vel sit amet nisl. Nam a dui in velit imperdiet iaculis. Donec nec sapien sagittis, laoreet nisi in, lacinia mauris. Aenean a ligula orci. Duis condimentum neque et mauris pellentesque volutpat....

CSS

Body {
    height:2000px;
}
.animated {
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    opacity:0;
}
.animated.hinge {
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    -ms-animation-duration:2s;
    -o-animation-duration:2s;
    animation-duration:2s;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}
@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
}
@-moz-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
}
@-o-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -o-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -o-transform: translateY(20px);
    }
}
@keyframes...

JavaScript

$(window).scroll(function () {
    var y = $(window).scrollTop(),
        x = $('.animated').offset().top - 200;
    if (y > x) {
        $('.animated').addClass('fadeInUp').removeClass('fadeOutDown');
    } else {
        $('.animated').removeClass('fadeInUp').addClass('fadeOutDown');
    }
});