Question

我有一个带有一些文字的DIV。我在上面添加了背景图片。现在我想继续平滑地从下到上滚动我的DIV背景图像。为此，我搜索了代码并找到了一些代码......

<style type="text/css">
#moving_bg {
background-image:url('http://i.imgur.com/zF1zrkC.jpg');
background-repeat:repeat-y;
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
}
</style>
<div id="moving_bg">
<h2>This is my DIV text that I want do not want to move/animate.</h2>
</div>

代码1 :) http://jsfiddle.net/ZTsG9/1/ 这是我发现的代码，但这个代码对我有些问题。首先，它水平移动，第二个是它的图像宽度加倍到200％，我也不想要。

代码2 :) http://jsfiddle.net/hY5Dx/3/ 这个也是水平移动而不是使图像宽度加倍。但它是我不想要的JQuery。

我只希望CSS3或JavaScript使用HTML代码在DIV中从底部到顶部移动我的背景图像，而不会使图像宽度加倍。这有两种网络语言是否可行...... ???

Answer 1

如果你可以使用2个div，你可以让它像这样工作：

<强> Working Example

html, body {
    height: 100%;
    margin: 0;
}
.outer {
    height:100%;
    overflow: hidden; /* hide the overflow so .inner looks like it fits in the window*/
}
.inner {
    height:200%; /* the inner div will need to be twice as tall as the outer div */
    width:100%;
    -webkit-animation:mymove 5s linear infinite;
    animation:mymove 5s linear infinite;
    background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
    background-size: 100% 50%; /* 50% height will be 100% of the window height*/
}
@-webkit-keyframes mymove {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
    }
}
@keyframes mymove {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
    }
}

Answer 2

根据穆罕默德的要求，我将添加小提琴作为答案。

VanillaJS使用requestAnimationFrame进行黄油平滑幻灯片：）

http://jsfiddle.net/hY5Dx/103/

取悦SO的代码：

var y = 0;
requestAnimationFrame(move);
var body = document.body;
function move(){
    y++;
    body.style.backgroundPosition = '0 ' + y + 'px';
    requestAnimationFrame(move);
}

Answer 3

由于在@Skynet回答之后有太多评论，我在这里添加了我在他的基础结构后写的那篇。

因此在CSS中，您可以使用animation CSS property
此属性仍然是vendor-prefixes依赖。

基本上，对于您想要做的事情，您必须仅在y轴上设置background-position属性的动画。

这是CSS代码

/* Following defines how the animation 'mymove' will run */
@keyframes mymove {
    /* 0% is the beginning of animation */
    0% {
        background-position: 0 0;
    }
    /* This is the end… where we set it to the size of the background image for y axis (0 being the x axis) */
    100% {
        background-position: 0 860px;
    }
}
/* same for webkit browsers */
@-webkit-keyframes mymove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 860px;
    }
html, body {
    height: 100%;
}
.view {
    color:#FFFFFF;
    height: 366px;
    text-align:center;
    /* Here we assign our 'mymove' animation to the class .view, we ask it to last 3 seconds, linearly (no ease at start or end), and repeating infinitely */
    animation: mymove 5s linear infinite;
    /* again webkit browsers */
    -webkit-animation:mymove 5s linear infinite;
    background: url('http://i.imgur.com/zF1zrkC.jpg');
}

And here we are.

其他答案还可以，但是如上所述，使用多个div并不总是可行，而requestAnimationFrame（）的使用也是浏览器特定的（Paul Irish has good polyfill for this)。此外，我不确定无限增加var是一个很好的解决方案：它将阻止接近6100000px，以及更多代码来改变速度或控制动画。

Answer 4

<div class="view" style="background-image: url('http://i.imgur.com/zF1zrkC.jpg')">According to a new report from AnandTech.</div>





    html, body {
    height: 100%;
}
.view {
    color:#FFFFFF;
    width:1000px;
    height:300px;
    text-align:center;
    -webkit-animation:mymove 5s linear infinite;
    /* Safari and Chrome */
    animation:mymove 5s linear infinite;
    background-size: 200% 100%;
    background-repeat: repeat-y;
}
@keyframes mymove {

    100% {
        transform: translate3d(0px, -400px, 0px);
    }
}
@-webkit-keyframes mymove
/* Safari and Chrome */
 {

    100% {
        transform: translate3d(0px, -400px, 0px);
    }
}

检查jsfiddle

如何移动/动画DIV背景图像平滑垂直？

4 个答案: