javascript - Moving Background Image diagonally across the screen -


i'm new here, can't comment/follow-up yet on question partially provided answer i'm trying achieve.

on question here [moving background image in loop left right fantastic , detailed answer jack pattishall jr lets me set page background scroll either vertically or horizontally.

is there way combine directional code, page background scrolls diagonally (i.e. bottom left top right)?
i've been "mutilating" jack's code days now, can't figure out how make background scroll in 2 directions simultaneously. :-(

starting example mentioned above, here changes:

html, body { height: 100%; width: 100%;} body {     background-image: url('http://coloradoellie.files.wordpress.com/2013/10/25280-ginger-kitten-leaping-with-arms-outstretched-white-background.jpg?w=300&h=222');     background-repeat: repeat-x repeat-y; // line removed entirely }  $(function(){      var x = 0;      var y = 0;      setinterval(function(){          x+=1;          y-=1;          $('body').css('background-position', x + 'px ' + y + 'px');      }, 10);  }) 

brief description of changes:

  • add repeat-y background-repeat or remove line (we have replicated default behavior)

  • instantiate , initialize y-position variable

  • move additively on x-axis , negatively on y-axis background move in desired direction

  • edit $('body') css include new non-static y-position


thanks advice, joseph neathawk


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -