Пример:

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








HTML:
1 2 3 4 5 6 |
<div class="canvas-wrap"> <div id="canvas"></div> <div class="plane"> <img src="photo.jpg" crossorigin="anonymous" /> </div> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.canvas-wrap { position: relative; padding: 30px; } #canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .plane { width: 100%; height: 500px; } .plane img { display: none; } |
JS:
Подключаем библиотеку curtains.min.js и скрипт самого эффекта flag.js
Найдено на codepen.io у пользователя Martin Laxenaire
Библиотека curtains.js на github
Вместо флага у меня черное фото. И в консоли показывает какую-то ошибку о том что нельзя загрузить фото. В чем может быть проблема?
Локально тестируете или на сервере?
Если первое, то попробуйте залить все на хостинг и посмотреть там.
Если второе, то должно бы работать...
Помогите, не работает у меня ((( вставила код html, заменила картинку на свою, вставила css, может не правильно подключила скрипт и библиотеку, подскажите пожалуйста пошагово как сделать. Спасибо
И девушка из под воды пристально смотрит на тебя не моргая! Жуть!
:)))))
Даже не думал об этом. Просто хотелось показать вариант с фотографией, а тут и девушка симпатишная.
интересно