Эффект дождя на стекле

Скрипт, реализующий данную анимацию, работает на библиотеке curtains.js

Пример:

HTML:

CSS:

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

    Ответить
  • test:

    не пашет на мобилке

    Ответить
    • Alexander:

      а у меня пашет 🙂

      Ответить
      • test:

        У меня просто черный квадрат(

        Ответить
      • Alexander:

        Тестируете локально или на сервере?
        Локально может не работать.

        Или на этой странице не работает на мобильном?

        Ответить