Показать Меню
falbar Эффект дождя на Javascript

Эффект дождя на Javascript

Эффект дождя на Javascript

Красивый эффект капель, собравшихся с обратной стороны монитора, как за стеклом окна от легкого весеннего дождя, можно очень легко добавить к себе на сайт, если воспользоваться специальной javascript библиотекой. В этой статье я расскажу про одну из таких.

Предварительно перебрав несколько вариантов javascript библиотек, я остановился на rainyday. Так как данная библиотека позволяет создать очень реалистичную картинку капель дождя на мониторе, а самое главное – её малое потребление вычислительных мощностей. Поэтому, даже пользователи с «не очень» производительным железом, смогут насладиться плавной и приятной глазу картиной дождя.

Капли на стекле

Библиотека использует возможности HTML5, а именно динамическую отрисовку капель дождя на элементе canvas. Чтобы увидеть пример работы её, предлагаю перейти по этой ссылке – rainyday.js. Там Вы найдёте четыре варианта имитации поведения капель дождя на стекле. Вам останется только скачать скрипт и установить к себе на сайт «дождь». Установка плагина довольно простая и не вызовет затруднения. Исходники Вы найдёте на rainyday.js или скачайте архив с примером с этой страницы.

Вот такой красивый эффект дождя можно добавить к себе на сайт воспользовавшись javascript библиотекой rainyday.

Источник
github.com

Подписаться на обновления

ti1schweiger
ti1schweiger 5 января 2015 в 07:58
Демо не работает!
Ответить
Антон Кулешов
Антон Кулешов 5 января 2015 в 19:17
Скорей всего Ваш браузер не поддерживает работу с canvas, попробуйте обновить его или зайти с другого браузера.
Ответить
vadim
vadim 5 января 2015 в 19:51
А у меня все работает, спасибо!
Ответить
alex-zzx
alex-zzx 26 января 2015 в 19:17
Класный эффект.
Правда в опере 24 не работает и в мозилах старых тоже(((
Ответить
alex-zzx
alex-zzx 26 января 2015 в 19:20
Ошибся - в 26 опере не работает(
Ответить
Антон Кулешов
Антон Кулешов 26 января 2015 в 22:49
Этот эффект работает в современных браузерах, которые поддерживают работу с canvas.
Ответить