衝突的庫：Fullpage.js和ScrollMagic問題

所以我想提出一個垂直視差滾動網站有不同的部分，我想他們之間進行導航。所以我選擇了ScrollMagic用於導航，fullpage.js用於導航。我在我的頭文件中包含fullpage.jsCSS文件。衝突的庫：Fullpage.js和ScrollMagic問題

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.7/jquery.fullPage.css">

問題是當我試圖讓他們兩個。所以我在標籤<body>之間的代碼是

<div id="fullpage"> 
     <div class="spacer s0"></div> 
     <div class="section"> 
      <div id="parallax1" class="parallaxParent"> 
       <div style="background-image: url(img/bcg_slide-1.jpg);"> 
       </div> 
      </div> 
     </div> 
     <div class="spacer s1"> 
      <div class="box2 blue"> 
       <p>Content 1</p> 
      </div> 
     </div> 
     <div class="spacer s0"></div> 
     <div class="section"></div> 
      <div id="parallax2" class="parallaxParent"> 
       <div style="background-image: url(img/bcg_slide-2.jpg);"></div> 
      </div> 
     <div class="spacer s1"> 
      <div class="box2 blue"> 
       <p>Content 2</p> 
      </div> 
     </div> 
     <div class="spacer s0"></div> 

     <div class="section"> 
      <div id="parallax3" class="parallaxParent"> 
       <div style="background-image: url(img/bcg_slide-3.jpg);"></div> 
      </div> 
     </div> 
     <div class="spacer s2"></div> 
     <div id="trigger1" class="spacer s0"></div> 
     <div> 
     <svg height="150" width="460" style="position: absolute; z-index: 10;"> 
      <path id="line" d="M 100 100 l 360 0" stroke="red" stroke-width="3" fill="none" /> 
       <!-- Mark relevant points --> 
       <g stroke="black" stroke-width="3" fill="black"> 
       <circle id="pointA" cx="100" cy="100" r="3" /> 
       <circle id="pointB" cx="450" cy="100" r="3" /> 
       </g> 
       Sorry, your browser does not support inline SVG. 
      </svg> 
     </div> 
     <div id="fp-nav" class="right" style="margin-top: -33.5px;"> 
      <ul id="nav"> 
       <li> 
        <a href="#parallax1" class=""><span></span></a> 
        <div class="fp-tooltip right">First</div> 
       </li> 
       <li> 
        <a href="#parallax2" class=""><span></span></a> 
        <div class="fp-tooltip right">Second</div> 
       </li> 
       <li> 
        <a href="#parallax3" class=""><span></span></a> 
        <div class="fp-tooltip right">Third</div> 
       </li> 
      </ul> 
     </div> 
    </div>

，並在底部我剛剛結束我</body>標籤

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script> 
<script src="js/jquery.fullPage.min.js"></script> 
<script src="js/_main.js"></script> 
<script src="js/fullpage.js"></script>

我想有一個平滑滾動到部分之前宣佈我的jQuery庫。也許還有其他方法可以做到這一點。我definetly需要Scollmagic，我會畫SVG's，做需要觸發

來源

2016-02-10 Andrejs Gubars

FullPage.js已經有平滑滾動到部分功能，我覺得你不需要使用ScrollMagic這一點。 – Pedram

嗯，我需要爲ScrollMagic SVG繪圖和其他東西以備將來 –

嗯，事實上，我發現一個tweek如果我設置'滾動條：TRUE'爲'fullpage.js'它導航順利，但現在我不能用我的鍵盤或鼠標 –

如果你看一看fullpage.js FAQs其他動畫，你會發現這一點：

視差不fullpage.js工作。

簡短的回答：使用fullPage.js的scrollBar:true選項或autoScrolling:false，如果你不想使用自動滾動功能。

說明：視差以及許多其他取決於站點滾動的插件會偵聽javascript的scrollTop屬性。 fullPage.js實際上並不滾動網站，但它會更改網站的頂部或translate3d屬性。僅當使用fullPage.js選項scrollBar:true或autoScrolling:false時，它實際上將以可供scrollTop屬性訪問的方式滾動網站。

來源

2016-02-10 14:25:03 Alvaro

滾動太棒了:)我接受它作爲答案。我實際上在20分鐘前發現了這個，花了我一段時間。 –

@AndrejsGubars任何建議，以便更容易找到？ – Alvaro

其實我一直在玩''fullpage.js'的官方文檔設置，並且神奇地它工作:)我發現它在github上的問題之一https://github.com/alvarotrigo/fullPage.js/issues/150如果你看最後的評論，作者解釋了該怎麼做。 –

衝突的庫：Fullpage.js和ScrollMagic問題

回答

相關問題