Fullpage JS - 帶有迷你滑塊的全屏滑塊

Question

我想用FullPage滑塊複製http://www.apple.com/iphone/why-theres-iphone/。主背景幻燈片非常簡單。現在我需要讓電話部分滑動。

我的頁面到目前爲止：http://scram.rambo.co.za/

我就此代碼遠遠看去，像這樣：

<div id="fullpage"> 
    <div class="section" id="section0"> 
    </div> 
    <div class="section" id="section1"> 
    </div> 
    <div class="section" id="section2"> 
    </div> 
    <div class="section" id="section3"> 
    </div> 
</div> 

<figure class="iphone"> 
    <div class="iphone-device"> 
     <div class="iphone-content-wrapper"> 
      <div class="phone-screen screen1"> 
       <div class="screen-wrapper"></div> 
      </div> 
      <div class="phone-screen screen2"> 
       <div class="screen-wrapper"></div> 
      </div> 
      <div class="phone-screen screen3"> 
       <div class="screen-wrapper"></div> 
      </div> 
     </div> 
    </div> 
</figure> 

<script> 
$(document).ready(function() { 
    $('#fullpage').fullpage({ 
     'verticalCentered': false, 
     'css3': true, 
     'navigation': true, 
     'navigationPosition': 'left' 
    }); 
}); 
</script> 

什麼想法？

Answer 1

使用回調函數fullpage.js提供（onLeave，afterLoad）或body上添加的狀態類fp-viewing-X-Y在手機上執行動畫。

查看this tutorial瞭解更多信息。