YUI().use('node', 'anim', 'anim-node-plugin', function(Y) { var o = Y.one('#o'), oW = o.get('offsetWidth'), oH = o.get('offsetHeight'), max = 12, min = 4, bubbles = 20, timerDelay = 4000; function makeBubble() { var b = Y.Node.create('<span class="bubble"></span>'); b.plug(Y.Plugin.NodeFX, { duration: 7, easing: Y.Easing.easeOut, to: { top: 0, opacity: 0 }, on: { end: function() { Y.later(10000, this, function(){ animBubble(this.get('node')); }); } } }); o.append(b); animBubble(b); } function animBubble(b) { var v = Math.floor(Math.random() * (max - min)) + min; b.setStyles({ height: v + 'px', width: v + 'px', borderRadius: v + 'px', top: (oH + 2) + 'px', opacity: 1 }); b.setStyle('left', Math.floor(Math.random() * (oW - v))); b.fx.set('duration', Math.floor(Math.random() * 2 + 3)); b.fx.set('to.top', Math.floor(Math.random() * (oH / 2))); b.fx.run(); } for (i = 0; i < bubbles; i++) { Y.later(Math.random() * timerDelay, this, function() { makeBubble(); }); } });
<div id="o"></div>
#o { width: 200px; height: 400px; position: relative; border-bottom: 1px solid blue;} .bubble { border: 1px solid #f40009; display: block; position: absolute; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; }