Как сделать движение фона при скролле в два раза медленне
Как сделать чтобы задняя атрибутика(она идёт одним изображение - фон) двигалась в два раза медленне чем мы скроллим(параллакс называется)
Источник: Stack Overflow на русском
Как сделать чтобы задняя атрибутика(она идёт одним изображение - фон) двигалась в два раза медленне чем мы скроллим(параллакс называется)
Вот один из примеров как это можно реализовать. В данном случае мы просто отслеживаем позицию прокрутки и вычитаем из нее ровно половину из нее чтобы добится замедления в 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>