JSFiddle - React, Tailwind, and code Playground

by serio

HTML

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
<div class='fixed'></div>

CSS

html body {
    height: 10000px;
}
.fixed {
    position: fixed;
    top: 0;
}
.fixed span {
    display: inline-block;
    padding: 10px;
    font-size: 40px;
    color: #FFF;
    background: #666;
    font-family:'Open Sans', sans-serif;
    text-transform: uppercase;
    -webkit-animation: rot20 500ms;
    -moz-animation: rot20 500ms;
    -ms-animation: rot20 500ms;
    animation: rot20 500ms;
}
@-webkit-keyframes rot20 {
    from {
        bottom: -1.5em;
        -webkit-transform: rotate3d(0, 1, 0, -30deg);
    }
    to {
        bottom: 0em;
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
    }
}
@-moz-keyframes rot20 {
    from {
        bottom: -1.5em;
        -webkit-transform: rotate3d(0, 1, 0, -30deg);
    }
    to {
        bottom: 0em;
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
    }
}
@-ms-keyframes rot20 {
    from {
        bottom: -1.5em;
        -webkit-transform: rotate3d(0, 1, 0, -30deg);
    }
    to {
        bottom: 0em;
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
    }
}
@keyframes rot20 {
    from {
        bottom: -1.5em;
        -webkit-transform: rotate3d(0, 1, 0, -30deg);
    }
    to {
        bottom: 0em;
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
    }
}

JavaScript

$(function () {
    
    var n = window.location.hash.replace('#','') || 'guy';
    
    $(window).on('scroll', function () {
        // get scroll position
        var scrollPos = $(this).scrollTop();

        // do different things at different points
        if (scrollPos >= 6400) {
            appendOnce('❤');
        } else if (scrollPos >= 3200) {
            appendOnce('-__-');
        } else if (scrollPos >= 1600) {
            appendOnce( n );
        } else if (scrollPos >= 800) {
            appendOnce('scrollin');
        } else if (scrollPos >= 400) {
            appendOnce('fuxin');
        } else if (scrollPos >= 200) {
            appendOnce('stahp');
        }
    });

    // append some junk
    function appendOnce(txt) {
        if (!$('.' + txt).length) {
            $('<span>')
                .text(txt)
                .addClass(txt)
                .appendTo('.fixed');

            $('<br/>').appendTo('.fixed');
        }
    }
});