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

2 января 2015 Антон Кулешов 3760 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.

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

Делаем видео на заднем фоне с помощью jQuery

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

Наверняка вы видели сайты, на заднем фоне которых проигрывалось видео. В этой статье мы рассмотрим один из способов, как применить такой эффект в своих проектах.

Всплывающие подсказки на CSS

28 декабря 2015 Антон Кулешов

После вынужденного отсутствия я вернулся к привычному распорядку дня и сегодня продолжу пополнять коллекцию falbar новыми решениями. Тема статьи не раз уже рассматривалась на сайте – всплывающие подсказки, но библиотека, о которой пойдет речь, возможно, наилучшим образом подойдет для вашего проекта, так как не использует сторонних скриптов, написанных на JavaScipt или jQuery, а только HTML и CSS.

Как определить пользователя, зашедшего с телефона

3 октября 2014 Антон Кулешов

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