Move body background

JavaScript
1

was just wondering if possible to move background position with click of a button (toggle). so created example http://jsfiddle.net/VpULJ/2/
basically i want on click of the “click” button the content wrapper show up. what i want is to shift the background position right the bottom of the #wrapper div.
in next click wrapper gets hidden and then i want to shift the background up where it was (possibly with animate). been trying to figure out for long. anyone pointing to the right direction would be great help.

Thanks

2

Hi,
The jQuery css() can be used to set /change css properties.
Here’s an example, moves the background image down and up when click a button.

<style type="text/css"><!--
#dv1 {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  width:200px;
  height:400px;
 }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  var ix = 1;
  $('#btn').click(function() {
    $('#dv1').css(
    {
      'background-position': '0 '+ (100 * (ix % 2)) +'%'
    });
    ix++;
  });
});
--></script>
3

Thanks. I want to move the <body> background animate down and up with a toggle click happening on a button. rather a slow transition to it’s new position that to sudden move.

4

Kinda confused by what you want, you basically just want the background to animate when the user clicks right? Change your JS code to this:

$('#click').click(function(){
    $('body').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');
});
&#8203;
5

ah, let me try explaining, a button which toggle the wrapper div - slides down and up. so when wrapper slides down i would like slide down the background image as well and on the next click when wrapper div slide up and get hidden the background image too would slide up to it’s initial position.

6

Oh ok. Something like this? http://jsfiddle.net/VpULJ/5/

I can explain how I did this if this is what you needed.

[EDIT]
Replace “toggle” with “slideToggle” for a smoother effect, like this: http://jsfiddle.net/VpULJ/8/

[EDIT…again]
And to prevent the background from wrapping try add “no-repeat” to the background css like this: http://jsfiddle.net/VpULJ/9/

7

Hi,
To this page: http://keith-wood.name/backgroundPos.html there is a small jQuery plugin for animate background position. Very easy to use.

8

This is great. yes, this is what I was looking for. It would be very kind of you, if you can explain the logic to achieve this. Thanks a ton.

[EDIT]
not happening on FF12

9

No problem, this is what’s happening:


$('#wrapper').data('dir', 1); //Set the direction to move the background in
$('#wrapper').data('orig_height', $('#wrapper').height()); //Remember the height of this element

Here I’m just storing a variable dir inside the element for easy referencing. You could just the same use a variable like “var dir = 1” if you’d like.
1 is an easy number to Toggle, because you can multiply it by -1 to get the opposite.
1 * -1 = -1
-1 * -1 = 1

The height of the element changes when you slide it up or down, so I’m storing the original height (before it slides) “orig_height” into the elements data “memory”, so I can look it up later.

Pretty easy, just using $().data(var) to store variables.

Next:

    var dir = $('#wrapper').data('dir'); //The direction to push the background
    var height = $('#wrapper').data('orig_height');
    $('#wrapper').data('dir', (dir*-1)); //"toggle" the direction

All I’m doing here is taking the values we just stored out from the element into local variables “dir” and “height”.
I toggle “dir” by multiplying it by -1…so it’s now the opposite of whatever it just was. Then I store this back into the element for future use.


    $('#wrapper').slideToggle('slow', 'linear');
    $('body').animate({'background-position-y': (1+dir)*height/2+'px'}, 'slow', 'linear'); //Animate the background

Here I have two animations going at the SAME time at the SAME speed with the SAME easing. In order to make it work, we need to move the backdground down X pixels, where X is the height of the #wrapper.

This part looks confusing:
(1+dir)*height/2+‘px’

It’s just some fancy math tricks. (1+dir) will ALWAYS equal either 0 or 2, depending on if dir is -1 or 1.
If height = 100 then this means that
(0 or 2) * height = 0 or 200
200 is double the height of #wrapper, so we divide it by 2. We add ‘px’ to the end so the string becomes “100px”

:slight_smile:

10

This is awesome. Couldn’t have been better explanation than this. Thank a lot. Much appreciated.
Currently I m trying to debug why it’s not functioning on FF. Probably background-position-y has to dome something.

11

Oh crap that’s right, Firefox (and opera I think) don’t support background-position-x/y

$.animate() has a callback function called “step”:
$.animate({opacity: 1}, step: function(step, fx){
…stuff…
})

but I don’t have any time to work out a solution right now. It can get tricky so maybe someone else can help with that.

12

Sorry, I haven’t updated the thread. I have been able to get it work using step function. will update in the fiddle. Thanks.