昨天我在浏览互联网时发现了一个很棒的网站：https://durimel.io/nel。看看他的作品列表……一个无限滚动的列表，甚至可以通过鼠标滚轮来滚动。
我喜欢那个东西！所以，我开始思考它是如何完成的，并开始进行一些自己的实验。我想要澄清的是，我的目的不是抄袭Lionel的作品……我只是想学习和理解如何构建这样一个fantastic的动画！（也许将来会使用类似的概念）
现在是我的问题： 如果你看看我的代码，我认为我的列表（或多或少）向右移动。它是无限的，根据鼠标滚轮的使用次数快速或缓慢滚动。关于这点应该没问题
但是skew()函数的行为不正确。我在这里漏掉了什么？ 它没有真正/良好的加速度，因为它不能在单个滚动上倾斜得更少或在更长的滚动上倾斜得更多。此外，如果您尝试连续上下滚动，它会出现卡顿和抖动。 我该如何解决这个问题？
这是我的代码到目前为止。请不要问我为什么使用这样奇怪的数字或计算……我不知道，我只是在尝试着玩弄它们。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<style>
body {
overflow: hidden;
}
ul {
list-style: none;
}
li {
display: inline;
padding: 30px;
font-size: 90pt;
font-weight: bold;
border: solid 1px red;
position: absolute;
white-space: nowrap;
transform-origin: 50% 100%;
}
</style>
</head>
<body>
<ul>
<li>bla bla</li>
<li>adsf</li>
<li>234 777</li>
<li>jhgj</li>
<li>shsh hshs</li>
<li>looool</li>
<li>gaga</li>
</ul>
<script>
let a = document.getElementsByTagName('li');
let ticking = false;
let trans3d = 0;
let listEnd = 0;
let listStart = 0;
window.onload = function () {
let pos = 0;
for (let i = 0; i < a.length; i++) {
let prev = (i > 0) ? a[i - 1].offsetWidth + 20 : 0;
pos += prev;
a[i].style.left = pos + "px";
if (pos >= listEnd) {
listEnd = pos + a[i].offsetWidth + 20;
}
if (pos <= listStart) {
listStart = pos;
}
}
}
function changeListPos(item, moveToEnd) {
if (moveToEnd) {
item.style.left = listEnd + "px";
listEnd += item.offsetWidth + 20;
listStart += item.offsetWidth + 20;
} else {
listStart -= item.offsetWidth + 20;
listEnd -= item.offsetWidth + 20;
item.style.left = listStart + "px";
}
}
function scrollContent(scroll_pos) {
let qtyScroll = 40;
let easeOutSine = function (t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
};
for (let i = 0; i < qtyScroll; i++) {
(function (x) {
setTimeout(function () {
trans3d += easeOutSine(x, ((qtyScroll - x)) / 14, 0.05, qtyScroll) * (scroll_pos / Math.abs(scroll_pos));
let skew = easeOutSine(x, ((qtyScroll - x)) / 6, 0.05, qtyScroll) * (scroll_pos / Math.abs(scroll_pos));
console.log(skew);
for (let j = 0; j < a.length; j++) {
let prev = (j == 0) ? a[a.length - 1] : a[j - 1]
let curr = a[j];
if (scroll_pos < 0 && curr.getBoundingClientRect().x < -(prev.getBoundingClientRect().width / 4) && parseInt(prev.style.left) < parseInt(curr.style.left)) {
changeListPos(prev, true);
} else if (scroll_pos > 0 && curr.getBoundingClientRect().x >= -(prev.getBoundingClientRect().width / 4) && parseInt(prev.style.left) > parseInt(curr.style.left)) {
changeListPos(prev, false);
}
curr.style.transform = "skew(" + skew + "deg) translate3d(" + trans3d + "px, 0px, 0px)";
}
}, 55 * (x / 3));
})(i);
}
}
(function (window, document) {
let prefix = "", _addEventListener, support;
// detect event model
if (window.addEventListener) {
_addEventListener = "addEventListener";
} else {
_addEventListener = "attachEvent";
prefix = "on";
}
// detect available wheel event
support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
"DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
window.addWheelListener = function (elem, callback, useCapture) {
_addWheelListener(elem, support, callback, useCapture);
// handle MozMousePixelScroll in older Firefox
if (support == "DOMMouseScroll") {
_addWheelListener(elem, "MozMousePixelScroll", callback, useCapture);
}
};
function _addWheelListener(elem, eventName, callback, useCapture) {
elem[_addEventListener](prefix + eventName, support == "wheel" ? callback : function (originalEvent) {
!originalEvent && (originalEvent = window.event);
// create a normalized event object
var event = {
// keep a ref to the original event object
originalEvent: originalEvent,
target: originalEvent.target || originalEvent.srcElement,
type: "wheel",
deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
deltaX: 0,
deltaY: 0,
deltaZ: 0,
preventDefault: function () {
originalEvent.preventDefault ?
originalEvent.preventDefault() :
originalEvent.returnValue = false;
}
};
// calculate deltaY (and deltaX) according to the event
if (support == "mousewheel") {
event.deltaY = -1 / 40 * originalEvent.wheelDelta;
// Webkit also support wheelDeltaX
originalEvent.wheelDeltaX && (event.deltaX = -1 / 40 * originalEvent.wheelDeltaX);
} else {
event.deltaY = originalEvent.deltaY || originalEvent.detail;
}
// it's time to fire the callback
return callback(event);
}, useCapture || false);
}
})(window, document);
addWheelListener(window, function (e) {
if (!ticking) {
window.requestAnimationFrame(function () {
scrollContent(e.deltaY);
ticking = false;
});
ticking = true;
}
});
</script>
</body>
</html>