Пример:
Выбрать другую фотографию для примера:
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
🙂 надеюсь не совсем Вас достал… но, ещё вопрос, в какой строчке кода покопаться, чтобы флаг можно было бы адаптировать под экран смартфона. Так-то он адаптируется, но на смартфоне флаг превращается в квадрат.
Сейчас проверил, флаг не превращается в квадрат, нормально колышется 🙂
Либо смартфон поменять (старые версии может что то не поддерживают), либо свои коды, которые что то обрезают или ломают.
Alexander, огромное Тебе спасибо! Искал возможность Тебя отблагодарить рублём, но геополитические препятствия не дают такой возможности из Европы, к сожалению. 🙁
Как только ситуация изменится, я про тебя не забуду!!!
У меня всё получилось и всё работает отлично! Если не сочтешь за наглость, то можно я задам ещё пару вопросов:
1. Есть ли возможность этот флаг засунуть в div или ещё куда, где можно его будет перемещать по телу html и менять его размер?
2. Если да, можешь подсказать как это сделать?
Очень надо, чтобы флаги можно было бы засунуть в 3D карусель ( тоже с твоего ресурса)...
Перемещать и менять размер можно, а вот несколько флагов на странице, это нужно скрипт менять.
По поводу перемещения и т.д., он и так в диве [b]canvas-wrap[/b]
Нужно добавить к этому классу анимацию, например:
[code]animation: move 10s 0s infinite;[/code]
И стили самой анимации, например:
[code]@keyframes move {
0% {
transform: translateX(0) translateY(0) scale(1);
}
25% {
transform: translateX(100px) translateY(20px) scale(0.90);
}
50% {
transform: translateX(-20px) translateY(-50px) scale(0.95);
}
75% {
transform: translateX(80px) translateY(40px) scale(0.88);
}
100% {
transform: translateX(0) translateY(0) scale(1);
}
} [/code]
Alexandr, приветствую! а есть ли возможность к этому флагу подключить линк ведущий, скажем на лендинг?
Пробую в разных вариантах, но нет перехода при клике. 🙁 </div>
<div class="canvas-wrap">
<div id="canvas"></div>
<div class="plane"> <a href="https://mywebsite.eu">
<img src="https://my.png" crossorigin="anonymous" />
</a></div>. .plane {
max-width: 100%;
height: 425pt;
cursor: pointer;
}
Вы на всю конструкцию поставьте ссылку, а не внутрь.
Картинку, которую вы обернули, она скрытая и нужна для скрипта
Но, пока не разобрался, как подключить библиотеку... 🙁
Вот я балда, в одном из других блоков(на этом сайте) написал коммент, что не могу найти именно вот ЭТО - развивающийся флаг!!! А ОН ВОТ ПРЯМ ТУТ!
Как обычный файл со скриптом
[code]<script src="file.js"></script>[/code]
У меня полная борода с библиотекой, не пойму как и куда её засунуть. 🙂 с flag.js всё предельно ясно, а вот curtains.min.js меня вогнал в ступор. Вставлять просто сам линк? Куда? Или всю ту бороду (куда ведёт этот линк), в общем, запутался по самое не хочу. Я с такими библиотеками ещё не работал, не пойму, как и куда её подключать. 🙁
Библиотека это название 🙂 он же фреймворк и он же обычный скрипт.
Скачиваете файл себе, подключаете ее на странице (в подвале) как обычный скрипт и ниже скрипт для флага
Спасибо, Alexandr! Буду пробовать. Меня вчера смутило то, что «библиотека» скачалась как текстовый файл html, открыл, а там борода из текста, как «Вона и Мир».
Ещё раз, спасибо, что помогаете и коммуницируете с «глупыми чайниками» 🙂
Вместо флага у меня черное фото. И в консоли показывает какую-то ошибку о том что нельзя загрузить фото. В чем может быть проблема?
Локально тестируете или на сервере?
Если первое, то попробуйте залить все на хостинг и посмотреть там.
Если второе, то должно бы работать...
Помогите, не работает у меня ((( вставила код html, заменила картинку на свою, вставила css, может не правильно подключила скрипт и библиотеку, подскажите пожалуйста пошагово как сделать. Спасибо
И девушка из под воды пристально смотрит на тебя не моргая! Жуть!
:)))))
Даже не думал об этом. Просто хотелось показать вариант с фотографией, а тут и девушка симпатишная.
интересно