Change background-position with Javascript

Question

Change background-position with Javascript

Asked 8 years, 2 months ago

Viewed 318 times

0

Well, first of all I’m sorry, but this question is a little difficult to express.

What I want to know is if there is any javascript code that makes the background-position move very fast, until very slowly and then stop. In other words, we assume that the animation takes 10 seconds. Initially it moves very fast and slows down until it reaches 0 second and stops definitively.

I don’t know if I expressed myself very well, but I intend to do this with javascript or jquery.

My Code:

<html>
<head>
<style>

body,html,div {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  position:relative;
}

#anim {
  background:url('https://www.gravatar.com/avatar/7a2c254d9e863db31614b95e909a9633?s=800&d=identicon') no-repeat 0 0;
  background-size:180% 180%;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">
</head>
<body>

<script type="text/javascript">
$('#anim').animate({'background-position-x': '100%'},8000,'easeOutCubic');
</script>
<div id="anim">

</div>

</body>
</html>

The movement would be the image from left to right.

I don’t want to use css Animate, but only javascript.

Thank you.

2 answers

2

With jQuery it’s simple:

$('#anim').animate({'background-position-x': '100%'},8000,'easeOutCubic');

body,html,div {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  position:relative;
}

#anim {
  background:url('https://www.gravatar.com/avatar/7a2c254d9e863db31614b95e909a9633?s=800&d=identicon') no-repeat 0 0;
  background-size:300% 300%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="anim"></div>

Speed is the second parameter, and deceleration can be changed in the easing, which is a jQuery plugin.

Where is that easing in code?

– Gonçalo

2016/04/17 at 21:05
added an explanation, and the address. Test again in "run", I gave an updated. I increased to 8 seconds (8000)

– Bacco

2016/04/17 at 21:06
Here in stackoverflow is working exactly as I want, however I tried to create the file and it is not working. I added the code to my question, can you tell me what I did wrong? The effect doesn’t work.

– Gonçalo

2016/04/17 at 21:14
What happened when you tested in your code? It did not appear, did not cheer, or what?

– Bacco

2016/04/17 at 21:15
Only the image appeared, but no effect.

– Gonçalo

2016/04/17 at 21:16
I had to close a script there, but I don’t know if that’s it

– Bacco

2016/04/17 at 21:17
I closed the script but it’s still not working.

– Gonçalo

2016/04/17 at 21:18
try for the $( anim ) part at the end of the body to see if it changes.

– Bacco

2016/04/17 at 21:19
It already works, explain to me only because in doing that already worked?

– Gonçalo

2016/04/17 at 21:20
probably because when the JS was triggered the Anim did not yet exist. In fact, the right thing is to run the JS only after onload, but this you have to organize for all the JS of the application. Then it’s a little more complicated to explain here.

– Bacco

2016/04/17 at 21:33
To increase the animation time and to increase the speed of moving the background position and the right 8000?

– Gonçalo

2016/04/17 at 21:34
Number of desired seconds multiplied by 1000. The speed will only depend on the size of the actual image, it depends on its true layout. The final position depends on the background-position-x.

– Bacco

2016/04/17 at 21:37
Okay. Thank you.

– Gonçalo

2016/04/17 at 21:40
Remember that if your layout is fixed, you can put the values in px instead of using % (but then you really have to adjust and calculate)

– Bacco

2016/04/17 at 21:41
I’ll use percentage to be equal for all.

– Gonçalo

2016/04/17 at 21:42

Show 10 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by mau humor • **1,991** points · Answer 1 · 2016-04-17T20:49:53+00:00

I don’t know if the best way to "move" a background image is to constantly modify the position of the "background". However, if this solves your problem, there is an example:

CSS:

body{
    background-image: url('http://www.w3schools.com/cssref/smiley.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 1px 1px;
}

HTML:

<body></body>

Javascript:

var x = 0;
var y = 0;
var delay = 10;

var t = setTimeout( act , delay );

function act(){

    delay +=1;
    x++;
    y++;
    $('body').css('background-position',x+'px '+y+'px');

    clearInterval(t);
    t = setTimeout( act , delay );
}

Include:

<script src="https://code.jquery.com/jquery-2.2.3.min.js" ></script>

Note that the "delay" in the interval is always increment, this to give the impression that the image is losing speed, as you requested. To let the movement see, if you want to see how fast the background can be moved, comments the line:

 //delay +=1;