-1

As mentioned in the title, https://onlycoin.com/ has a smooth mouse scroll effect of the cards getting animated when we scroll.

I want to achieve something similar to that. I have made the webpage. Instead of the cards, I have mobile phones that will animate in that .

Can anyone help me on how I should proceed to do it ?

I have already done the HTML coding on the page and I am really confused with the jquery.animate(); function.

Therefore, the only reference site i know is the one I posted above.

I am a novice in jquery. Thanks for your help.

prat1kk
  • 408
  • 5
  • 12

1 Answers1

1

It's pretty hard to provide you with a complete explanation, but I put this together to get you started:

http://jsfiddle.net/Ms7gw/

HTML

<div id="container">
<div class="box" id="right"></div>
<div class="box" id="center"></div>
<div class="box" id="left"></div>
</div>

CSS

#container {height: 1000px; width: 1000px; background-color: #000;}
.box {width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background-color: #ff0000;}
#right {background-color: #aa0000;}
#left {background-color: #aa0000;}

JS

var lastScrollTop = 0;
var leftBox = $('#left').position();
var rightBox = $('#right').position();

$(window).scroll(function(event){
    var st = $(this).scrollTop();
    $('#right').css({left: rightBox.left + st});
    $('#left').css({left: leftBox.left - st});
    lastScrollTop = st;
});
Magnus Engdal
  • 5,446
  • 3
  • 31
  • 50
  • Thanks. This was the idea I was looking for.Now, I can customise it according to the design and effects I have in mind. – prat1kk Dec 21 '13 at 03:32
  • Glad I could help. Please accept the answer with the checkmark to the left if it was considered a solution to your problem :) – Magnus Engdal Dec 21 '13 at 14:34