Пример:
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
Alexander , я проанализировал , как свог вашу страницу. Есть расхождения текста с кодом . На странице идет в таком порядке :
<div class="plane"> ... </div>
<div id="canvas"></div>
а в тексте наоборот.
Но для нас, начинающих фронтендеров , выглядит подозрительно. Что на что должно накладываться, не известно 🙂
Я повторил код, как смог, но у меня опять Малевич, причину не знаю. Возможно, у меня тоже нарушен порядок?
https://seregasmyfavoritesites.on.drv.tw/Site/Test/ -- вот мой хостинг, максимально упрощен. Найдете Малевича ?
Вот ваш пример 1 в 1, только к себе его закинул.
Уж не поленились бы к себе залить и фотку и скрипты
спасибо , Александр, но я уверен, что не причина в ресурсах , которые находятся на другом сервере, а не на этом хостинге. Таких засад не встречал. Зато встречал , что на CODEPEN скрипты (некоторые) работают только у них, т.к. в коде отсутствует какой-то type="module". Думал, здесь, что то похожее.
да, вы правы. Работает только на хостинге.
У меня тоже черным квадратом отображалось.
Причину не выявил, но помог вот такой костыль
.plane img {
opacity: 0 !important;
}
important - не обязателен, у меня он чтобы перебить другой скрипт, отвечающий за подгрузку картинок по мере промотки и тоже работающий с прозрачностью.
Живой пример тут
https://mehanika-sopromat.ru/book/2_capitan_bez_korablya.html
opacity -- непрозрачность, говорите по-русски правильно )
жаль у меня тоже черный квадрат. А как получить архив со всем файлами ?
Потестируйте на хостинге, а не локально.
Забыл в этой заметке добавить алерт с этим.
не пашет на мобилке
а у меня пашет 🙂
У меня просто черный квадрат(
Тестируете локально или на сервере?
Локально может не работать.
Или на этой странице не работает на мобильном?
Heavy Rain