JSFiddle - React, Tailwind, and code Playground

by Liu David

HTML

<html>
<head>
        <title>etoxin.net</title> 
        <link href='http://fonts.googleapis.com/css?family=Give+You+Glory' rel='stylesheet' type='text/css'> 
        <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" media="screen" href="include/css/stylesheet.css">
        <style>
        body {font: 14px / 1.5em 'Gloria Hallelujah', cursive;}
        .fontFlake{
                position:absolute;
                top:-50px;
                left:0px;
                z-index:10;
                position:block;
        }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
</head>
        <body>
        <h1>Font Flakes by etoxin</h1>
        </body>
</html>

JavaScript

var etx = {
    init: function () {
        etx.callFontFlakes();
    },
    callFontFlakes: function(){
            window.setInterval(function(){
                        etx.fontFlake();
            }, 10);
    },
    fontFlake: function(){
        // let set some bloody vars
        var stageWidth = $(window).width();
        var stageHeight = $(window).height();
        var randomEntry = Math.ceil(Math.random()*stageWidth);
        var preRandomFontSize = Math.ceil(Math.random()*40);
        var randomFontSize = preRandomFontSize + 10;
                var flakeName = 'flake-'+randomEntry;
                var grayScale = Math.ceil(Math.random()*256);
                var hue = 'rgb('+grayScale+','+grayScale+','+grayScale+ ')';
                
                // ok time to create and animate this stupid thing.
                $('<div />', {
                        text: randomEntry,
                        id: flakeName,
                }).appendTo('body').addClass('fontFlake').css('left', randomEntry).css('font-size', randomFontSize).css('color', hue).animate({
                        "top": "+=" + stageHeight,
                        opacity: 0
                }, 5000, function() {
                        $('#'+flakeName).remove();                      
                }); 
    }
};
$(document).ready(function () {
    etx.init();
});