[скриншот]Стал известен скрипт lake.js — плагин jQuery, который берёт иллюстрацию (элемент <img>) и помещает её на холст (вставляет элемент <canvas>), располагая сразу под нею зеркальное отражение, идущее волнами — будто в воде озера.

Речь идёт не о застывших волнах, а об идущих по воде волнах — их фаза динамически изменяется джаваскриптом. (Понятно, что на Хабрахабре этот эффект не воспроизводим, так что я вставляю статический скриншот.)

Холст имеет ту же ширину, что и обрабатываемая иллюстрация, и вдвое бóльшую высоту.

Вызов плагина выглядит сравнительно просто и самоочевидно:

<script src="jquery.js"></script>
<script src="lake.js"></script>
<script>
$(function() {
   $('#lake-img').lake({
      'speed': 1,
      'scale': 0.5,
      'waves': 10
   });
});
</script>
...
<img id="lake-img" src="lake.png" style="display: none;"/>

Параметры имеют вот какой смысл:

  • speed — скорость движения волн;
     
  • scale — высота горба (амплитуда) волн;
     
  • waves — число волн.

Кадры анимации составляются в начале действия скрипта, так что после первоначальной загрузки страницы (когда $(…) сработает) может наблюдаться подтормаживание. Автор lake.js утверждает, что на большинстве устройств скрипт работает сносно.