Имитация капель дождя с помощью RainyDay.js
Больше не нужно ломать голову и писать много строчек кода для визуализации капель дождя, падающих на окно. Замечательный скрипт на JS RainyDay.js представляет из себя готовое решение анимации дождя, которое использует возможности HTML5 canvas.
Как подключить скрипт к сайту?
Создадим секцию с тегом img внутри и инициализируем скрипт, добавив идентификатор background. Далее подключим сам скрипт к странице.
<section>
<img id="background" src="" />
</section>
<script src="rainyday.min.js"></script>
Кастомизация скрипта
С помощью CSS кода растянем фоновую картинку за окном и само окно на всю ширину и высоту экрана.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
canvas{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
img{
width: 100%;
}
Пропишем в HTML файле базовый JavaScript код. Данный код можно скопировать из документации скрипта и настроить под себя. Скрипт RainyDay.js предоставляет разные параметры для настройки режима дождя и методы для обновления поведения дождя.
function rain() {
var image = document.getElementById('background');
image.onload = function () {
var rainyDay = new RainyDay({
image: this,
fps: 30,//количество кадров в секунду при обновлений холста
blur: 10, //степень размытия картинки за окном
});
rainyDay.rain([
[5, 2, 2]
], 0);
};
image.src = 'bg.jpg';//фоновая картинка за окном
}
rain();
Важно! Для работы скрипта требуется локальный сервер или веб-сервер. Без этого условия эффект не будет работать в браузере.
-
Создано 12.11.2021 10:24:45
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.