Scroll Magic добавить плагин индикатора не работает

Недавно я начал использовать библиотеку ScrollMagic. Когда я попытался использовать плагин addIndicators в своей программе, он не работал должным образом. Индикатор триггера задается очень маленьким синим тиком (то же самое с индикаторами начала и конца). Мой код выглядит следующим образом.Scroll Magic добавить плагин индикатора не работает

HTML:

<body> 
    <div id="container"> 
     <section id="landing">                
     </section> 
     <section id="home">    
     </section> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> 
</body>

CSS:

  body, html { 
       height: 100%; 
       margin: 0; 
       padding: 0; 
      } 
      body { 
       width: 300%; 
       overflow-y: hidden; 
       overflow-x: scroll; 
       margin: auto; 
       white-space: nowrap; 
       font-size: 0; 
      } 
      #container { 
       height: 100%; 
       width: 100%; 
       display:block; 
      } 
      section { 
       position: relative; 
       display: inline-block; 
       text-align: center; 
       height: 100vh; 
       width: 150vw; 
      } 
      #landing { 
       background-color: yellow; 
      } 
      #home { 
       background-color: orange; 
      }

JQuery:

var controller = new ScrollMagic.Controller({vertical: false}); 
var scene = new ScrollMagic.Scene({triggerElement: "#landing", duration: "150%", triggerHook: 0}) 
      .setPin("#landing") 
      .addIndicators()     
      .addTo(controller);

Я попробовал код без контейнера тоже, но это не сработало. Что мне нужно добавить, или какой неправильный порядок кода я написал?

https://jsfiddle.net/zjapLcx4/1/

источник

2017-01-03 Quasar

Не уверен, что вы просите, индикаторы на месте. –

Действительно? Они не видны в моем браузере – Quasar

Точно, они видны как маленькие тики. По умолчанию индикатор триггера должен иметь имя «триггер», правильно? Если нет, как его добавить. Параметр .addIndicators ({name: 'trigger'}) не работает – Quasar

Вы были font-size: 0;, (я взял на себя смелость, чтобы очистить свой код немного позже). Я также сменил триггер на #home вместо просто для ясности триггера, индикаторов начала и конца.

jsfiddle

HTML

<div id="container"> 
    <section id="landing"></section> 
    <section id="home"></section> 
</div>

CSS

body { 
    width: 300%; 
    overflow-y: hidden; 
    overflow-x: scroll; 
    white-space: nowrap; 
}

var controller = new ScrollMagic.Controller({ 
    vertical: false 
}); 

var scene = new ScrollMagic.Scene({ 
    triggerElement: "#home", 
    duration: "150%" 
    }) 
    .setPin("#home") 
    .addIndicators() 
    .addTo(controller);

источник

2017-01-03 12:21:55

Вау! Я не знал, что размер шрифта также применяется к этому. Я добавил его из-за грязного белого пространства, которое появляется между div. Могу ли я найти способ обойти это и по-прежнему отображать имя индикатора? – Quasar

@Quasar хорошо это известная проблема, связанная с 'inline-block', можете ли вы использовать' flex' или 'block'? –

flex и блок полностью разрушают мой сайт (это всего лишь фрагмент фактического). Inline-flex имеет ту же проблему. Кстати, как inline-flex отличается от встроенного блока? – Quasar

Scroll Magic добавить плагин индикатора не работает

ответ

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