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

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

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

Реклама

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

kapli-na-stekle

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

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

Реклама
ti1schweiger
ti1schweiger 5 января 2015
Демо не работает!
Антон Кулешов
Антон Кулешов 5 января 2015
Скорей всего ваш браузер не поддерживает работу с canvas, попробуйте обновить его или зайти с другого браузера.
vadim
vadim 5 января 2015
А у меня все работает, спасибо!
alex-zzx
alex-zzx 26 января 2015
Класный эффект.
Правда в опере 24 не работает и в мозилах старых тоже(((
alex-zzx
alex-zzx 26 января 2015
Ошибся - в 26 опере не работает(
Антон Кулешов
Антон Кулешов 26 января 2015
Этот эффект работает в современных браузерах, которые поддерживают работу с canvas.
no_avatar
Читайте далее

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

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

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

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

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

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

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

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

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