How To Move/Animate A DIV Background Image Smoothly Vertical?

Question

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.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>

CODE 1:) http://jsfiddle.net/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.net/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...???

requestAnimationFrame is your friend for smooth animation in modern browsers, don't use setInterval, timers are flaky. modified your fiddle here: http://jsfiddle.net/hY5Dx/100/ — Brunis, Aug 05 '14 at 12:51
@Brunis That's cool but I don't want it in JQuery. Anyway nice share... — Muhammad Hassan, Aug 05 '14 at 14:09
So you set the style with VanillaJS: http://jsfiddle.net/hY5Dx/103/ — Brunis, Aug 05 '14 at 14:27
@Brunis You should share this in answer as you have the Cross-Browser lightweight code... — Muhammad Hassan, Aug 07 '14 at 08:50

score 2 · Answer 1 · answered Aug 04 '14 at 17:34

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

Seems kinda overkill using keyframes for a simple linear infinite slide? — Brunis, Aug 05 '14 at 14:29
@Brunis If you have a better solution, new answers are always welcome. — apaul, Aug 05 '14 at 16:17
@Brunis Its the best one in CSS. Do you have better then this? — Muhammad Hassan, Aug 07 '14 at 08:47

score 1 · Accepted Answer · answered Aug 07 '14 at 10:53

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

VanillaJS using requestAnimationFrame for that butter smooth slide :)

http://jsfiddle.net/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);
}

score 1 · Answer 3 · edited May 23 '17 at 12:33

As there is too much comments 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.com/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.

Arnab Nandy · Answer 4 · 2014-08-04T16:41:59.403

0

<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);
    }
}

check jsfiddle

edited Aug 04 '14 at 16:41

answered Aug 04 '14 at 15:32

Arnab Nandy

6,472
5
44
50

WoW, Just edited the other codes. I shared other codes that I checked myself but that are not what I want. Please read the question again... – Muhammad Hassan Aug 04 '14 at 15:34
@MuhammadHassan check again – Arnab Nandy Aug 04 '14 at 16:07
@Skynet You one is now moving whole image. I want it to repeat-y without any break... – Muhammad Hassan Aug 05 '14 at 13:34
@Kaiido You one is 90% ok but its giving a blink while repeating image on y-axis. – Muhammad Hassan Aug 05 '14 at 13:37
animation: mymove 1s linear infinite; -webkit-animation:mymove 1s linear infinite; If we speed up the animation then i think the 10% flaw what @Kaiido is lacking i code could be overcome. – Arnab Nandy Aug 05 '14 at 15:02
Hum, actually it's the background-position wich made those jumps. You have to set it to the height of your pic (here "860px") : http://jsfiddle.net/Kaiido/D8xP4/4/ – Kaiido Aug 07 '14 at 08:02
1

Do you mean the code doesn't work? You're using a webkit browser so you need the [-webkit prefix][http://stackoverflow.com/questions/5411026/list-of-css-vendor-prefixes] http://jsfiddle.net/Kaiido/D8xP4/6/ – Kaiido Aug 07 '14 at 15:28

How To Move/Animate A DIV Background Image Smoothly Vertical?

4 Answers4