Элемент автоматического масштабирования, чтобы соответствовать области просмотра, когда не виден на 100% - PullRequest
Новая
       42

Элемент автоматического масштабирования, чтобы соответствовать области просмотра, когда не виден на 100%

0 голосов
/ 27 марта 2020

Моя цель состоит в том, чтобы автоматически масштабировать элемент пропорционально - он виден примерно на 40% в окне просмотра (снизу) - с transform: scale(scaleFactor), чтобы соответствовать области просмотра, основываясь на текущем окне просмотра width и height.

Мой код выглядит примерно так: 

<div class="wrapper relative">
   <figure id="scaleContainer">
      <img id="hardware" class="absolute block" src="path/to/image.jpg">
      <img id="screen" class="absolute block" src="path/to/image.jpg">
    </figure>
</div>

Так как же я могу вычислить scaleFactor и transformOrigin для масштабирования изображения на экране в соответствии с текущим окном просмотра?

Справочная информация: у меня есть анимация на основе прокрутки, похожая на Веб-сайт Apple Catalina . Анимация выглядит так же со мной. Единственный вопрос: как я могу вычислить scaleFactor и transformOrigin динамически, чтобы мое изображение на экране было центрировано и покрывало весь экран в начале.

моя линия gsap.timeline выглядит следующим образом: 

let timeline = gsap.timeline({ paused:true });
timeline.fromTo('#scaleContainer', {scale: scaleFactor}, {scale: 1});

Примечание. Я хочу вычислить transformOrigin для y-axis, поскольку тег рисунка не центрируется в области просмотра, поэтому transform-origin: center или transform-origin: 50% 50% не будут работать.

Как мне лучше всего это решить? Спасибо за ваши ответы и ваши идеи

...