Question

我只是想在我的索引页面上创建一个基本的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%;
}

parallax.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);

Answer 1

编辑原始帖子后编辑：

我没有看到代码中引用的dist和> print(distVector) [1] 0.1000000 0.2000000 1.7320508 1.8547237 1.9697716 3.4641016 3.7094474 0.2236068 1.6763055 [10] 1.7916473 1.9209373 3.4073450 3.6455452 1.6248077 1.7549929 1.8547237 3.3526109 3.6055513 [19] 0.2000000 0.2828427 1.7320508 1.9899749 0.3464102 1.6248077 1.8547237 1.5099669 1.8000000 [28] 0.4000000 > print(dist(rawData)) 1 2 3 4 5 6 7 2 0.1000000 3 0.2000000 0.2236068 4 1.7320508 1.6763055 1.6248077 5 1.8547237 1.7916473 1.7549929 0.2000000 6 1.9697716 1.9209373 1.8547237 0.2828427 0.3464102 7 3.4641016 3.4073450 3.3526109 1.7320508 1.6248077 1.5099669 8 3.7094474 3.6455452 3.6055513 1.9899749 1.8547237 1.8000000 0.4000000 - 或者是否以其他方式包含在其他脚本中？

第二次评论后的另一个补充：

TweenMax.js可以像这样引用

animation.gsap.js

像这样的

TweenMax.js：

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

但你也应该在＆＃34;插件＆＃34;中找到它。你的＆＃34; scrollmagic＆＃34;的文件夹文件夹中。

滚动魔术视差问题

1 个答案: