TweenMax动画在ScrollMagic之前
TweenMax动画在ScrollMagic之前
提问于 2016-07-07 20:27:33
运行在TweenMax之前的ScrollMagic
在使用TweenMax和ScrollMagic滚动页面时，我试图使页眉缩小，但是动画不需要等待滚动即可触发。
这是我的代码：
$(document).ready(function(){
var header = $('header')
//init the controller
var controller = new ScrollMagic.Controller();
var tween = TweenMax.to(header ,1 ,{height: 100});
var scene = new ScrollMagic.Scene({
triggerElement: header
})
.setTween(tween)
.addTo(controller);
});body {
margin: 0;
padding: 0;
background-color: #e95849;
font-family: sans-serif;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul:after {
content: "";
display: table;
clear: both;
}
li {
float: right;
color: #000;
padding: 20px 10px;
}
header {
background-color: #fff;
height: 150px;
position: fixed;
width: 100vw;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<header>
<nav>
<ul id="animate">
<li>ABOUT</li>
<li>WORK</li>
<li>DESIGN</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<div style="height: 2000px"></div>
我也有以下顺序的剧本-
- Jquery
- TweenMax
- ScrollMagic
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-07 21:49:08
触发脚本是因为header元素已经位于触发器位置(=视图端口的顶部)。添加offset: 1到场景-这将导致它等待，直到你向下滚动至少一个像素。(将该值更改为任何您喜欢的值)
$(document).ready(function(){
var header = $('header')
//init the controller
var controller = new ScrollMagic.Controller();
var tween = TweenMax.to(header ,1 ,{height: 100});
var scene = new ScrollMagic.Scene({
triggerElement: header,
offset: 1
})
.setTween(tween)
.addTo(controller);
});body {
margin: 0;
padding: 0;
background-color: #e95849;
font-family: sans-serif;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul:after {
content: "";
display: table;
clear: both;
}
li {
float: right;
color: #000;
padding: 20px 10px;
}
header {
background-color: #fff;
height: 150px;
position: fixed;
width: 100vw;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<header>
<nav>
<ul id="animate">
<li>ABOUT</li>
<li>WORK</li>
<li>DESIGN</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<div style="height: 2000px"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38254666
复制相关文章
相似问题
腾讯云开发者
