文章/答案/技术大牛

发布

社区首页 >问答首页 >使用GSAP插件

问使用GSAP插件
EN

Stack Overflow用户

提问于 2015-11-09 16:40:14

回答 1查看 246关注 0票数 0

我是GSAP的新手，我正在尝试构建一个函数，它将滚动到页面上的某个点，但我不太明白如何正确使用GSAP插件。我已经设法使用脚本之间的颜色，大小和位置之间，但我无法得到滚动工作。

我的目标是在单击"Iterate“按钮时，将页面向下滚动到特定的点(为了测试目的，我刚刚将其设置为9999 )。什么都没发生。

我的密码看上去-

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">  
    <link type="text/css" rel="stylesheet" href="custom.css"/>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
    <script src="custom.js"></script>
</head>
<body>
    <div class="bigtop">
            <button class="iconDo" onclick="scrollFour()">
                <i class="fa fa-wrench fa-2x"></i>      
                <h2>Iterate</h2>
            </button>
    </div>
    <div class="tier1">
        <h1>One</h1>
        <p>Body Text</p>
    </div>
    <div class="tier2">
        <h1>Two</h1>
        <p></p>
    </div>
    <div class="tier3">
        <h1>Three</h1>
        <p></p> 
    </div>
    <div class="tier4">
        <h1>Test</h1>
        <p></p>
    </div>
    <div class="tier5">
        <h1>Four</h1>
        <p></p>
    </div>      
</body>

我用的剧本-

var scrollFour = function(){
    TweenLite.to(window, 2, {scrollTo:{y:9999}, ease:Power2.easeOut});
}

还有CSS，如果相关的话-

*{
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
}   

div{
    width: 100%;
    padding: 0 0 30px 0;
    height: 300px;
}

h1{
    padding: 50px 0 0 200px;
    color: #FFFFFF;
    font-family: arial, sans-serif;
}

h2{
    font-family: arial, sans-serif;
    padding: 20px 0;
}

p{
    padding: 20px 0 0 200px;
    color: #FFFFFF;
    font-family: arial, sans-serif; 
    width: 800px;
}

.iconDo{
    border-radius: 10px;
    float: left;
    text-align: center;
    padding: 10px 20px;
    color: #FFFFFF;
}

.bigtop{    
    background-color: #6200EA;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;  
    box-shadow: 0 0 30px 0 #000000;     
}

.tier1{
    background-color: #111111;
    margin: 100px 0 0 0;    
}

.tier2{
    background-color: #333333;
}

.tier3{
    background-color: #555555;
}

.tier4{
    background-color: #777777;
}

.tier5{
    background-color: #999999;
}

javascript

gsap

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-10 06:02:08

看起来您只是忘了加载ScrollToPlugin：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33613887

复制

相似问题

问使用GSAP插件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用GSAP插件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用GSAP插件
EN