使用 GSAP 插件
Using GSAP plugins
我是 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;
}
您似乎只是忘记加载 ScrollToPlugin:
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/ScrollToPlugin.min.js"></script>
我是 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;
}
您似乎只是忘记加载 ScrollToPlugin:
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/ScrollToPlugin.min.js"></script>