javascript與easing和stellar.js的水平視差

我試圖創建一個水平視差滾動網站。現在一切正在開展，除了緩和部分。下面是代碼：javascript與easing和stellar.js的水平視差

<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>

要嘗試這個（不寬鬆）只是刪除線

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

我如何添加回落至滾動？

我想實現這樣的：http://hotdot.pro/en/

謝謝！

來源

2013-07-27 Henrique Gonçalves

你要把這提琴一個很好的例子 –

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

我注意到，在你的代碼，你叫$('div.ease').offset.left這是你的代碼是打破。我更新了小提琴以獲得正確的代碼。它應該是$('.ease').offset().left（這被認爲是錯誤的做法，超過您的CSS選擇器的資格，所以你可以離開它的div）

動畫代碼應該是堅實的，但是，你的邏輯選擇動畫仍然需要一些工作。您選擇$('div.ease')並且不指定您引用的索引的哪個索引，因此jquery假定DOM中的第一個節點。其次，每當一個鼠標事件被註冊時，它就試圖對它進行動畫處理。我將取消綁定鼠標滾動並在回調函數中重新綁定鼠標滾動，並更新某種計數器以選擇您想要轉到的索引。

這是你想怎麼打造

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

來源

2013-12-12 06:09:46 adambullmer

javascript與easing和stellar.js的水平視差

回答

相關問題