Пример:
HTML:
|
1 2 3 4 5 6 |
<div class="canvas-wrap"> <div id="canvas"></div> <div class="plane"> <img data-sampler="dispImage" src="rain.jpg" crossorigin="anonymous" /> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.canvas-wrap { position: relative; } #canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .plane { width: 100%; height: 500px; } .plane img { display: none; } |
JS:
Подключаем библиотеку curtains.min.js и скрипт самого дождика rain.js
Я немного изменил скрипт для демо - убрал с фотографии блюр и увеличил капли, т.к. фото изначально нечеткое и размещено не во всю ширину страницы. Скачать скрипт из примера можно тут
Найдено на codepen.io у пользователя Alain
Фотография SuicideArtist
Библиотека curtains.js на github
У меня тоже черным квадратом отображалось.
Причину не выявил, но помог вот такой костыль
.plane img {
opacity: 0 !important;
}
important - не обязателен, у меня он чтобы перебить другой скрипт, отвечающий за подгрузку картинок по мере промотки и тоже работающий с прозрачностью.
Живой пример тут
https://mehanika-sopromat.ru/book/2_capitan_bez_korablya.html
не пашет на мобилке
а у меня пашет 🙂
У меня просто черный квадрат(
Тестируете локально или на сервере?
Локально может не работать.
Или на этой странице не работает на мобильном?
Heavy Rain