Change background-position with Javascript

Navigation
0

Well, first of all I apologize, but this question is a bit difficult to express myself.

What I want to know is if there is any code in javascript that makes the background-position move very fast, very slowly, and then stops. 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 do not know if I express 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><scriptsrc="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 do not want to use the css animate, but rather just use javascript.

Thank you.

    
asked by anonymous 17.04.2016 / 22:05

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><scriptsrc="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 easing , which is a jQuery plugin.

    
17.04.2016 / 22:54
0

I do not know if the best way to "move" a background image is by constantly changing the position of the background. However, if this solves your problem, there is an example here:

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>

Notice that the delay in the interval is always increment, to give the impression that image is slowing down, as you requested. To leave the movement, check if you want to see how fast the background can be moved, comment the line: 

 //delay +=1;
    
17.04.2016 / 22:49
How to change the title of WebView How to create an android app using only c ++ in Android Studio?