0

スクロール時にアニメーションが発生するようにScrollMagicを使用しています。私はこれにあまり精通していません。まだ学習過程にあります。

そのため、パーツが分解され、スクロール上で組み合わされて飛行機を形成する飛行機があります。

たとえば、左翼、右翼、機体、尾翼、左プロペラ、右プロペラ、これらすべてのパーツが分離され、さまざまな方向から飛行機を形成しています。

これを 1366x768 の画面解像度で動作させることができました。しかし、別の画面解像度で開くと、パーツが正しい位置に組み立てられません。 http://jsfiddle.net/jv5s6f0j/1/

HTML - (各 ID には背景画像があります)

<section class="airplane-container">
  <div id="plane-left-wing"></div>
  <div id="plane-right-wing"></div>
  <div id="plane-propeller-left"></div> 
  <div id="plane-propeller-right"></div> 
  <div id="plane-body"></div> 
  <div id="plane-tail"></div> 
</section><!--/airplane-container-->

JS-

var controller = new ScrollMagic.Controller();
var airplane_tween = new TimelineMax()
            .to("#plane-left-wing", 1, {left:"31.2%" , top:"-18%"  },0)
            .to("#plane-right-wing", 1, {right:"31.2%" , top:"-18%"},0)
            .to("#plane-body", 1, {top:"-30%"},0)
            .to("#plane-tail", 1, {top:"-48%" },0.5)
            .to("#plane-propeller-left", 1, {left:"19%" , top:"-22%" },0)
            .to("#plane-propeller-right", 1, {right:"19%" , top:"-22%"},0) ;


var scene1 = new ScrollMagic.Scene({triggerElement: ".airplane-container" , duration: 200})
            .setTween(airplane_tween)
            // .setPin("section.airplane-container")
            // .addIndicators({name: "timeline"}) // add indicators (requires plugin)
            .addTo(controller);

固定ピクセルの代わりにパーセンテージを使用してみましたが、問題は解決しません。助けてください！

4

1 に答える 1

2

私はCSSを見ることができないので（おそらくこの部分だけにcssを入れてください）、それ以上のことはわかりません。これを言って、scrollMagic を使った私のアプローチを説明しようと思います。

  1. 絶対要素を保持する相対コンテナーを作成します (ここで幅と高さを忘れないでください)。
  2. 絶対要素では、左または右、上または下をそのまま使用しないでください。また、「%」をそのように使用しないでください。ニーズに適合しません。

これを試してください（左翼の例）：

  1. 寸法を指定します (幅と高さ、この例では x と y にします)

  2. 左に移動: 50% (これにより、要素の左側が中央に配置されます)

  3. 中央にmargin-left: -x/2配置するには（これにより中央に配置されます）

このアプローチを使用して、ステップ 3 (負のマージン値) を使用して要素を配置します (注:を使用しない margin-left: -x/2でください。中央に配置するだけです。px 値で必要な数を使用してください)。

そして、スクロールマジックで余白だけをアニメーション化します

上位または下位の値についても同じことを行います

これがあなたを助けることを願っています

于 2015-10-20T10:01:50.517 に答える