Сглаживание анимации прокрутки в JS ⇐ Javascript

[Anonymous]

Итак, мой вопрос чрезвычайно прост, я вижу его на множестве веб -сайтов
https://www.jordangilroy.com/#work
Это, например, мой ссылка, когда вы прокручиваете, он чувствует себя намного более плавным, и анимация вроде «догоняет» на ваш свиток. Единственное, что я могу найти, это Scroll-Behaviour: гладкий; что, очевидно, не то, что мне нужно. < /p>
Я очень новый для JS, поэтому большинство функций я пытался воспроизвести функцию прокрутки. Почувствуйте себя слишком жестким. < /p>
Приведенный ниже код в основном только для функции резки изображения, так что да. Не уверен, как я могу сделать плавную анимацию < /p>

Код: Выделить всё

//#region history image changer (scroll Event)
const historyContent = document.getElementsByClassName("historyLayout");
const parallaxContent = document.querySelectorAll('section .parallax');
window.addEventListener('scroll', () => {
let scrollY = window.scrollY;

const prehistoricContainer = historyContent[0];
const containerMiddle = (prehistoricContainer.getBoundingClientRect().top - prehistoricContainer.getBoundingClientRect().bottom) / 2;
const containerHalf = prehistoricContainer.getBoundingClientRect().top - containerMiddle;
if (containerHalf 
Я попробовал Scroll-behaviour: плавный; Очевидно, что не то, что мне нужно
Я слышал о запросе extrainimationFrame и не был уверен, как его реализовать, я попробовал, ничто не выглядит иначе, не было большой разницы, если вообще не уверен.  class = "Snippet-Code-JS Lang-JS PrettyPrint-Override">var offsetX = 0;
var speedX = 0;
const deltaMultiplier = 10;
const maxSpeed = 160;
const friction = 0.95;

function scrollHorizontally(ev) {
ev.preventDefault()
console.log("asdasd");
var delta = -1 * Math.sign(ev.wheelDelta);
speedX += delta * deltaMultiplier;
speedX = speedX > 0 ? Math.min(speedX, maxSpeed) : Math.max(speedX, -maxSpeed);
return false;
}

function draw() {
offsetX += speedX;

const element = document.documentElement;
const maxScrollLeft = element.scrollHeight - element.clientHeight;
offsetX = Math.min(offsetX, maxScrollLeft);
offsetX = Math.max(offsetX, 0);

element.scrollTop = offsetX;
speedX *= friction;

// about 60 times a second
requestAnimationFrame(draw);
}

// must be passive so will be cancelable
addEventListener('wheel', scrollHorizontally, {
passive: false
})

draw()< /code>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Unica One', sans-serif;
color: #111;
scroll-behavior: smooth;
z-index: 1;
}

header {
width: 100%;
height: 100vh;
background-image: url("Images/Banner(1).png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
flex-wrap: wrap;
position: absolute;
}

.parallax {
min-height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.parallax.subTopic::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}

.parallax h1 {
position: absolute;
color: white;
}< /code>




[*][url=#sub1]SubTopic1[/url]
[*][url=#sub2]SubTopic2[/url]
[*]
[img]Images/prehistoricFigure.jpg[/img]
"2 Idol Neolithic Figures", https://www.ebay.com/itm/254174068724 by eBay



[img]Images/prehistoricAnimal.jpg[/img]
"Terracotta dog Figure", https://www.metmuseum.org/art/collection/search/240880 by The Metropolitan Museum of Art



[img]Images/prehistoricTheThinker.jpg[/img]
"The Thinker of Hamangia", https://www.facebook.com by Facebook Precious Box





Prehistory Times

All the way dating back to the prehistoric times, humans have already started the creation of figurines.  More specifically around 25-30,000 BC,
there were figurines made of stone, which were figures of women appearing pregnant, these were known as the Venus figurines, presumably made to represent fertility.
Figurines slowly evolved over the years and materials got more advanced, such as pottery and precious stones. No one knows the exact reason
for their creation or how they were used, but it is widely believed that they were used for rituals and religious purposes.

Подробнее здесь: https://stackoverflow.com/questions/796 ... ions-in-js