Question

昨天我正在浏览互联网，发现了一个很棒的网站：https://durimel.io/nel。只需看看他的作品是如何列出的……就可以无限滚动地看到作品，甚至在鼠标滚动时也会倾斜。

我喜欢那件事！因此，我开始考虑如何完成此工作，并开始自己做一些试验。我想说的是，我的目的不是要复制Lionel的作品……我只是想学习并了解如何制作如此出色的动画！（并且将来可能会使用一些类似的概念）

现在我的问题是：如果您查看我的代码，我认为我的清单（或多或少）向右移动。它是无限的，它滚动的速度更快或更慢，具体取决于使用鼠标滚轮的时间。至于那应该没事

但是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>

Answer 1

如果您在skew元素的li上添加过渡延迟，则偏斜会更加“逼真”

transition: skew 1.5s;

在您的样式栏中：

    <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%;
            transition: skew 1.5s;
        }
    </style>

如果要更改倾斜角度，只需更改skew函数内部启动scrollContent()变量的代码：

let skew = easeOutSine(x, ((qtyScroll - x)) / 6, 0.1, qtyScroll) * (scroll_pos / Math.abs(scroll_pos));

例如，您可以将/ 6更改为/ 3，以获得更大的skew。如果这样做，您可能希望将transition: skew增加到2或3s。

在JS动画中通过鼠标滚轮加速CSS的skew（）

1 个答案: