Как сделать элемент выходящим за все границы страницы, при этом фиксируемым и по центру?

Question

Ellerow @Ellerow

Как сделать элемент выходящим за все границы страницы, при этом фиксируемым и по центру?

Привет. Не могу понять как сделать, чтобы элемент выходил за все границы страницы, при этом был фиксируемым и при скроле с уменьшением своего размера находился всегда по центру. Первый элемент при скроле остаётся на своём месте, с ним всё просто - он фиксируется. Второй элемент должен при прокрутке масштабироваться до меньшего размера. У меня эти элементы - SVG изображения через тег img.
Уменьшение размеров при прокрутке я в принципе могу и сам сделать, но нужно чтобы элемент оставался по центру.

Красный - первый элемент
Зеленый - второй элемент.
Синий - полоса прокрутки.

После прокрутки:

Вопрос задан более трёх лет назад
282 просмотра

Комментировать

Подписаться 1 Средний Комментировать

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

6 комментариев

Максим Морев @SeaInside
Это решение кратно хуже того, что я предложил.
Во-первых: появляется ненужная обёртка.
Во-вторых: необходимо высчитывать несколько параметров, а не всего один.
В-третьих, и это самое главное - изменение transform гораздо более производительно, чем манипулирование свойствами геометрии. Если можно сделать задачу с помощью transform - всегда нужно решать именно так.
Если предложенный мной способ центровки не нравится - лучше уже сделайте

top: 50%; left: 50%; transform: translate(-50%, -50%) scale(K);
Написано более трёх лет назад
Ellerow @Ellerow Автор вопроса

Максим Морев, да, я согласен с вами.

Написано более трёх лет назад
Ellerow @Ellerow Автор вопроса

Максим Морев, Можете, пожалуйста, еще помочь с JS? Никак не могу привязать скроллинг к коэффициенту.
например чтобы при нулевой прокрутке, коэффициент был 20, а при прокрутке на 3000px - 0.3. Я так понимаю, здесь формула нужна?

Написано более трёх лет назад

Максим Морев @SeaInside

Ellerow, не тестировал, далеко от компьютера, но что-то вроде того должно работать

function calcScale(min = .3, max = 20, endScroll = 3000) {
  const scrollPart = window.scrollTop / endScroll;
  return max -scrollPart * (max - min);
}

window.addEventListener('scroll', (e) => {
  document.querySelector('.js-elem').style.transform = `scale(${calcScale()})`;
}, { passive: true, })

Написано более трёх лет назад

Ellerow @Ellerow Автор вопроса

Максим Морев, Спасибо большое! Только вместо window.scrollTop подствил document.documentElement.scrollTop, иначе не работает.
И последнее) При такой поставленной задаче, как в посте, бороться с масштабированием никак нельзя? Поскольку при изменении масштаба изменяется и размер скролла и соответственно все значения ломаются.
Мне бы только мысль направляющую, а решить я сам постараюсь)

Написано более трёх лет назад
Максим Морев @SeaInside
Ellerow, заверните это всё в дополнительный блок с overflow:hidden.
Можно прямо глобально объявить какой-нибудь

<body> <div class="global-wrapper"> // content </div> </body>

.global-wrapper { overflow: hidden; }

Если нигде не используете position:sticky - нормальное решение. Если используете, то заверните ваши трансформируемые блоки в отдельный элемент, ограниченный вьюпортом.
Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- час назад
- 54 просмотра
2

ответа
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- 3 часа назад
- 49 просмотров
0

ответов
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 4 часа назад
- 72 просмотра
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 21 час назад
- 67 просмотров
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- 22 часа назад
- 63 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как совместить JS и Django?
- 1 подписчик
- 22 часа назад
- 76 просмотров
1

ответ
JavaScript

Сложный
Как сделать горизонтальный виртуальный скролл?
- 1 подписчик
- вчера
- 57 просмотров
0

ответов
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему падает локальный сервер?
- 1 подписчик
- вчера
- 89 просмотров
0

ответов
JavaScript

Простой
Отмена дефолтного поведения?
- 1 подписчик
- вчера
- 84 просмотра
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Настройка Яндекс Директ

01 мая 2024, в 18:22

15000 руб./за проект

Сделать софт на requests (post-get запросах)

01 мая 2024, в 17:58

10000 руб./за проект

Решить проблему выгрузки заказов/загрузки на сайт из 1с

01 мая 2024, в 17:44

500 руб./за проект

Answer 1 · 2020-03-22 16:20:53

Зафиксируйте 2ой элемент по центру. Например так:

.second {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

На JS посмотрите размер блока и рассчитайте коэффициент (K), на сколько его нужно увеличить, чтобы он оказался больше размеров окна браузера. Примените коэффициент через transform: scale(K) - тем более у вас SVG, что масштабируется без потери качества.

На скролл повешайте событие, которое будет постепенно уменьшать коэффициент до единицы. Всё. :)

Answer 2 · 2020-03-22 16:42:16

Ещё один вариант решения.

#second-wrapper {
  margin-left: 50%;
}

#second {
  position: fixed;
  width: 200vw;
  margin-left: -100%;
  top: -50%;
}

И менять размер width и margin left для изменения размера. Значение margin-left должно быть (не учитывая минус) в два раза меньше значения width.

Как сделать элемент выходящим за все границы страницы, при этом фиксируемым и по центру?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт