我已经做了一些研究并编写了一个简单的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/
非常简单,但我的问题是,即使在功能强大的计算机上滚动,它也会有点生涩。
有没有办法让背景视差平滑动画?
答案 0 :(得分: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;
}
答案 1 :(得分:6)
尝试在支持它的浏览器中为可以硬件加速的属性设置动画。不要更改background-position
属性,而是使用绝对定位的img
,然后使用CSS变换更改其位置。
看看stellar.js。该插件为您提供了在功能强大的浏览器中使用CSS变换动画的选项(stellar.js可以让您为背景图像设置动画,但需要注意的是它在移动设备上无法顺利运行)。它还使用requestAnimationFrame,意味着更少的CPU,GPU和内存使用。
如果您认为插件过度,您至少可以检查所采用的方法并根据您的需要进行调整。
答案 2 :(得分:3)
设置正文的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://learnjavascripteasily.blogspot.in/
答案 3 :(得分:2)
有时我们无法在div中使用<img>
元素,原因如border-radius
可能会停止工作或width
大于父级。我遇到了所有这些问题,我找到的最佳解决方案是使用:
transition: 0.5s ease;
transform: translate3d(0, 0, 0);
我使用GPU获得了非常漂亮和平滑的视差效果。
答案 4 :(得分:1)
为了使图像平滑,将图像放在单独的div上并使用transform:translate移动整个元素 - 然后您将获得非常平滑的结果。
这是一个小例子做一些不同的事情,但使用翻译给你的想法:
HTML:
<div id="wrapper">
<div id="content">Foreground content</div>
</div>
CSS:
@-webkit-keyframes MOVE-BG {
0% {
transform: translate(0%, 0%);
-webkit-transform: translate(0%, 0%);
}
50% {
transform: translate(-250px, 0%);
-webkit-transform: translate(-250px, 0%);
}
100% {
transform: translate(0%, 0%);
-webkit-transform: translate(0%, 0%);
}
}
#wrapper {
width: 300px;
height: 368px;
overflow: hidden;
}
#content {
width: 550px;
height: 368px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
和小提琴:http://jsfiddle.net/piotku/kbqsLjfL/
从javascript(使用jQuery)中你必须使用类似的东西:
$(".element").css("transform", 'translateY(' + ($(this).scrollTop() / 2) + 'px)');
或在vanillaJS中:
backgroundElement.style.transform = 'translateY(' + ($(this).scrollTop() / 2) + 'px)';
答案 5 :(得分:0)
尝试将.css
更改为.animate
。因此,不要将CSS设置为硬值,而是可以为其设置动画。
$(window).scroll(function () {
$("body").animate({"background-position":"50% " + ($(this).scrollTop() / 2) + "px"},{queue:false, duration:500});
});
注意:添加脚本http://snook.ca/technical/jquery-bg/jquery.bgpos.js
请记住我没有测试过,请告诉我它是否有效。
动画背景图片:http://snook.ca/archives/javascript/jquery-bg-image-animations