1

巨大な画像とその下にコンテンツがあるインデックスページで、スクロールマジックを使用して基本的な 2 レイヤーの視差効果を作成しようとしています。ドキュメントとソースコードを数回見ましたが、機能していないようで、何が欠けているのかわかりません。

html:

<div class="row zero-padding parallaxParent" id="parallax1">
  <div class="col-xs-12 zero-padding index--background" style="background-image: url('{{ backgroundimage.picture.url }}')">
    <h1>MACRO FOODS</h1>
    <h2>Healthy made easy</h2>
  </div>
</div>


<div class="row zero-padding">
  <div class="col-xs-12 index--title">
    <p> What is Macro Foods?</p>
  </div>
</div>
<div class="row zero-padding index--blockwrap">
  <div class="col-xs-12 col-md-8">
    <p class="index--body">{{ whatismacrofoods.text }}
  </div>
  <div class="col-xs-12 col-md-4">
    <img class="index--image" src="{{ imagesindex1.picture.url }}">
  </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<!--Custom-->
<script src="{% static 'scripts/main.js' %}"></script>
<script src="{% static 'scripts/parallax.js' %}"></script>

CSS:

.parallaxParent {
  height: 100vh;
  overflow: hidden;
}

.parrallaxParent > * {
  height: 200%;
  position: relative;
  top: -100%;
}

視差.js:

//Parallax Scrollmagic
var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

new ScrollMagic.Scene({triggerElement: "#parallax1", duration: "120%"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);

new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);

new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
4

1 に答える 1

2

元の投稿の編集後に編集:

TweenMax.js私はあなたのコードで見たり参照したりしていませんanimation.gsap.js-それとも他のスクリプトに何らかの形で含まれていますか?

2 番目のコメントの後に別の追加:

TweenMax.jsこのように参照できます

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

animation.gsap.jsこのような：

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>

ただし、「scrollmagic」フォルダーの「plugins」フォルダーにもあるはずです。

于 2015-12-16T02:38:46.467 に答える