Javascript - пульсации воды эффект

Question

мне нужен скрипт на JS, который изменит изображения/HTML в этом стиле "рябь воды":

http://fcunited.ru/_temp/listening2.gif

Любой Lib (извините, 6MB GIF файлов!)? Я нашел это только: http://code.almeros.com/code-examples/water-effect-canvas/#.T1DPAXmuG_R

Но это не совсем то, что мне нужно.

Answer 1

Если HTML5 является вариантом (заменить изображение с холстом загружающего изображения), вы можете быть в состоянии извлечь этот эффект из демки и настроить эффект в размере и позициях (исходный код включен):

http://js1k.com/2010-first/demo/131

Answer 2

.paperButton { 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    position: relative; 
    overflow: hidden; 
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease; 
    transition: all 0.2s ease; 
    z-index: 0; 
    cursor:pointer; 
} 
.animate { 
    -webkit-animation: ripple 0.65s linear; 
    -moz-animation: ripple 0.65s linear; 
    -ms-animation: ripple 0.65s linear; 
    -o-animation: ripple 0.65s linear; 
    animation: ripple 0.65s linear; 
} 
@-webkit-keyframes 
ripple { 100% { 
opacity: 0; 
-webkit-transform: scale(2.5); 
} 
} 
@-moz-keyframes 
ripple { 100% { 
opacity: 0; 
-moz-transform: scale(2.5); 
} 
} 
@-o-keyframes 
ripple { 100% { 
opacity: 0; 
-o-transform: scale(2.5); 
} 
} 
@keyframes 
ripple { 100% { 
opacity: 0; 
transform: scale(2.5); 
} 
} 


$(function(){ 
    var ink, i, j, k; 
    $(".paperButton").mousedown(function(e){  
      if($(this).find(".ink").length === 0){ 
       $(this).prepend("<span class='ink'></span>"); 
      } 

      ink = $(this).find(".ink"); 
      ink.removeClass("animate"); 

      if(!ink.height() && !ink.width()){ 
       i = Math.max($(this).outerWidth(), $(this).outerHeight()); 
       ink.css({height: i, width: i}); 
      } 

      j = e.pageX - $(this).offset().left - ink.width()/2; 
      k = e.pageY - $(this).offset().top - ink.height()/2; 

      ink.css({top: k+'px', left: j+'px'}).addClass("animate"); 

}); 
});