Laggy CSS动画与Transform属性

发布于 2025-02-11 05:21:09 字数 2428 浏览 1 评论 0原文

我只有一个非常简单的动画，只有一个元素，但是当我滚动时，事实证明它很懒惰，尽管我使用request> requestAnimationframe（） and transform> transform> transform属性而不是顶部/左边。我的代码有什么问题？

var floating = document.getElementsByClassName('floating');

function moveFloating(offset) {
    for (let i = 0; i < floating.length; i++) {
        floating[i].style.transform  = 'translate(0px, ' + offset +'px)';
    }
}

function loop() {
    let scrollOffset = window.scrollY;
    moveFloating(scrollOffset);
    requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

html,
body {
    height: 100%;
    width: 100%;
    margin: 0 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}

.frame {
    height: auto;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 50px;
}

.static {
    width: 30%;
}

.floating {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
    left: 0;
    right: 0;
    text-align: center;
}

<body>
    <div class="container">
        <div class="frame">
            <p class="static">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et volutpat tortor. Phasellus
                dignissim euismod ante, vel vulputate sapien vehicula dapibus. Phasellus sollicitudin est ac neque
                interdum, non vulputate augue efficitur. In feugiat convallis nunc. Etiam at luctus erat. Pellentesque
                in scelerisque tortor, vitae sodales lorem. Morbi vitae maximus massa. Donec aliquet dolor neque, porta
                tristique massa efficitur id. Ut ac odio justo. Maecenas accumsan justo id turpis lobortis vulputate.
                Aliquam ut sapien purus. Vestibulum vel sagittis purus. Quisque et gravida odio. Curabitur pretium
                lacinia nunc, nec dignissim lacus tristique sed. Vivamus ligula mi, interdum id hendrerit eget, posuere
                quis neque. Nulla eu eleifend arcu.
            </p>
            <h2 class="floating">Floating text</h2>
        </div>
    </div>
    <script src="script.js"></script>
</body>

原文

I have a pretty simple animation with only one element, but when I scroll, it turns out to be pretty laggy, though I use requestAnimationFrame() and transform property instead of top/left. What's the problem with my code?

var floating = document.getElementsByClassName('floating');

function moveFloating(offset) {
    for (let i = 0; i < floating.length; i++) {
        floating[i].style.transform  = 'translate(0px, ' + offset +'px)';
    }
}

function loop() {
    let scrollOffset = window.scrollY;
    moveFloating(scrollOffset);
    requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

html,
body {
    height: 100%;
    width: 100%;
    margin: 0 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}

.frame {
    height: auto;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 50px;
}

.static {
    width: 30%;
}

.floating {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
    left: 0;
    right: 0;
    text-align: center;
}

<body>
    <div class="container">
        <div class="frame">
            <p class="static">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et volutpat tortor. Phasellus
                dignissim euismod ante, vel vulputate sapien vehicula dapibus. Phasellus sollicitudin est ac neque
                interdum, non vulputate augue efficitur. In feugiat convallis nunc. Etiam at luctus erat. Pellentesque
                in scelerisque tortor, vitae sodales lorem. Morbi vitae maximus massa. Donec aliquet dolor neque, porta
                tristique massa efficitur id. Ut ac odio justo. Maecenas accumsan justo id turpis lobortis vulputate.
                Aliquam ut sapien purus. Vestibulum vel sagittis purus. Quisque et gravida odio. Curabitur pretium
                lacinia nunc, nec dignissim lacus tristique sed. Vivamus ligula mi, interdum id hendrerit eget, posuere
                quis neque. Nulla eu eleifend arcu.
            </p>
            <h2 class="floating">Floating text</h2>
        </div>
    </div>
    <script src="script.js"></script>
</body>

分享到QQ

分享到微博