个人中心
gpt4 book ai didi

javascript - 在js动画中通过鼠标滚轮加速css的skew()

转载 作者：行者123 更新时间：2023-11-28 19:28:46 29 4
gpt4 key购买 nike

昨天我在浏览互联网时发现了这个很棒的网站: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>

最佳答案

如果您为 li 元素的 skew 添加过渡延迟，则倾斜会稍微感觉更“真实”

transition: skew 1.5s;

在你的样式 block 中:

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

如果你想改变倾斜的 Angular ，只需更改 scrollContent() 函数中启动 skew 变量的代码:

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

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

关于javascript - 在js动画中通过鼠标滚轮加速css的skew()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55550824/

29 4 0
文章推荐： python - 为什么我在 python 中看到时区异常
文章推荐： javascript - 是否可以在 JS 中构造 HTML 以便不使用 document.write 插入 HTML 中？
文章推荐： javascript - 如何在加载后运行 AJAX 加载的页面脚本
文章推荐： html - 按百分比更改图像高度不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com