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

2 января 2015 Антон Кулешов 3762 6

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

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

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

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

ti1schweiger 5 января 2015

Демо не работает!

Антон Кулешов 5 января 2015

Скорей всего ваш браузер не поддерживает работу с canvas, попробуйте обновить его или зайти с другого браузера.

vadim 5 января 2015

А у меня все работает, спасибо!

alex-zzx 26 января 2015

Класный эффект.
Правда в опере 24 не работает и в мозилах старых тоже(((

alex-zzx 26 января 2015

Ошибся - в 26 опере не работает(

Антон Кулешов 26 января 2015

Этот эффект работает в современных браузерах, которые поддерживают работу с canvas.

Читайте далее

Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали

25 февраля 2015 Антон Кулешов

Алоха! Всем счастья и добра, ну а сегодня наша тема – увеличение картинки (изображения) при клике мышью. Причем, не только простое зумирование, но и его динамическая проработка.

Набор из 14 вкладок HTML

5 февраля 2016 Антон Кулешов

Сегодня я расшарил набор из 14 видов различного дизайна вкладок на HTML, все их можно и нужно посмотреть в материалах демо. Вкладки написаны при помощи CSS3 и с незначительным использованием JavaScript. Прикрепляем файл со стилями и скриптом к себе в проект или просто выдираем нужные куски копипастом.

Эффект лупы при помощи jQuery плагина

25 сентября 2014 Антон Кулешов

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