javascript - How To MoveAnimate A DIV Background Image Smoothly Vertical? - Stack Overflow

admin管理员组

文章数量:1417033

I have a DIV with some text in it. I added a background image on it. Now I want to keep scrolling my DIV background image from bottom to top smoothly. For this purpose, I searched for the code and I found some codes...

<style type="text/css">
#moving_bg {
background-image:url('.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>

CODE 1:) / This is a code that I found but this one have some problems with me. First of all its moving horizontally and second is that its making image width doubled to 200% that I dont want also.

CODE 2:) / This one is also moving horizontally and not making the image width doubled. But its JQuery that I dont want.

I want only CSS3 or JavaScript with HTML code to move my background image in DIV from bottom to top without doubling the image width. Is this possible in these two web languages...???

I have a DIV with some text in it. I added a background image on it. Now I want to keep scrolling my DIV background image from bottom to top smoothly. For this purpose, I searched for the code and I found some codes...

<style type="text/css">
#moving_bg {
background-image:url('http://i.imgur./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>

CODE 1:) http://jsfiddle/ZTsG9/1/ This is a code that I found but this one have some problems with me. First of all its moving horizontally and second is that its making image width doubled to 200% that I dont want also.

CODE 2:) http://jsfiddle/hY5Dx/3/ This one is also moving horizontally and not making the image width doubled. But its JQuery that I dont want.

I want only CSS3 or JavaScript with HTML code to move my background image in DIV from bottom to top without doubling the image width. Is this possible in these two web languages...???

• javascript
• html
• css
• css-animations

Share Improve this question Follow edited Aug 4, 2014 at 15:26 Muhammad Hassan asked Aug 4, 2014 at 15:18 Muhammad HassanMuhammad Hassan 1,30466 gold badges3535 silver badges6060 bronze badges 6

• then please remove the jquery tag.. – Bla... Commented Aug 4, 2014 at 15:23
• 1 requestAnimationFrame is your friend for smooth animation in modern browsers, don't use setInterval, timers are flaky. modified your fiddle here: jsfiddle/hY5Dx/100 – Brunis Commented Aug 5, 2014 at 12:51
• @Brunis That's cool but I don't want it in JQuery. Anyway nice share... – Muhammad Hassan Commented Aug 5, 2014 at 14:09
• 1 So you set the style with VanillaJS: jsfiddle/hY5Dx/103 – Brunis Commented Aug 5, 2014 at 14:27
• @Brunis You should share this in answer as you have the Cross-Browser lightweight code... – Muhammad Hassan Commented Aug 7, 2014 at 8:50

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

If you can get away with using 2 divs you can get it to work like this:

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./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%;
    }
}

As per Muhammad's request i'll add my fiddle as an answer.

VanillaJS using requestAnimationFrame for that butter smooth slide :)

http://jsfiddle/hY5Dx/103/

Code to please SO:

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

As there is too much ments after @Skynet answer, here I add the one I wrote following his base structure.

So in CSS, you can make use of animation CSS property
This property still is vendor-prefixes dependant.

Basically for what you want to do, you have to animate the background-position property, only on y axis.

Here is the CSS code

/* 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./zF1zrkC.jpg');
}

And here we are.

The other answers are ok but as mentionned, using multiple divs isn't always possible and the use of requestAnimationFrame() is also browser specific (Paul Irish has good polyfill for this).
Furthermore, I'm not sure incrementing a var infinitely is a good solution : it will block near 6100000px, and its much more code to change the speed or to take control over the animation.

<div class="view" style="background-image: url('http://i.imgur./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);
    }
}

check jsfiddle

本文标签： javascriptHow To MoveAnimate A DIV Background Image Smoothly VerticalStack Overflow