посмотрите пожалуйста этот сайт ouiwill.com , подскажите пожалуйста каким образом можно сделать такой плавный скрол. Я столько плагинов перепробовал но здесь прямо очень круто смотрится Да я знаю что тут используется паралакс секции, но мне нравиться именно скролл. По коду насколько можно видеть идет эффект через translateY + transition
1 ответ
Вроде так у них (но это не точно).
var y = 0, Y = 0, ease = 0.04, s = 70
onwheel = (e) => {
dir = e.deltaY < 0 ? -1 : 1
Y += s * dir
Y = Math.min(Math.max(0, Y), innerHeight * 2)
}
function update() {
y += (Y - y) * ease
one.style.transform = `translateY(-${y}px)`
two.style.transform = `translateY(-${innerHeight}px)`
three.style.transform = `translateY(-${y}px)`
requestAnimationFrame(update)
}
update()
body {
margin: 0;
}
.fake-scroll {
height: 300vh;
}
.container {
width: 100%;
position: fixed;
left: 0;
top: 0;
}
.container>div {
position: relative;
width: 100%;
height: 100vh;
background-color: black;
}
.container>div:nth-child(1) {
z-index: 1;
}
.container>div:nth-child(2) {
background-image: url(https://picsum.photos/800);
background-size: cover;
}
<div class="wrapper">
<div class="fake-scroll"></div>
<div class="container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
</div>
-
-
@MaximLensky потом посмотрю – user355286 16 мая '20 в 8:03