Skip to content

Instantly share code, notes, and snippets.

@smokinjoe

smokinjoe/gist:5806462

Created June 18, 2013 15:41
Show Gist options
  • Save smokinjoe/5806462 to your computer and use it in GitHub Desktop.
Save smokinjoe/5806462 to your computer and use it in GitHub Desktop.
Download ZIP
parallax experiments
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- http://code.flickr.net/2013/06/04/adventures-in-jank-busting-parallax-performance-and-the-new-flickr-home-page/ -->
<meta charset="utf-8">
<title>Parallax</title>
<style type="text/css">
body {
height: 10000px;
}
img {
display: block;
margin-top: 800px;
float: left;
}
</style>
</head>
<body>
<img id="parallax-1" src="http://placecage.com/100/200">
<img id="parallax-2" src="http://placekitten.com/150/150">
<img id="parallax-3" src="http://placekitten.com/200/150">
<img id="parallax-4" src="http://placecage.com/75/150">
<img id="parallax-5" src="http://placekitten.com/200/200">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
window.onscroll = function(e) {
var parallax = document.getElementById('parallax-1');
parallax.style.marginTop = (window.scrollY/2) + 'px';
console.log(parallax.style.marginTop);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment