JSFiddle - React, Tailwind, and code Playground

by Sandhose

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Let it snow !</title>
    </head>
    <body>
        <div class="yay">Lorem Ipsum sit Amet</div> 
    </body>
</html>

CSS

body {
    background-color: #454545;
}

.yay {
    text-align: center;
    font-family: "Myriad Pro";
    color: #CCC;
    padding: 50px;
    font-size: 72px;
}

.letitsnow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.flake {
    position: absolute;
    z-index: 300;
    background-color: #FFF;
    border-radius: 100px;
    box-shadow: 0 0 4px white;
}

JavaScript

var LetItSnow = function(options) {
    this.options = {
        speed: 10, // 1 = Normal
        speedRandom: 1, // Speed random
        angle: 130,
        angleRandom: 10, // Random angle
        size: 10, // Flakes size
        sizeRandom: 8, // Size random
        turbulences: 0.3, // Btw 0 and 1
        flakesCount: 100 // Flakes count
    };
    this.flakes = [];
    var self = this;
    
    // Functions
    function update() {
        // Do some stuff
        debugger;
        for (var i=0;i<self.flakes.length;i++) {
            self.flakes[i].update();
        }
        
        setTimeout(self.update, 1);
        console.log("Update");
    }
    this.update = update;
    
    function init() {
        // Init
        this.container = $('<div class="letitsnow"></div>').appendTo("body");
        
        for (var i=0;i<200;i++) {
            this.flakes.push(
                new this.Flake(
                    this.container, 
                    this.options.speed + ((Math.random() - 0.5) * this.options.speedRandom),
                    this.options.size + ((Math.random() - 0.5) * this.options.sizeRandom),
                    (Math.random() * this.options.angleRandom) + this.options.angle - (this.options.angleRandom/2), 
                    this.options.turbulences
                )
            );
        }
        
        setTimeout(self.update, 200);
        debugger;
    }
    this.init = init;
    
    this.Flake = function(container, speed, size, angle, turbulences) {
        this.container = $(container);
        this.speed = speed;
        this.size = size;
        this.angle = angle;
        this.turbulences = turbulences;
        this.elem = undefined;
        this.lastUpdate = new Date();
        
        // Functions
        function spawn() {
            // Spawn flake
            this.elem = $('<div class="flake"></div>')
                .appendTo(this.container)
                .height(this.size + "px")
                .width(this.size +...