鴻溝頁面分爲兩個部分，滾動兩個部分成相反的方向

Question

我想設計一個網頁，這樣的...誰能幫助me..how做到這一點

演示是在這裏http://www.valentinagallo.us/site/#/home

任何幫助，將不勝感激

Answer 1

我創建了特別的基本腳本。請參閱我的解決方案的想法。

首先必須創建固定位置 DIV並設置的z-index隱藏真實內容。現在，您可以創建帶有兩個幻燈片部分的DIV：左側和右側動態顯示並放入內容。

觀看演示：http://jsfiddle.net/luckyjquery/q2hLfo2q/

注意：這是基本的代碼向你展示我的想法。我可以爲你開發它。

的HTML：

<button>Change slide</button> 
<div class="content"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

的CSS：

.content { 
    position: relative; 
    height: 350px; 
    width: 90%; 
    overflow: hidden; 
} 
.content > div { 
    position: absolute; 
    height: 100%; 
    width: 50%; 
    top: 0px; 
} 
.content .left{ 
    left: 0px; 
    background-color: #d93434; 
} 
.content .right{ 
    right: 0px; 
    background-color: #b3d934; 
} 

jQuery的：

;(function ($) { 
    //Functions 
    var fns = { 
     /*Select basic elemments */ 
     button: $('button'), 
     leftBox: $('.left'), 
     rightBox: $('.right'), 
     /* Initialize */ 
     init: function(){ 
      //Click the button 
      fns.button.on('click', function(e){ 
       e.preventDefault(); 
       //Change slide 
       fns.changeSlide(); 
      }); 
     }, 
     /*Animate the DIVs*/ 
     changeSlide: function(){ 
      //Animate the left div 
      fns.leftBox.animate({ 
       top: '-='+fns.leftBox.height(), 
       opacity: 0.0 
      }, 255, function(){ 
       /* You can change content in this place*/ 
      }).animate({ 
       top: 0, 
       opacity: 1.0 
      }, 255); 
      //Animate the right div 
      fns.rightBox.animate({ 
       top: '+='+fns.leftBox.height(), 
       opacity: 0.0 
      }, 255, function(){ 
       /* You can change content in this place*/ 
      }).animate({ 
       top: 0, 
       opacity: 1.0 
      }, 255); 
     } 
    }; 
    //Start 
    fns.init(); 

})(jQuery); //The end