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
Post a Comment