Skip to main content

The Bubble Tail

The Bubble Tail Animation By using HTML_CSS_JAVASCRIPT

    

            Here is the bubble tail Animation, In this code there is a amazing effect of  colourfull bubbles which is in form of tail of the mousepointer. As the pointer moves the bubble create and disappear again. The code is not so complex just watch the video and do it. It will grate experience for you.



   CODE - 


              

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sketch.js Flare animation</title>
  
  <script src="https://rawgithub.com/soulwire/sketch.js/master/js/sketch.min.js"></script>
  <style>
  body{
      background:black;
    }
  </style>
</head>
<body>
  
    <div id="container"></div>
    
  <script>
      function Particle(x, y, radius) {
  this.init(x, y, radius) 
}

Particle.prototype = {
  init: function(x, y, radius) {
    this.alive = true
    this.radius = radius || 7.5
    this.wander = 0.15
    this.theta = random(TWO_PI) 
    this.drag = 0.92
    this.color = '#FFF'
    this.x = x || 0.0
    this.y = y || 0.0 
    this.vx = 0.0
    this.vy = 0.0
  },
  move: function() {
    this.x += this.vx
    this.y += this.vy
    this.vx *= this.drag
    this.vy *= this.drag
    this.theta += random(-0.5, 0.5) * this.wander 
    this.vx += sin(this.theta) * 0.1
    this.vy += cos(this.theta) * 0.1
    this.radius *= 0.96
    this.alive = this.radius > 0.5
  },
  draw: function(ctx) {
    ctx.beginPath() 
    ctx.arc(this.x, this.y, this.radius, 0, TWO_PI)
    ctx.fillStyle = this.color
    ctx.fill()
  }
}
var MAX_PARTICLES = 200
var COLOURS = ['yellow', '#A7DBD8', '#E0E4CC', '#F38630', 'red', '#FF4E50', 'dodgerblue'] 
var particles = []
var pool = []
var demo = Sketch.create({
  container: document.getElementById('container')
})
demo.setup = function() {
  var i, x, y 
  for (i = 0 ; i < 20; i++) {
    x = (demo.width * 0.5) + random(-100, 100);
    y = (demo.height * 0.5) + random(-100, 100);
    demo.spawn(x, y)
  }
}
demo.spawn = function(x, y) {
  if (particles.length >= MAX_PARTICLES)
    pool.push(particles.shift())
  particle = pool.length ? pool.pop() : new Particle()
  particle.init(x, y, random(5, 40))
  particle.wander = random(0.5, 1.50)
  particle.color = random(COLOURS)
  particle.drag = random(0.9, 1)
  theta = random(TWO_PI)
  force = random(2, 8)
  particle.vx = sin(theta) * force
  particle.vy = cos(theta) * force
  particles.push(particle)
}

demo.update = function() {
  var i, particle
  for (i = particles.length - 1; i >= 0; i--) {
    particle = particles[i]
    if (particle.alive) particle.move()
    else pool.push(particles.splice(i, 1)[0])
  }
}

demo.draw = function() {
  demo.globalCompositeOperation = 'lighter'
  for (var i = particles.length - 1; i >= 0; i--){
    particles[i].draw(demo)
  }
}
demo.mousemove = function() {
  var particle, theta, force, touch, max, i, j, n
  for (i = 0, n = demo.touches.length; i < n ; i++) {
    touch = demo.touches[i], max = random(1, 4)
    for (j = 0; j < max; j++) demo.spawn(touch.x, touch.y)
  }
}
  </script>
</body>
</html>

OUTPUT - 

     

                                                            After running the code




                                                                    With the mouse pointer




    So, try to done with this code And Follow codoblog.

     

💙💚💛💜💓




                                                                                                       #Love CodoBlog  








Labels:

Comments

Post a Comment

The Most Populer

Android Logo Design

                    Android Logo Design By Html-Css                                                                                 Here is the code for designing the logo of Android. Design the logo by using programming language like Html and Css. You can simply design the logo, just small code for it. Don't hasitate and start to write it.. CODE :                 <!DOCTYPE html> <html> <head> <title>Android logo</title> <link href="https://fonts.googleapis.com/css2?family=Piedra&display=swap" rel="stylesheet"> <style type="text/css"> body{ background-color: black; } h4{ text-alig...
Post a Comment
Read more

The Bubble Perspective

  The Bubble Perspective By CodoBlog                           Here is the bubble perspective video by codoblog. By using the HTML-CSS-JavaScript           we developed a code. In this code you you will teach how to design the animation in the                  canvas like bubbles flowing. Try out this code and explore your knowledge.         CODE -                    <html> <head> <meta charset="utf-8"> <style type="text/css"> body{ margin: 0; padding: 0; background-color: #000; } </style> <script type="text/javascript"> let c,ctx,w,h let frameTime=0,prevTime=null let redrawElapsed=0 let animationScale=2 let redrawDuration = 5 let newCircleDuration = 0 let dots=[] ...
Post a Comment
Read more

The Sticky Flag Animation

The Sticky Flag Animation with Hover Effect               Here is the new animation of the sticky like flag. When the mouse is close or on the object, the flag flip and flop with hover effect and display the text in it.     Try once the code and stay loving codoblog...Happy here.     CODE -             <html> <head>       <style type="text/css">       .animation{       transition:all 750ms ease-in-out;       }       #Awesome{       position: relative;       width: 180px;       height: 180px;       margin:  0 auto;       backface-visibility:hidden;       }       #Awesome .sticky{       transform:rotate(45deg);       }       ...
Post a Comment
Read more