bubble

bublle

by manu v

HTML

<html>
  
  <body>
    <div class="mytext">Lorem Ipsum</div>
    <div class="bubble1"></div>
  </body>

</html>

CSS

.bubble1 {
  border-radius: 100px;
  height: 100px;
  width: 100px;
  position: absolute;
  top:50px;  
  left: 50%;
  background: orange;
}

JavaScript

jQuery('document').ready(function () {
  jQuery('.mytext').hide();
    
  jQuery('.bubble1').on('click', function () {
    jQuery(this).stop(true,true).hide('explode', { pieces: 128 } , 1000, function() { jQuery('.mytext').show(); } );
  });
    
  var bubbleWidth = jQuery('.bubble1').width();
  var bubbleHeight = jQuery('.bubble1').height();
    
  var Bubbling =  {
        init: function() {
            var widthDifference = bubbleWidth/100*10;
            var heightDifference = bubbleHeight/100*10;

            var intervalTime = 901;
            var infiniteLoop = setInterval(function() {
              jQuery('.bubble1').animate( {
                width: '+='+widthDifference,
                height: '+='+heightDifference,
                left: '-='+widthDifference,
                top: '-='+heightDifference, }, { duration: 450 } );
              jQuery('.bubble1').animate( {
                width: '-='+widthDifference,
                height: '-='+heightDifference,
                left: '+='+widthDifference,
                top: '+='+heightDifference, }, { duration: 450 } );
            }, intervalTime);
        }
  };
  
  
  Bubbling.init();
  
  var bezier_params = {
    start: {
      x: jQuery('.bubble1').offset().left-(bubbleWidth/2),
      y: jQuery('.bubble1').offset().top,
    },
    end: {
      x: jQuery('.bubble1').offset().left-(bubbleWidth/2),
      y: 100,
    }
  }

  jQuery('.bubble1').animate({path: new jQuery.path.bezier(bezier_params)}, { duration: 2000 } );  
 });