Slowscroll page

Question

как сделать такой же плавный скроллинг как на этом сайте,и чтобы он сохранил свою плавность на телефоне сайт: https://rluijten.photography/

Answer 1

Там весь фокус не в скроле, сам скрол там нормальный. Просто все елементы при скроле плавно двигаются. Самый обычный паралакс.

Вот для примера моя реализация таког еффекта. Он немного неплавный, так что советую доработать или найти что-то получше, но примерно вот так оно работает.

window.addEventListener("scroll", event => {
  const windowHeight = window.innerHeight;
  document.querySelectorAll("img").forEach((image, index) => {
    // В зависимости от номера картинки будет разная скорость
    const multiplyer = (index % 4) + 1;
    // Тут мы считаем позицию картинки и делаем для нее смещение по вертикали
    const offset = window.scrollY - image.offsetTop - image.clientHeight / 2;
    let transform = (windowHeight - offset) / 15 * multiplyer;
    image.style.transform = "translateY(" + transform + "px)";
  });
});

img {
  display: block;
  margin: 32px auto 32px 32px;
  transition: transform 1s;
}

img:nth-child(2n + 1) {
  margin: 32px 32px 32px auto;
}

<img src="https://i.picsum.photos/id/237/250/300.jpg">
<img src="https://i.picsum.photos/id/238/250/300.jpg">
<img src="https://i.picsum.photos/id/239/250/300.jpg">
<img src="https://i.picsum.photos/id/240/250/300.jpg">
<img src="https://i.picsum.photos/id/241/250/300.jpg">
<img src="https://i.picsum.photos/id/242/250/300.jpg">
<img src="https://i.picsum.photos/id/243/250/300.jpg">

БЛОГ НА HUSL

Slowscroll page

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