The Simplest Parallax Background

<!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.