滚动魔法视差问题
Scroll Magic Parallax Problems
我只是想在我的索引页面上使用 scrollmagic 创建一个基本的 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);
编辑原始 post 后编辑:
我没有看到您的代码中引用了 TweenMax.js
和 animation.gsap.js
- 或者其他脚本中是否以某种方式包含了它们?
第二次评论后的补充:
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" 文件夹中找到它。
我只是想在我的索引页面上使用 scrollmagic 创建一个基本的 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);
编辑原始 post 后编辑:
我没有看到您的代码中引用了 TweenMax.js
和 animation.gsap.js
- 或者其他脚本中是否以某种方式包含了它们?
第二次评论后的补充:
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" 文件夹中找到它。