Как задать фиксированный отступ bottom: 50px не от границы блока, а то границы viewport'а, если блок больше чем viewport?

Question

[Andrey Dontsov]

Привет
Подскажите пожалуйста
Есть адаптивный блок с анимацией, который занимает 100% ширины экрана, пропорции блока при этом не меняются (а жаль, см. вопрос 2), т.е. высота подстраивается под ширину, и если (например на широкоформатных мониторах) при определенной ширине высота не помещается на экран, изображение скролится вниз. Посмотреть можно тут honey31.esy.es

Вопрос 1 - как разместить элемент, например, кнопку, чтобы у нее был фиксированный отступ снизу в 50рх не от границы блока, а от границы viewport'а? При этом не был position: fixed, 50рх от вьюпорта только на главном экране, не на всем сайте.

Вопрос 2 - анимация сделана в программе Edge Animate. Можно ли как-то переписать стили управления всего блока анимации так, чтобы он оставался адаптивным, но при этом можно было бы управлять им как обычным background'ом, а именно задавать свойство background-size: cover, чтобы он масштабировался под любой viewport и не выходил за его пределы? Еще раз ссылка honey31.esy.es
Спасибо

Comments

[Пашенька]

codepen.io/like-a-boss/pen/jbEWgP набросал пример анимации. Только там на препроцессорах, но можно посмотреть скомпиленый код

Answer 1

[Пашенька]

У вас там всеми размерами жиэс заправляет.
Адаптируем имг. codepen.io/like-a-boss/pen/NGPPjo
Анимация. Теория. Пишем одну анимацию секунд на 10 с парой тройкой перемещений (ищем по ключам: @keyframes transform: translateX TranslateY), даём каждому элементу и делаем ей разные делэи.

Comments

[Andrey Dontsov]

Спасибо за ответ! Да, там JS управляет всем. Ваш пример на codepen работает, но не в моем случае)

Проблема в том, что js управляет адаптивностью сохраняя точные пропорции фонового изображения, а точнее сказать сцены (фоновая картинка с анимацией иконок - это одна общая сцена) т.е. выбрать можно только одно, растягивать сцену по ширине вьюпорта или по высоте вьюпорта.

Допустим выбираю по ширине ( живой пример тут honey31.esy.es ) - тогда по высоте изображение не помещается в 100vh на широкоформатном мониторе и нижний край сцены уходит в скролл.

Если выбрать "масштабировать по высоте" - изображение занимает 100vh, как бы все здорово, но по краям на широкоформатных появляются белые полосы, т.е. не масштабируется в width 100%.

В общем основная проблема в том, что сцена (bg + анимация иконок) всегда сохраняет пропорции 1200х720.
В вопросе я имел ввиду, как бы сделать так, чтобы сценой можно было управлять как обычным background? Если background'у задать свойство cover - картинка всегда вписывается в любой формат, квадратный экран, широкоформатный, когда "background-size: cover" без разницы.

Можно ли как то в моем случае задать сцене свойство cover? Чтобы сцена подстраивалась под любой формат экрана.
В моем примере сцене заданы классы class="Stage_bg bg"

Задача походу сложная, кроме вас никто и не решился вообще ответить
В любом случае - Спасибо вам)
Кстати, понемногу пишу сайт дальше, можно живой пример и проблемы с главным экраном посмотреть тут honey31.esy.es

[Пашенька]

AndreyBLG: Да, переписываете всё на html/css. Стелите бекграунд с background-size: cover и внутри него абсолютно позиционируете контейнер с анимацией, текстом и кнопкой