ScrollMagic结合TweenMax的Demo
东方明亮
ScrollMagic是一款可以把滚动条当进度条用的jquery插件，官网
GSAP的全称是GreenSock Animation Platform（格林斯托克动画平台），中文官网
ScrollMagic + GSAP的组合可以制作炫酷动画，而TweenMax是GSAP中功能最全的一个库，我们这里就直接引入TweenMax.js做个简单的演示，ScrollMagic中使用GSAP还需要引入相应的插件animation.gsap.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ScrollMagic-GSAP</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 100px;
background: #000;
}
div{
width: 100%;
height: 200px;
}
.section1{
background: red;
}
.anim{
width: 100px;
background-color: yellow;
}
.section2{
background: green;
}
.section3{
background: blue;
}
.section4{
background: deeppink;
}
footer{
width: 100%;
height: 2000px;
background: #000;
}
</style>
</head>
<body>
<header></header>
<div class="section1">
<div class="anim"></div>
</div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
<footer></footer>
<script>
// 1.创建一个控制器对象controller
let controller = new ScrollMagic.Controller();
// 2.创建一个场景对象scene
let scene = new ScrollMagic.Scene({
offset: 100,
duration: 200,
});
// 告诉ScrollMagic哪一个元素需要固定
scene.setPin(".section1");
/*
// 创建一个GSAP动画
let tm = TweenMax.to(".anim", 3, {
width: '100%',
height: 200
});
scene.setTween(tm);
*/
//场景条件满足后，这个动画就可以执行了。给anim 添加动画，动画效果会随着滚动条的滚动而逐渐变化
scene.setTween(".anim", 3, {
width: '100%',
height: 200
});
// 3.将场景对象添加到控制器对象
controller.addScene(scene);
</script>
</body>
</html>
类似资料：