Something is wrong with the method I'm using to re-create the effect of JSFiddle link
I want the background to move by 10 pixels in the direction of the keydown, and to keep moving in a loop as the key is pressed or held again. I know the code below does not look at the "key held down" factor - can anyone help me implement this part?
The effect should work on the x and y axis and should be possible also on the diagonal.
Follow the code:
HTML
<div id="pageBg"></div>
CSS
#pageBg {
background: url('http://placekitten.com/2000/2000') repeat 0 0 fixed;
height: 600px;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
JAVASCRIPT
var xPos = "background-position-x";
var yPos = "background-position-y";
window.addEventListener('keydown', function (e) {
if (e.keyCode == 37) { //Left Arrow Key
$('#pageBg').css(xPos, $('#pageBg').css(xPos) -10 + 'px');
}
if (e.keyCode == 38) { //Up Arrow Key
$('#pageBg').css(yPos, $('#pageBg').css(yPos) -10 + 'px');
}
if (e.keyCode == 39) { //Right Arrow Key
$('#pageBg').css(xPos, $('#pageBg').css(xPos) +10 + 'px');
}
if (e.keyCode == 40) { //Down Arrow Key
$('#pageBg').css(yPos, $('#pageBg').css(yPos) +10 + 'px');
}
});