gpt4 book ai didi

jquery - 平滑背景图像的视差滚动

转载 作者:太空狗 更新时间:2023-10-29 13:05:26 25 4
gpt4 key购买 nike

我做了一些研究并编写了一段简单的 jQuery,它以与前景略有不同的速度滚动背景,在您向下滚动网站时产生视差效果。

不幸的是它有点生涩。

这是 HMTL 的基本布局:

<body>
<section>
Site content goes here.
</section>
</body>

这是 CSS:

body {
background-image: url('../images/bg.png');
background-repeat: repeat-y;
background-position: 50% 0;
}

这是 JS:

$(window).scroll(function () {
$("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
});

https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/

非常简单,但我的问题是即使在功能强大的计算机上,滚动时也有点不稳定。

有没有办法让背景视差动画流畅?

最佳答案

将过渡属性添加到您的 CSS,这样它就可以像这样被 GPU 加速:

body {
background-image: url('../images/bg.png');
background-repeat: repeat-y;
background-position: 50% 0;
transition: 0s linear;
transition-property: background-position;
}

关于jquery - 平滑背景图像的视差滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15789026/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com