animation - jQuery gallery scrolling effect with ease -

-

so, got page friend , think gallery amazingly done. bad it's in flash ; http://selected.com/en/#/collection/homme/

now, i'm trying replicate effect jquery. i've made loco searches on google 1 think of. zooming picture not problem, problem lies within scrolling, how come @ ease part.

  • i'm looking solution in how make thumbnail animate when scroll page, drag behind , infront of each other in subtle way -

i've got (with lot of whirl3d in jquery-irc channel) scrollup/down part of mouse scrolling goes haywire;

i thought post here i've come many times answers lot of questions , code-errors. first post in stackoverflow , know guys geniuses! give shot! 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      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 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;}


Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c# - Copy ObservableCollection to another ObservableCollection -

-
how copy observablecollection item observablecollection without reference of first collection? here observablecollection item value changes affecting both collections. code private observablecollection<ratemodel> _allmetalrate = new observablecollection<ratemodel>(); private observablecollection<ratemodel> _metalrateondate = new observablecollection<ratemodel>(); public observablecollection<ratemodel> allmetalrate { { return this._allmetalrate; } set { this._allmetalrate = value; notifypropertychanged("metalrate"); } } public observablecollection<ratemodel> metalrateondate { { return this._metalrateondate; } set { this._metalrateondate = value; notifypropertychanged("metalrateondate"); } } foreach (var item in metalrateondate) allmetalrate.add(item); what causing , how can solve it? you need clone object referenced item before it's a...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more