Document

The Output

Refresh and Enjoy again..

The Input

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<script>
window.onload = function (){
let W = window.innerWidth;
let H = window.innerHeight;
let canvas1 = document.getElementById("canvas");
canvas.width = W;
canvas.height = H;
let ctx = canvas.getContext("2d");
let bubbles=[];
let start=false;
canvas.addEventListener("mousedown", function(event){
share();
});
canvas.addEventListener("touchmove", function(event){
share();
});
function CreateBubble(x, y, ra, speedX, speedY){
this.x = x;
this.y = y;
this.ra = ra;
this.speedX = speedX;
this.speedY = speedY;
this.draw = function(){
ctx.fillStyle = '#DF013A';
ctx.beginPath();
ctx.arc(this.x, this.y, this.ra, 0, 2*Math.PI);
ctx.fill();
};
this.update = function(){
this.x -= (start)?this.speedX:0;
this.y -= (start)?this.speedY:0;
this.draw();
};
}

for(let j=0;j<40;j++){
for(let k=0;k<10;k++){
let ra =2;
let speedX = Math.random()*1;
let randomX = [speedX,"-"+speedX];
let speedY = Math.random()*1;
let randomY = [speedY,"-"+speedY];
let nbrRandomX = Math.floor(Math.random() * 2 );
let nbrRandomY = Math.floor(Math.random() * 2 );
let newFw= new CreateBubble(W/2+j*2.5-47.5, H/3.2+k*2.5-12, ra, randomX[nbrRandomX] ,randomY[nbrRandomY]);
bubbles.push( newFw );
}
}
function share(){
start=true;
}
function animate(){
requestAnimationFrame(animate); 
ctx.beginPath(); 
ctx.clearRect(0,0,innerWidth,innerHeight);
for(let m = bubbles.length - 1; m >= 0; m--){
bubbles[m].update();
}
ctx.fillStyle = (!start)?"white":"transparent";
ctx.font = "bold 15px Arial";
ctx.fillText("BUBBLE", W/2-26, H/3.2+4);
}
animate();
};
</script>
<body>
<div class="canvas">
<canvas id ="canvas"></canvas>  
</div>
</body>
</html>

HTML source code

Kumar Lakshmanan

Button bubble effect using javascript

The Output

Refresh and Enjoy again..

The Input

Top Stories

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Button bubble effect using javascript

The Output

Refresh and Enjoy again..

The Input

Top Stories

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget