使用GSAP插件

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

当点击“迭代”按钮时，我的目标是将页面向下滚动到特定点（我已将其设置为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; 
}

来源

2015-11-09 Uesls

它看起来像您刚才忘了加载ScrollToPlugin：

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

来源

2015-11-10 06:02:08 Jack

谢谢，它工作完美！ – Uesls

回答

相关问题