Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
/* Forked from http://codepen.io/GabbeV/pen/HsImg */ window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame onload = function (){ setTimeout(init,0) } init = function(){ canvas = document.querySelector('canvas') ctx = canvas.getContext('2d') onresize = function(){ canvas.width = canvas.clientWidth canvas.height = canvas.clientHeight } onresize() mouse = {x:canvas.width/2,y:canvas.height/2,out:false} canvas.onmouseout = function(){ mouse.out = true } canvas.onmousemove = function(e){ var rect = canvas.getBoundingClientRect() mouse = { x: e.clientX - rect.left, y: e.clientY - rect.top, out: false } } gravityStrength = 10 particles = [] spawnTimer = 0 spawnInterval = 10 type = 0 time = performance.now() requestAnimationFrame(loop) } newParticle = function(){ type = type?0:1 particles.push({ x:mouse.x, y:mouse.y, xv:type?18*Math.random()-9:24*Math.random()-12, yv:type?18*Math.random()-9:24*Math.random()-12, c:type?'rgb(255,'+((200*Math.random())|0)+','+((80*Math.random())|0)+')':'rgb(255,255,255)', s:type?5+10*Math.random():1, a:1 }) } loop = function(){ draw() calculate() requestAnimationFrame(loop) } draw = function(){ ctx.clearRect(0,0,canvas.width,canvas.height) for(var i=0;i
0;spawnTimer-=spawnInterval){ newParticle() } } particleOverflow = particles.length-700 if(particleOverflow>0){ particles.splice(0,particleOverflow) } for(var i=0;i
100?gravityStrength/a:gravityStrength/100 p.xv = (p.xv+a*x)*0.99 p.yv = (p.yv+a*y)*0.99 } p.x += p.xv p.y += p.yv p.a *= 0.99 } }
CSS
body{ margin: 0; } canvas{ position: absolute; width: 100%; height: 100%; background: #111a22; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email