Рубрика «озеро»

Стал известен скрипт 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;"/>

Читать полностью »