title
A prototype
0
Particles
html, body { background: #fff; width: 100%; height: 100%; overflow: hidden; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: "PT Sans", sans-serif; } .title { font-size: 10vw; font-weight: 700; text-align: center; margin-top: 15%; color: #444; } .subtitle { font-size: 4vw; color: #777; font-weight: normal; text-align: center; margin-top: 0; } .credit { position: absolute; bottom: 5px; width: 100%; display: block; text-align: center; color: #777; } .credit > a { color: #777; } .particle-count { display: block; text-align: center; margin: 25px 0; } .particles > .particle { border-radius: 100%; background: transparent; position: absolute; background-size: 100% 100%; background-repeat: no-repeat; } .particles > .particle.smaller { width: 5px; height: 5px; } .particles > .particle.small { width: 10px; height: 10px; } .particles > .particle.normal { width: 15px; height: 15px; } .particles > .particle.big { width: 20px; height: 20px; } .particles > .particle.bigger { width: 25px; height: 25px; }
var d = document, w = window, wWidth = w.innerWidth, wHeight = w.innerHeight, particles = d.querySelector('.particles'), particleCount = 0 function updateParticleCount () { d.querySelector('.number').innerHTML = particleCount }; //w.on( 'resize' , function () { // wWidth = $w.width(); // wHeight = $w.height(); //}); var timer = setInterval(function () { createParticle( event ); }, 1000 / 10) // createParticle( event ); function createParticle ( event ) { // var particle = $('
'), var particle = d.createElement('div'), negative = 10/2, speedHorz = Math.random() * 10, speedUp = Math.random() * 25, spinVal = 360 * Math.random(), spinSpeed = ((36 * Math.random())) * (Math.random() <=.5 ? -1 : 1), otime, time = otime = (1 + (.5 * Math.random())) * 1000, top = 0, left = Math.random() * wWidth, direction = Math.random() <=.5 ? -1 : 1 , life = 10; particle.innerHTML = "*" particle.classList.add('particle') particle.setAttribute("style","top:"+top+"px; left:"+left+"px;" ) particles.appendChild(particle) particleCount++; updateParticleCount(); var particleTimer = setInterval(function () { time = time - life; left = left - (speedHorz * direction); top = top - speedUp; speedUp = Math.min(10, speedUp - 1); spinVal = spinVal + spinSpeed; if( time <= 0 || left <= -10 || left >= wWidth + 10 || top >= wHeight + 10 ) { particle.remove(); particleCount--; updateParticleCount(); clearInterval(particleTimer); } }, 1000 / 60); }
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