Развевающийся флаг на JS

Данный скрипт колышет как на ветру любое изображение, но наиболее подходит к флагам.

Реализуется эта анимация на библиотеке curtains.js

Пример:

Выбрать другую фотографию для примера:

HTML:

CSS:

JS:

Подключаем библиотеку curtains.min.js и скрипт самого эффекта flag.js


Найдено на codepen.io у пользователя Martin Laxenaire
Библиотека curtains.js на github

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Дмитрий:

    Вместо флага у меня черное фото. И в консоли показывает какую-то ошибку о том что нельзя загрузить фото. В чем может быть проблема?

    Ответить
    • Alexander:

      Локально тестируете или на сервере?
      Если первое, то попробуйте залить все на хостинг и посмотреть там.
      Если второе, то должно бы работать…

      Ответить
  • Виктория:

    Помогите, не работает у меня ((( вставила код html, заменила картинку на свою, вставила css, может не правильно подключила скрипт и библиотеку, подскажите пожалуйста пошагово как сделать. Спасибо

    Ответить
  • Игорь:

    И девушка из под воды пристально смотрит на тебя не моргая! Жуть!

    Ответить
    • Alexander:

      :)))))
      Даже не думал об этом. Просто хотелось показать вариант с фотографией, а тут и девушка симпатишная.

      Ответить