jQuery gallery scrolling effect with ease
Posted
by
Sebastian Otarola
on Stack Overflow
See other posts from Stack Overflow
or by Sebastian Otarola
Published on 2012-06-29T01:34:01Z
Indexed on
2012/06/29
3:16 UTC
Read the original article
Hit count: 240
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;}
© Stack Overflow or respective owner
