为了使其平滑,将图像放在一个单独的div中,并使用transform: translate来移动整个元素 - 这样你就会得到非常流畅的结果。
这里有一个小例子,做了一些稍微不同的事情,但是使用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)');
或者使用原生JS:
backgroundElement.style.transform = 'translateY(' + ($(this).scrollTop() / 2) + 'px)';