Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
var minRadius = 20; var bubbleNum = (innerWidth * (minRadius * 2)) * 0.0013; var depth = 100; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = innerWidth; canvas.height = innerHeight; window.addEventListener('resize', function(){ canvas.width = innerWidth; canvas.height = innerHeight; bubbleNum = (innerWidth * (minRadius * 2)) * 0.0013; generateBubbles(); }) function Bubble() { this.gravity = Math.random() * 0.02; this.radius = minRadius + Math.random() * 40; this.x = this.radius + (Math.random() * (innerWidth - this.radius * 2)); this.y = this.radius + (Math.random() * (innerHeight - this.radius * 2)); this.z = Math.random() * depth; this.hspeed = 0.5 + (Math.random() * -1); this.vspeed = 0.5 + (Math.random() * -1); } Bubble.prototype.move = function() { if (this.x + this.hspeed < this.radius || this.x + this.hspeed > innerWidth - this.radius) { this.hspeed *= -1; } if (this.y + this.vspeed < this.radius || this.y + this.vspeed > innerHeight - this.radius) { this.vspeed *= -1; } this.x += this.hspeed; this.y += this.vspeed; this.vspeed += this.gravity; if (this.x > innerWidth || this.x < 0 || this.y > innerHeight || this.y < 0) { this.x = this.radius + (Math.random() * (innerWidth - this.radius * 2)); this.y = this.radius + (Math.random() * (innerHeight - this.radius * 2)); } }; Bubble.prototype.draw = function() { var bubble = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius); bubble.addColorStop(0, 'rgba(98, 79, 249, 0.05)'); bubble.addColorStop(1, 'rgba(98, 79, 249, 0.3)'); ctx.fillStyle = bubble; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.fill(); var glare = ctx.createRadialGradient(this.x, this.y, this.radius * 0.2, this.x, this.y, this.radius * 1.1); glare.addColorStop(0,'rgba(255,255,255,0)'); glare.addColorStop(1,'rgba(255,255,255,0.6)'); ctx.strokeStyle = glare; ctx.lineWidth = this.radius * 0.25; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius * 0.66, Math.PI * -0.05, Math.PI * 1.55, true); ctx.stroke(); ctx.lineWidth = this.radius * 0.1; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius * 0.7, Math.PI * 0.65, Math.PI * 0.9, false); ctx.stroke(); }; var bubbles = []; function generateBubbles() { for (var i = bubbles.length; i < bubbleNum; i++) { bubbles.push(new Bubble()); } } generateBubbles(); function loop() { ctx.clearRect(0, 0, innerWidth, innerHeight); for (var i = 0; i < bubbles.length; i++) { bubbles[i].draw(); bubbles[i].move(); } requestAnimationFrame(loop); } requestAnimationFrame(loop);
CSS
body { margin: 0; overflow: hidden; background-color: #131c5c; }
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