О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Эффект дождя на JavaScript
  • Инструменты
  • Заработок
  • Раскрутка
02 января 2015 . Антон Кулешов

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

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

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

kapli-na-stekle

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

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

#Бэкграунды и фоны
11 570 6
Антон Кулешов
Делаем видео на заднем фоне с помощью jQuery Генерация случайного цвета на JavaScript Видео на заднем фоне Слайд-шоу на заднем фоне сайта Эффект падающего снега на jQuery
ti1schweiger
ti1schweiger
05 января 2015
Демо не работает!
Антон Кулешов
Антон Кулешов
05 января 2015
Скорей всего ваш браузер не поддерживает работу с canvas, попробуйте обновить его или зайти с другого браузера.
vadim
vadim
05 января 2015
А у меня все работает, спасибо!
alex-zzx
alex-zzx
26 января 2015
Класный эффект.
Правда в опере 24 не работает и в мозилах старых тоже(((
alex-zzx
alex-zzx
26 января 2015
Ошибся - в 26 опере не работает(
Антон Кулешов
Антон Кулешов
26 января 2015
Этот эффект работает в современных браузерах, которые поддерживают работу с canvas.

Работа с API Яндекс Метрикой

Решаем проблемы с добавлением RSS ленты в Google Chrome

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание