I want to have a jQuery mouse scroll animation effect similar to the site https://onlycoin.com/ [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist

Closed 8 years ago.

Improve this question

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.

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