GeezerVison is showing github.com — sistine/index.html at master · bijection/sistine

Expand file tree

index.html

Copy path

More file actions

Latest commit

History

64 lines (52 loc) · 1.13 KB

index.html

Copy path

File metadata and controls

64 lines (52 loc) · 1.13 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

<!DOCTYPE html>

<html>

<head>

<title>SISTINE | BETTER THAN SLICED BREAD</title>

body, html {

position: absolute;

height: 100%;

width: 100%;

margin: 0;

}

#main {

height: 100%;

background: url(sistine.jpg);

transition: background-position 0.1s linear;

}

</style>

</head>

<body>

var scale = .8

var bgsize = 3548

var xoffset = 2210;

var yoffset = 900;

var clicked = false

var mousex = 0

var mousey = 0

document.addEventListener('mousemove', function(e){

console.log(bgsize * scale)

mousex = e.clientX

mousey = e.clientY

})

document.addEventListener('mousedown', function(e){

clicked = true

})

document.addEventListener('mouseup', function(e){

clicked = false

})

requestAnimationFrame(function tick(){

requestAnimationFrame(tick)

if(!clicked){

scale = Math.max(scale*.95, .8)

} else {

scale = Math.min(scale*1.05, 3)

}

main.style['background-position'] = (mousex + xoffset* scale)+'px '+(mousey + yoffset* scale)+'px'

main.style['background-size'] = (bgsize* scale)+'px'

})

</script>

</body>

</html>