jQuery gallery scrolling effect with ease
- by Sebastian Otarola
So, I got this page from a friend and I think the gallery is amazingly done. Too bad it's in Flash ;
http://selected.com/en/#/collection/homme/
Now, I'm trying to replicate the effect with jQuery. I've made all the loco searches on google one could think of. Zooming the picture is not a problem, the problem lies within the scrolling, how they come together at the ease part.
I'm looking for solution in how to make the thumbnail animate when you scroll the page, they drag behind and infront of each other in a very subtle way -
I've got (With a lot of help from Whirl3d in the jQuery-irc channel) this for the scrollup/down part of the mouse but the scrolling goes haywire;
I Thought I post it here where I've come many times to get answers to a lot of questions and code-errors. This is my first post in stackoverflow and I know you guys are geniuses! Give it a shot! Thanks in advance!
jQuery Part
$(document).ready(function() {
var fronts=$(".front");
var backs=$(".back");
var tempScrollTop, currentScrollTop = 0;
$(document).scroll(function () {
currentScrollTop = $(document).scrollTop();
if (tempScrollTop < currentScrollTop) {
//Scroll down
fronts.animate({marginTop:"-=100"},{duration:500, queue:false, easing:"easeOutBack"});
backs.animate({marginTop:"-=100"}, {duration:300, queue:false, easing:"easeOutBack"});
console.log('scroll down'); }
else if (tempScrollTop > currentScrollTop) {
//scroll up
fronts.animate({marginTop:"+=100"},{duration:500, queue:false, easing:"easeOutBack"});
backs.animate({marginTop:"+=100"}, {duration:300, queue:false, easing:"easeOutBack"});
console.log('scroll up');
}
tempScrollTop = currentScrollTop ;}) ;});
The HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.paigeharvey.net/assets/js/jquery.easing.js"></script>
<script type="text/javascript" src="gallery.js"></script>
<title>Parallax testing image gallery</title>
</head>
<body>
<div class="container">
<div class='box front'>First Group</div>
<div class='box back'>First Group</div>
<div class='box front'>First Group</div>
<div class='box back'>First Group</div>
<br style="clear:both"/>
<div class='box front'>Second Group</div>
<div class='box back'>Second Group</div>
<div class='box front'>Second Group</div>
<div class='box back'>Second Group</div>
<br style="clear:both"/>
<div class='box front'>Third Group</div>
<div class='box back'>Third Group</div>
<div class='box front'>Third Group</div>
<br style="clear:both"/>
</div>
</body>
And finally the CSS Part
.container {margin: auto; width: 410px; border: 1px solid red;}
.box.front{border: 1px solid red;background-color:Black;color:white;z-Index:500;}
.box.back {border: 1px solid green;z-Index:300;background-color:white;}
.box {float:left; text-align:center; width:100px; height:100px;}
