We are giving you webpage mouse hover particles animation demo usign sketch jquery. this animation is also like bubble. particle background usign jquery. when you hover on div or webpage then you can show nice animation. this is support all the browser.

you can get code of particle background usign jquery snippet. we give you example of particle animation javascript , you can simple copy bellow code and use in your project. If it free snippets of particles js background So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code particle js tutorial snippets, click on JS Code tab get code of jquery codd for particle js tutorial snippets, same as for CSS Code tab. It's pretty easy and simple example of jquery background animation effects snippet.


<!doctype html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div id="hover"></div> <script src="https://cdn.jsdelivr.net/npm/sketch-js@1.1.3/js/sketch.js"></script> </body> </html>
body { background:#000; overflow: hidden; }
function Particle( x, y, radius ) { this.init( x, y, radius ); } Particle.prototype = { init: function( x, y, radius ) { this.alive = true; this.radius = radius || 10; 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 = 280; var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ]; var particles = []; var pool = []; var demo = Sketch.create({ hover: document.getElementById( 'hover' ), retina: 'auto' }); 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 ) { var particle, theta, force; 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, 2.0 ); particle.color = random( COLOURS ); particle.drag = random( 0.9, 0.99 ); 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 ); } } };

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Related Post

Register and login form page design with animation using bootstrap

Register and login form page design with animation using boo...

you can get free ragister and login form page design free. register and login fo...

Read More
Pricing table with hover effect using bootstrap example

Pricing table with hover effect using bootstrap example

Nice snippets provide free pricing table code. Bootstrap responsive package pric...

Read More
Signin and signup form page design with animation using bootstrap

Signin and signup form page design with animation using boot...

you can get free sigin and signup form page design free. signup and sigin form d...

Read More

Random Post