Skip to content

Instantly share code, notes, and snippets.

@bradfordcp

bradfordcp/.gitignore

Created August 7, 2011 02:54
Show Gist options
  • Save bradfordcp/1130007 to your computer and use it in GitHub Desktop.
Save bradfordcp/1130007 to your computer and use it in GitHub Desktop.
Download ZIP
Scratch work on a neat idea
Raw
index.html
<html>
<head>
<title>Shifter</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" href="styles/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="scripts/shifter.js"></script>
</head>
<body>
<section id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce orci tortor, placerat nec facilisis et, pellentesque id odio. Etiam nec leo ligula, semper vehicula arcu. Nam aliquam metus imperdiet turpis condimentum vel lacinia lacus sagittis. Cras euismod porttitor lacus, eu rhoncus velit tristique eget. Praesent venenatis semper nisl, ac posuere diam pharetra hendrerit. Nunc vitae nisl metus, nec feugiat mi. Aliquam ac tortor quam, in porta odio. Ut sit amet purus dolor. Cras dui tortor, malesuada nec vulputate ac, euismod sit amet dolor. Vivamus volutpat, diam nec pretium pharetra, velit urna elementum mauris, et rutrum nibh ipsum quis erat. Aenean fringilla, nisl quis volutpat egestas, nunc tortor ultrices odio, ac dapibus mauris turpis vel quam. Nunc auctor cursus lacus eu pretium. Vivamus commodo, nisi eget commodo faucibus, justo eros volutpat dolor, ac tristique lorem diam eget lectus. Nam a magna velit.
</p>
<section id="coffee_wrapper">
<img src="images/3.png" />
<section id="map_wrapper">
<img src="images/2.png" />
<section id="cup_wrapper">
<img src="images/1.png" />
</section>
</section>
</section>
</section>
</body>
</html>
Raw
shifter.js
// // On page load regist for events
// $(document).ready(
// function () {
// // Manually position the images absolutely above the blocker divs with a higher z-index
// $("section.blocker img").each(function (ele) {
// var pos = $(ele).position();
//
// $(ele).css({
// position: 'absolute',
// zIndex: 1000,
// top: pos.top,
// left: pos.left
// });
// });
//
// $(document).scroll(function (e) {
// // Determine how much they have scrolled
// var scroll_distance = $(document).height() - ($(window).height() + $(this).scrollTop());
//
// // Determine how much we need to shift the blocker images
// var shift_distance = scroll_distance / 20;
//
// // Iterate over the blockers and shift them
// $("section.blocker img").each(function (ele) {
// // Grab the position of the blocker div as it never moves
// var pos = $(ele).parent().position();
//
// // Position the image, possibly wait until they have scrolled a certain distance
// $(ele).css({
// position: 'absolute',
// top: pos.top - shift_distance,
// left: pos.left
// });
// });
// });
// }
// );
$(document).ready(
function () {
var cup_orig_pos = $("#cup_wrapper").position();
var map_orig_pos = $("#map_wrapper").position();
$(document).scroll(function (e) {
var scroll_distance = $(this).scrollTop();
var shift_distance = scroll_distance / 3;
$("#cup_wrapper").css({
top: "" + ((cup_orig_pos.top + (scroll_distance / 3))) + "px"
});
$("#map_wrapper").css({
top: "" + ((map_orig_pos.top + (scroll_distance / 5))) + "px"
});
});
}
);
Raw
style.css
#wrapper {
height: 2000px;
background: #ff0000;
width: 50%;
margin: 0px auto;
position: relative;
}
#coffee_wrapper {
width: 165px;
height: 288px;
overflow: hidden;
position: relative;
}
#map_wrapper {
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}
#cup_wrapper {
position: absolute;
top: 0px;
left: 0px;
z-index: 20;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment