Изображение возвращается к исходному значению масштаба при перемещении

Question

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

@media (max-width: 1560px) {
   img {
     transform: scale(2);
   }
}

onScroll() {
   image.style.transform = `translateY(${window.pageYoffset * 0.7})`;
}

Answer 1

Из-за каскадного характера CSS, если вы повторно примените объявление преобразования, будут применены только последние изменения. Следовательно, вам необходимо снова выполнить trnasform после перевода, чтобы применить последние изменения. Снова примените разрешение мультимедиа при прокрутке или вызовите метод, если вы используете S CSS.

Answer 2

Вы можете облегчить жизнь, установив CSS настраиваемую переменную и изменив только ее значение.

const img = document.querySelector('img');

window.addEventListener('scroll', onScroll);

function onScroll() {
  let offsetY = (window.pageYOffset * 0.7) + 'px';
  document.documentElement.style.setProperty('--tY', offsetY);
}

:root {
  --tY: 0px;
}

img {
  will-change: transform;
  transform: scale(2) translateY(var(--tY));
}

body {
  height: 4000px;
}

<img src="http://placekitten.com/100/100" alt="">

jsFiddle

Answer 3

В функции onScroll вы переопределяете преобразование css crule.
Может быть удобнее обернуть изображение в элемент и применить к нему масштаб. например:

<div clas="img-container">
   <img ... />
</div>

@media (max-width: 1560px) {
   .img-container {
     transform: scale(2);
   }
}

onScroll() {
   image.style.transform = `translateY(${window.pageYoffset * 0.7})`;
}