Cloud47
@Cloud47
Frontend, javascript, HTML, CSS

Как реализовать анимацию сужения блока?

Здравствуйте, коллеги! Какие ваши предложения по выполнению следующей задачи:
тут gif-ка нажимаете сверху справа на три точки - открыть оригинал
Есть 1 экран сайта,
608c41ec02989210877189.png
с которого мы скроллим вниз до 2го экрана и подчеркнутого маркером элемента внутри него.
608c426205bab600550638.jpeg
Дальнейший скролл вниз активирует анимацию, якобы сужения белого фона 2го экрана со всех сторон по направлению к белой карточке в картинке снизу.
608c433509b2b526641168.png
А вот как выглядел бы второй экран по дефолту, если отключить анимацию
608cd69c27423838566891.png
С моментом активации анимации все более менее понятно. Вопрос в том, как грамотно организовать верстку и скрипты, чтобы белый фон как по вертикали, так и по горизонтали одномоментно достигал краев карточки, ведь расстояние от боков карточки до боков экрана может отличаться от расстояния от верхушки и низа карточки до стыков соседних верхних
и нижних блоков. Надеюсь объяснил более менее популярно.
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
RAX7
@RAX7
расстояние от боков карточки до боков экрана может отличаться

Если карточка лежит в контейнере-центровщике, то расстояние до краев вьюпорта можно посчитать как 50vw - 50%. В этом случае нужно еще учесть ширину скроллбара, которую придется определять в js.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы