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;}
