0

GSAP と ScrollMagic がどのように連携するかを理解しようと試み始めたばかりで、このクールなガイド サイトhttp://scrollmagic.io/examples/basic/simple_velocity.htmlのソース コードをフォローアップすると、私の環境では機能しません。コードペン。

これは、黒い線がウィンドウの上部に達した後に「scene2」を拡大する意図を持った私のものです: http://codepen.io/anon/pen/xZxZXm

これは私のjsがどのように見えるかです:

var controller = new ScrollMagic.Controller
var scene1 = new ScrollMagic.Scene({
  triggerElement:'#pinned-trigger1',
  duration:$(window).height()-50,
  triggerHook:0,
  reverse:true
}).setPin('#pinned-element1');

//I cannot scale it up here.
    var scene2 = new ScrollMagic.Scene({triggerElement: "#scale-trigger",triggerHook:0, duration: 300})
                .setTween("#fstpin", {borderTop: "30px solid white", backgroundColor: "blue", scale: 4})


controller.addScene([
  scene1,
  scene2
]);

html は次のようになります。

<main class="full-screen" role="main">
  <section class="full-screen blue ">
    <div id='scale-trigger'></div>
     <div id='fstpin'>
      <div id='scaled-element'>
        <h1>Basic Pin</h1>
        <p>Elements are pinned for their respective pixel value set as the duration and released again.</p>
      </div>
    </div>
  </section>

  <section id="pinned-trigger1" class="full-screen orange">
    <div id="pinned-element1">
     <p>This element will be pinned </p>
    </div> 
  </section>

  <section id="pinned-trigger2" class="full-screen red">
    <div id="pinned-element2">
      <p>This element should disapeared</p>
    </div>
  </section>

  <section class="full-screen blue">
    <div>
      <p>Section Four!</p>
    </div>
  </section>
</main>
4

1 に答える 1

1

で作業するには、animation.gsap.js 依存関係が不足しているように思えます。ScrollMagicTweenMax

これがあなたの二股ペンです。Pen SettingsメニューからをクリックしSettingsて (またはgear各編集パネルの下にあるアイコンをクリックして) を確認し、タブの下にあるすべての外部 JS ファイルを確認しますJavaScript。

于 2015-12-04T04:12:39.137 に答える