Конфликтующие библиотеки: Fullpage.js и ScrollMagic issue

Так что я делаю вертикальный прокручивающий веб-сайт с разными разделами, и я хочу перемещаться между ними. Поэтому я выбрал ScrollMagic для параллакса и fullpage.js для навигации. Я включил fullpage.jsCSS файл в мой заголовок.Конфликтующие библиотеки: Fullpage.js и ScrollMagic issue

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

И на дне я объявляю мои библиотеки Jquery как раз перед закрытием моего </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>

Я хочу, чтобы иметь гладкую прокрутку до раздела. Возможно, другие способы сделать это. Я определенно нужно Scollmagic как я буду рисовать SVG's и делать другие анимации, которые требуют триггеров

источник

2016-02-10 Andrejs Gubars

У FullPage.js уже есть функция Smooth Scroll to section, я думаю, для этого вам не нужно использовать ScrollMagic. – Pedram

Ну, мне нужен ScrollMagic для рисования SVG и другие вещи для будущего –

Ну, на самом деле я нашел один tweek, если я установил 'scrollBar: true' для' fullpage.js', он плавно переходит, но теперь я не могу прокручивать свою клавиатуру или мышь –

Если вы посмотрите на fullpage.js FAQs вы найдете это:

Parallax не работает с fullpage.js ,

Короткий ответ: использовать scrollBar:true вариант для fullPage.js или autoScrolling:false, если вы не хотите использовать авто-прокрутки функции.

Пояснение: Параллакс, а также многие другие плагины, которые зависят от прокрутки сайта, прослушивают свойство scrollTop javascript. 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 issue

ответ

Смежные вопросы