Skip to content

Instantly share code, notes, and snippets.

@knorthfield

knorthfield/parallax.html

Last active October 6, 2015 08:28
Show Gist options
  • Save knorthfield/2965940 to your computer and use it in GitHub Desktop.
Save knorthfield/2965940 to your computer and use it in GitHub Desktop.
Download ZIP
Throttled jQuery Parallax
Raw
parallax.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Parallax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(function(){
var $scroll = ($.browser.mozilla || $.browser.msie) ? $('html') : $('body'),
$scrollItems = $('[data-scroll-speed]').css('position','relative'),
scrolled = false;
$(window).scroll(function() {
scrolled = true;
});
setInterval(function() {
if ( scrolled ) {
scrolled = false;
$scrollItems.each(function() {
var $this = $(this),
offset = parseInt( parseFloat($this.data('scroll-speed')) * $scroll.scrollTop() ) * -1;
$this.css('top', offset);
});
}
}, 40);
});
</script>
<style>
body {
height: 2000px;
}
div {
background: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
<div style="margin-left: 300px;" data-scroll-speed="1.05"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment