title
A prototype
html, body{height:100%;} body{background:#444;} /* Spot */ .spot{ position: fixed; opacity: 1; border-radius:100%; animation: spot .3s ease-out forwards; } .spot.small{width:2vw; height:2vw;} .spot.medium{width:5vw; height:5vw;} .spot.large{width:7vw; height:7vw;} @keyframes spot { 100% { opacity: 0; } }
const d = document, b = d.body var sizes = ['small','medium','large'] var cols = ['palegreen', 'tomato'] var createSpotInt = setInterval(function () { createSpot() }, 400); function createSpot(){ t = Math.round(Math.random() * 100) l = Math.round(Math.random() * 100) c = Math.floor(Math.random() * cols.length) s = Math.floor(Math.random() * sizes.length) col = cols[c] size = sizes[s] var spot = d.createElement('div') spot.classList.add('spot') spot.classList.add(size) spot.setAttribute('style','top:'+t+'%; left:'+l+'%; background:'+col+';') b.appendChild(spot) setTimeout(function () { spot.remove() }, 350); }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code