Chu*_*utt 10 html css jquery html5 parallax
我做了一些研究并编写了一个简单的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/
非常简单,但我的问题是,当你滚动时,即使在强大的计算机上,它也会有点生涩.
有没有办法使背景视差平滑动画？
ros*_*hon 12
将过渡属性添加到CSS中,以便GPU可以加速它:
body {
background-image: url('../images/bg.png');
background-repeat: repeat-y;
background-position: 50% 0;
transition: 0s linear;
transition-property: background-position;
}
尝试在支持它的浏览器中动画可以硬件加速的属性.而不是更改background-position属性,使用绝对定位img,然后使用CSS变换更改其位置.
看看stellar.js.该插件为您提供了在功能强大的浏览器中使用CSS变换动画的选项(stellar.js可以让您为背景图像设置动画,但需要注意的是它在移动设备上无法顺利运行).它还使用requestAnimationFrame,这意味着更少的CPU,GPU和内存使用.
如果您认为插件过度,则至少可以检查所采用的方法并根据您的需要进行调整.
小智 5
设置body的css如下：
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
}
然后使用Javascript获取页面滚动时的pageYOffset，并将其设置为正文背景图像的背景位置，如下所示：
window.addEventListener('scroll', doParallax);
function doParallax(){
var positionY = window.pageYOffset/2;
document.body.style.backgroundPosition = "0 -" + positionY + "px";
}
只需在这里查看我的帖子： http: //learnjavascripteaily.blogspot.in/
| 归档时间： |
|
| 查看次数： |
57201 次 |
| 最近记录： |