2016-02-11 93 views
1

我試圖在fullpage.js插件如何添加部分之間的元素Fullpage.js

代碼段之間添加一些視差效果的背景是這樣的

<div class="fallpage"> 
 
    <div class="section">content</div> 
 
    <div class="parallex-background"></div> 
 
    <div class="section">content</div> 
 
    <div class="parallex-background"></div> 
 
    <div class="section">content</div> 
 
</div>

一切工作正常,和fullpage.js忽略那些視差部分,除了滾動部分...鼠標不再工作或鍵盤控制,邊點和菜單工作正常

如果我可以把這個插件忽略鼠標滾輪滾動段和工作鍵盤控制之間的這些視差的背景,那將是巨大的:)

和遺憾,對任何拼寫錯誤

回答

1

你可以這樣做。 Fullpagejs只會預測部分之間的部分。

你可以做什麼,而不是玩fullpage.js選項。用它們作爲部分,使用fp-auto-height全班學生,所以他們不會全屏幕,並使用一些回調,迫使fullpage.js跳他們當你即將到達他們:

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    onLeave: function(index, nextIndex, direction){ 
     var destinationToIgnore = $('.section').eq(nextIndex -1).hasClass('ignore'); 

     if(destinationToIgnore){ 
      var destination = (direction === 'down') ? nextIndex + 1 : nextIndex - 1 
      $.fn.fullpage.moveTo(destination); 
     } 
    } 
}); 

我VE編碼的方式,你只需要使用類ignore在部分強制fullpage.js忽略它這個腳本,例如:

<div class="section fp-auto-height ignore"> 
    <div class="parallax"> 
     PARALLAX 
    </div> 
</div> 

Reproduction online

現在你可以給我一個了 - 投票,擁抱,棒棒糖,甚至是捐贈! :)

+0

不要忘了接受答案,並upvote它! :)這對其他人也很有用! – Alvaro

+0

事實證明,我真正需要的是fp-auto-height類,並且先生您是天才,謝謝!因爲我使用的是點,它爲每一個新的部分添加了一個點,即使是視差的點,我也必須使用它來處理:nth-​​child(偶數){display:none;} 並在每兩個點之間添加視差錨點,所以它進入右側部分,並在每兩個導航工具提示之間添加視差,以顯示正確的部分名稱。 我的高度讚賞的朋友:) –

相關問題