Commit 4b05e2ff authored by Benjamin Gallois's avatar Benjamin Gallois

Add backward stripes and better velocity selection

To do: size multiple of body width
parent 94b404f7
......@@ -4,9 +4,9 @@
background: repeating-linear-gradient(
90deg,
white,
white 10px,
black 10px,
black 20px
white 1%,
black 1%,
black 2%
);
position: fixed;
left: 0%;
......@@ -19,9 +19,9 @@
background: repeating-linear-gradient(
90deg,
white,
white 10px,
black 10px,
black 20px
white 1%,
black 1%,
black 2%
);
position: fixed;
left: -100%;
......
var body = document.getElementById('body');
var body2 = document.getElementById('body2');
var speed = 1;
var dw = 10;
var dw = 1;
var velocity = 1;
var stop = true;
var x = 0;
var x2 = - window.innerWidth;
function move(){
x ++;
x2++;
if (x === window.innerWidth) {
x = -window.innerWidth;
x += velocity;
x2 += velocity;
if (x >= window.innerWidth || x <= -window.innerWidth) {
x = -Math.sign(velocity)*window.innerWidth;
}
if (x2 === window.innerWidth) {
x2 = -window.innerWidth;
if (x2 >= window.innerWidth || x2 <= -window.innerWidth) {
x2 = -Math.sign(velocity)*window.innerWidth;
}
body.style.left = x + 'px';
body2.style.left = x2 + 'px';
}
body.addEventListener("click", function (event) {
moveInterval = setInterval(move, speed);
});
window.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 27) {
window.location.href = 'main.html';
}
if (event.keyCode === 32) {
clearInterval(moveInterval);
if (stop){
moveInterval = setInterval(move, 10);
stop = false;
}
else if (!stop) {
clearInterval(moveInterval);
stop = true;
}
}
if (event.keyCode === 39) {
clearInterval(moveInterval);
speed /= 10;
moveInterval = setInterval(move, speed);
velocity += 5;
}
if (event.keyCode === 37) {
clearInterval(moveInterval);
speed *= 10;
moveInterval = setInterval(move, speed);
velocity -= 5;
}
if (event.keyCode === 38) {
dw += 2;
body.style.background = 'repeating-linear-gradient( 90deg, white, white ' + dw + 'px, black '+ dw + 'px, black ' + dw*2+'px)'
body2.style.background = 'repeating-linear-gradient( 90deg, white, white ' + dw + 'px, black '+ dw + 'px, black ' + dw*2+'px)'
}
dw += 0.0003*window.innerWidth;
body.style.background = 'repeating-linear-gradient( 90deg, white, white ' + dw + '%, black '+ dw + '%, black ' + dw*2+'%)'
body2.style.background = 'repeating-linear-gradient( 90deg, white, white ' + dw + '%, black '+ dw + '%, black ' + dw*2+'%)' }
if (event.keyCode === 40) {
dw -= 2;
body.style.background = 'repeating-linear-gradient( 90deg, white, white ' + dw + 'px, black '+ dw + 'px, black ' + dw*2+'px)'
body2.style.background = 'repeating-linear-gradient( 90deg, white, white ' + dw + 'px, black '+ dw + 'px, black ' + dw*2+'px)'
}
dw -= 0.0003*window.innerWidth;
body.style.background = 'repeating-linear-gradient( 90deg, white, white ' + dw + '%, black '+ dw + '%, black ' + dw*2+'%)'
body2.style.background = 'repeating-linear-gradient( 90deg, white, white ' + dw + '%, black '+ dw + '%, black ' + dw*2+'%)'
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment