JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<img id="coin"...

CSS

html, body { margin: 0; overflow: hidden; }
#coin { display: none; }

JavaScript

var coin = document.getElementById( 'coin' )
var w2 = coin.width / 2
var h2 = coin.height / 2

var particles = []
var pool = []

function Particle() {}

Particle.prototype = {
    init: function() {
        this.x = random( window.innerWidth )
        this.y = -coin.height
        this.vx = 1.0 * random( -1, 1 )
        this.vy = random( 6, 12 )
        this.vr = 0.1 * random( -1, 1 )
        this.scale = random( 0.2, 0.8 )
        this.rotation = random( -PI, PI )
    },
    move: function() {
        this.x += this.vx
        this.y += this.vy
        this.rotation += this.vr
        this.scale *= 0.995
    },
    draw: function( ctx ) {
        ctx.save()
        ctx.translate( this.x, this.y )
        ctx.rotate( this.rotation )
        ctx.scale( this.scale, this.scale )
        ctx.drawImage( coin, -w2, -h2 )
        ctx.restore()
    }
}

function spawn() {

    if ( particles.length >= 200 ) {
        pool.push( particles.shift() )
    }

    var particle = pool.length ? pool.pop() : new Particle()
    particles.push( particle )
    particle.init()
}

var canvas = document.createElement( 'canvas' )
var ctx = canvas.getContext( '2d' )

function draw() {
console.log(window.pageYOffset)
    requestAnimationFrame( draw )

    canvas.height = window.innerHeight
    canvas.width = window.innerWidth

    if ( window.pageYOffset < 0 ) {
        spawn()
    }

    particles.forEach(function( particle ) {
        particle.move()
        particle.draw( this )
    }, this)
}

document.body.appendChild( canvas )
draw()