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

Question

Ellerow @Ellerow

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

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

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

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

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

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

Подписаться 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 - нормальное решение. Если используете, то заверните ваши трансформируемые блоки в отдельный элемент, ограниченный вьюпортом.
Написано более трёх лет назад

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

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

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

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 2 часа назад
- 19 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 13 часов назад
- 76 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 71 просмотр
0

ответов
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 78 просмотров
2

ответа
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 992 просмотра
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 51 просмотр
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 83 просмотра
2

ответа
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 31 просмотр
1

ответ
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 96 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

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

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

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

Аппликация для фильтра заказов

22 дек. 2024, в 20:40

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

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.

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

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

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

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