Add parallax scrolling to a page's background.
-
-
Save williammalo/2278564 to your computer and use it in GitHub Desktop.
paralaxr
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
onscroll=function(){document.body.style.backgroundPosition="0 "+pageYOffset>>1+"px"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
onscroll=function(){document.body.style.backgroundPosition="0 "+pageYOffset>>1+"px"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "paralaxr", | |
"description": "Add parallax scrolling to a page's background.", | |
"keywords": [ | |
"parallax", | |
"css", | |
"background", | |
"3d" | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<title>Foo</title> | |
<div>Expected value: <b>undefined</b></div> | |
<div>Actual value: <b id="ret"></b></div> | |
<script> | |
// write a small example that shows off the API for your example | |
// and tests it in one fell swoop. | |
var myFunction = function(){ /* the code here should be identical to the entry. */ } | |
document.getElementById( "ret" ).innerHTML = myFunction() | |
</script> |
@atk Good idea! Decimals in pixel based positioning result in crazy antialiasing that probably affect performance.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Should be (...>>1) instead of (.../2), because .5px can result in problems in older browsers and ~ IEs. Nice idea, anyway.