Horizontal parallax javascript with easing and stellar.js

Question

I am trying to create a horizontal scrolling parallax site. So far, everything is working, except for the weakening part. Here is the code:

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script> <script type='text/javascript' src='./js/jquery.mousewheel.js'></script> <script type='text/javascript' src='./js/jquery.easing.js'></script> <script type='text/javascript' src='./js/jquery.stellar.min.js'></script> <script type='text/javascript'> $(function() { $("body").mousewheel(function(event, delta) { $('html body').animate({ scrollLeft: $('div.ease').offset.left - 40}, 6000, 'easeInOutExpo'); this.scrollLeft -= (delta * 30); event.preventDefault(); }); $.stellar({ horizontalScrolling: true }); }); </script> <style type="text/css" style="display: none !important;"> * { margin: 0; padding: 0; } body { overflow-x: hidden; } </style> <div style="width: 3000px;"> <div class="main" style="height: 100%; width: 1000px; background-color: #ff00ff; float: left; position: relative;"> <div class="ease" style="font-size: 55px; color: #ffffff; margin-top: 30px; margin-left: 300px; position: relative;" data-stellar-ratio="3" >a</div> <div class="ease" style="font-size: 55px; color: #ffff00; margin-top: 95px; margin-left: 600px; position: relative;" data-stellar-ratio="0.9">b</div> <div class="ease" style="font-size: 55px; color: #0f0fff; margin-top: 200px; margin-left: 450px; position: relative;" data-stellar-ratio="0.9">c</div> </div> <div class="main" style="height: 100%; width: 1000px; background-color: #ffff00; float: left; position: relative;"> <div class="ease" style="font-size: 55px; color: #ffffff; margin-top: 30px; margin-left: 300px; position: relative;" data-stellar-ratio="0.9" data-stellar-horizontal-offset="10">d</div> <div class="ease" style="font-size: 55px; color: #ff00ff; margin-top: 95px; margin-left: 600px; position: relative;" data-stellar-ratio="0.15" data-stellar-horizontal-offset="30">e</div> <div class="ease" style="font-size: 55px; color: #0f0fff; margin-top: 200px; margin-left: 450px; position: relative;" data-stellar-ratio="0.55" data-stellar-horizontal-offset="20">f</div> </div> </div> 

To try (without loosening), just delete the line

 $('html body').animate({ scrollLeft: $('div.eases').offset.left - 40}, 6000, 'easeInOutExpo'); 

How to add easing to scroll?

I am trying to achieve something like this: http://hotdot.pro/en/

Thanks!

Answer 1

http://jsfiddle.net/67grK/1/

I noticed that in your code you are calling $('div.ease').offset.left This is where your code breaks. I updated the script to have the correct code. It should be $('.ease').offset().left (It is believed that bad practice exceeded the qualifications of your css selectors, so you can leave the div from it)

The animation code should be robust, however your logic for choosing a location for the animation still requires some work. You select $('div.ease') and do not indicate which index of references you are referring to, so jquery takes the first node in the DOM.

Secondly, every time a mouse event is logged, he tries to revive it. I would untie the mouse scroll and in the callback function reprogrammed the mouse scroll and update some kind of counter to select which index you want to jump to.

This is a really good example of what you are trying to create.

http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/