📜 ⬆️ ⬇️

Bubble Engine - plugin for jQuery. Bubble machine

I want to present to readers an interesting jQuery plugin that will be interesting to those who want to use some interesting animation on the site without using Adobe Flash.

image


It is possible to set the following parameters


Minimum generated bubble size
Maximum generated bubble size
Initial position of the generated bubble
Particle flight control (centered, left, right)
Bubble lifetime (animation duration)
Dispersion of bubble lifetime (animation duration)
X-axis and Y-axis scatter
Bubble thickness
Bubble Recovery (enable / disable)
')

Easy integration into your website


The code for simply inserting this plugin into your website:
$(document).ready(function(){
var SoapBubbleSource = $().BubbleEngine({ particleSourceX: 0, particleSourceY: 500});
SoapBubbleSource.addBubbles (50);));


The code for inserting this plugin into your site with the assignment of various parameters:
$(document).ready(function() {var SoapBubbleSource = $().BubbleEngine({ particleSizeMin: 0, particleSizeMax: 60, particleSourceX: 0, particleSourceY: 500, particleAnimationDuration: 3000, particleAnimationVariance: 2000, particleScatteringX: 500, particleScatteringY: 200, particleDirection: 'right', gravity: -100, imgSource: 'images/bubble.png', RenewBubbles: 'on' });
SoapBubbleSource.addBubbles(50); });


The compatibility with the following browsers has been tested: Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Mozilla Firefox 3, Google Chrome 4, Apple Safari 5, Opera 10.

Download: Bubble Engine

Demonstration




PS I warn on weak machines possible noticeable brakes!

Source: https://habr.com/ru/post/99640/


All Articles