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

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

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

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

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

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

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

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

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

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

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