<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- demo → http://latitudu.com/journal/tempat-bergantung -->
<style>
body {
background:black url('http://lorempixel.com/1250/1250/nature') no-repeat 50% 0;
background-size:100% auto;
color:white;
}
</style>
</head>
<body>
<p>Dummy text goes here...</p>
<script>
var body = document.body, s;
window.addEventListener("scroll", function() {
s = Math.max(body.scrollTop, body.parentNode.scrollTop);
body.style.backgroundPosition = '50% ' + Math.round(s / 5) + 'px';
}, false);
</script>
</body>
</html>
Update CSS `background-position` value in the `body` tag on every scroll event, divided by `5`.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.