Пример:
Выбрать другую фотографию для примера:
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
Александр! Всё работает. Спасибо! Но на компах со встроенной видеокартой и смартфонах картинка не двигается. Тяжеловато для них.
...пробую вставлять этот флаг в Вордпресс - значение canvas калькулируется всё время 0. Отдельно сделал тестовый сайт с обрезкой и растяжкой. Если я использую внутренние стили, непосредственно в элементах html, то содержимое правильно работает на любом разрешении экрана и значение canvas в div id="canvas" калькулируется правильно (Пример вот тут: https://school75-62.ru/flag/flag.html), если я создаю таблицу стилей в теге head, то высоту для своего монитора я должен указать в div class="plane" (у меня монитор с разрешением 2К) иначе не получается растянуть на весь экран (вот тут пример: https://school75-62.ru/flag/flag-full.html). НО!!! Если я делаю отдельный CSS файл, то у меня вообще не получается ничего растянуть по высоте. А при встраивании кода в тему сайта на вордпресс canvas всегда калькулирует нулевую высоту. Просто колдовство какое-то. Я несколько фонов с Вашего сайта встраивал в проекты на Вордпресс вообще без проблем, а вот на этом флаге что-то пошло не так. Скорее всего не хватает знаний. Может у Вас будет какая-то подсказка?
У вас на правильном примере
[code]<div class="plane" style="width: 100%; height: 100%;">[/code]
на другом, где он вылазиет
[code].plane {
width: 100%;
height: 1500px;
}[/code]
Разная высота
Плюс можно еще упростить код, вот [url="https://atuin.ru/test/flag.html"]пример[/url]
Саша, я не сомневался в Вашей гениальности!
С этим кодом я неделю мучался, а у Вас прям волшебно просто! Огромное спасибо!
По поводу разной высоты во втором случае - я как не мучался, если я ставил высоту 100% то высота canvas тут же калькулируется в ноль (к сожалению в инспекторе это нельзя проверить), вот и пришлось ставить конкретное значение. Почему так - для меня это до сих пор вопрос.
Ещё раз огромное Вам спасибо за Вашу щедрость, с которой Вы раздаёте свои волшебные знания и умения!
Результат получился вот на этом эскизе http://test1.starscenter.ru/
Ещё раз большое спасибо!
Класс [b]page[/b] можно удалить (он для полупрозрачной страницы), он у вас не используется
Ниже можно добавить:
[code]@media screen and (max-width: 1199px) {
.canvas-wrap {
height: 350px; //высота для узких экранов
}
}[/code]
Спасибо, учту.
🙂 надеюсь не совсем Вас достал… но, ещё вопрос, в какой строчке кода покопаться, чтобы флаг можно было бы адаптировать под экран смартфона. Так-то он адаптируется, но на смартфоне флаг превращается в квадрат.
Сейчас проверил, флаг не превращается в квадрат, нормально колышется 🙂
Либо смартфон поменять (старые версии может что то не поддерживают), либо свои коды, которые что то обрезают или ломают.
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, может не правильно подключила скрипт и библиотеку, подскажите пожалуйста пошагово как сделать. Спасибо
И девушка из под воды пристально смотрит на тебя не моргая! Жуть!
:)))))
Даже не думал об этом. Просто хотелось показать вариант с фотографией, а тут и девушка симпатишная.
интересно