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

Рейтинг: 0Ответов: 1Опубликовано: 21.03.2023

введите сюда описание изображения

Как сделать чтобы задняя атрибутика(она идёт одним изображение - фон) двигалась в два раза медленне чем мы скроллим(параллакс называется)

Ответы

▲ 1Принят

Вот один из примеров как это можно реализовать. В данном случае мы просто отслеживаем позицию прокрутки и вычитаем из нее ровно половину из нее чтобы добится замедления в 2 раза. Для воздействия на позицию фона используем css переменную. Комбинацией различных смещений можно добиться более красивых эффектов, главное — удаленные предметы движутся медленнее чем близкие.

const bg = document.querySelector('.bg')
document.body.onscroll = function(e){
  bg.style.setProperty('--posY', `${window.scrollY - window.scrollY/2}px`)  
}
body {
  margin: 0;
  padding:0;
}

.bg {
  --posY: 0;
  min-height: 800px; 
  background: url('https://fastly.picsum.photos/id/1033/400/800.jpg?hmac=-tEBNlVe2LF71fyX8KfALxE4TS_0NMLwpba6P5wE91A');
  background-position: 0 var(--posY);
  background-repeat: 0
}

li {
  color: white;
  font-size: 2rem;
}
<div class="bg">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
  <ul>
</div>