Как сделать передвижение элемента при скролле

Question

Есть секция с фоном и картинкой

Нужно чтобы картинка при скролле на другую секцию переместилась вправо и слегка уменьшилась

Пробовал так:

const img = document.querySelector("img");
const second = document.querySelector(".second-section");
document.addEventListener("scroll", function(e) {
  let distance = second.getBoundingClientRect().height;
  var cont_top = window.pageYOffset ?
    window.pageYOffset :
    document.body.scrollTop;
  if ((cont_top / distance) * 2 - 468.5 <= 2 && (cont_top / distance) * 2 >= 1) {
    img.style.left = (cont_top / distance) * 2 * 50 + "%";
    img.style.transform = "translateX(-" + (cont_top / distance) * 2 * 50 + "%)";

  }
});

section {
  min-height: 100vh;
  display: flex;
  img {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <title>Главная</title>
  <meta charset="UTF-8">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="css/style.min.css?_v=20230112170840">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="wrapper">
    <header class="header">
      <div class="header__container">
      </div>
    </header>
    <main class="page">
      <section class="first-section">
        <div class="first-section__wrapper">
          <img src="img/image-01.png" alt="image">
        </div>
      </section>
      <section class="second-section">

      </section>
    </main>
    <footer class="footer">
      <div class="footer__container">
      </div>
    </footer>
  </div>

Но получилось не особо плавно + если резко прокручивать страницу элемент не возвращается назад. Также не разобрался как плавно уменьшать картинку

БЛОГ НА HUSL

Как сделать передвижение элемента при скролле

Ответы (0 шт):