Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
ww=$(window).width(); wh=$(window).height(); xx=ww/2; yy=wh/2; nr=5; dots=[]; function D(x,y,v,a){ this.x = x; this.y = y; this.a = a; this.v = v; this.el = $("<div/>").appendTo($('body')); this.el.css('animation-delay', 200+Math.floor(Math.random()*1000)+'ms') dots.push(this); }; D.prototype.m = function(){ this.a+=Math.random()-.5; this.x=this.x+Math.cos(this.a)*this.v; this.y=this.y+Math.sin(this.a)*this.v; this.x>ww ? this.x=0 : null; this.x<0 ? this.x=ww :null; this.y>wh ? this.y=0 :null; this.y<0 ? this.y=wh :null; this.el.css({ left: this.x, top: this.y }) } for(i=0; i<nr; i++){ new D(xx,yy,3,Math.random()*Math.PI*2); } function r(){ for(i=0; i<nr; i++){ dots[i].m(); } requestAnimationFrame(r); } r();
CSS
body { background-color: black; overflow: hidden; } div { width: 20px; height: 20px; position: absolute; color: white; border-radius: 50%; background-color: white; -webkit-animation: x 2s infinite; animation: x 2s infinite; -webkit-filter: blur(10px); } @-webkit-keyframes x { 0%,100% { opacity: 0; -webkit-transform: scale(10); } 50% { opacity: 1; -webkit-transform: scale(15); } }
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
