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.创建一个控制器对象controllerlet controller = new ScrollMagic.Controller();// 2.创建一个场景对象scenelet 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>

ScrollMagic结合TweenMax的Demo相关推荐

ios浏览器滚动交互太差_使用ScrollMagic.js构建交互式滚动网站
ios浏览器滚动交互太差 ScrollMagic is a jQuery plugin which lets you use the scrollbar like a playback scrub c ...
tweenMax学习笔记
tweenMax是一款缓动插件,能实现很多牛逼的效果,在网上看了些demo,确实很吊,虽说很多用CSS3也能做出来,但是技多不压身,学之. 网上的demo还是很多的,但是资料不多,唯一能够让我有思绪的 ...
TweenMax逐帧动画
分享一个网上看到的TweenMax逐帧动画小demo 地址:http://contactu.cn/2015/test_frame/ <html lang="en"> & ...
three.js的demo例子-STL加载对象组件
three.js的demo例子-STL加载对象组件提示:demo示例中所涉及到的three.js安装插件方法这里就不单个说明了哈,有需要的网上有很多教程文章目录 three.js的demo例子-S ...
GASP动画和ScrollMagic
一.GSAP基础 1.GSAP开篇 1.什么是ScrollMagic? ScrollMagic是一个滚动视差插件 ScrollMagic本身比较简单,只包含2个类: crollMagic.Contro ...
jquery autocomplete demo
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择. jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquer ...
BERT-Pytorch demo初探
https://zhuanlan.zhihu.com/p/50773178 概述本文基于 pytorch-pretrained-BERT(huggingface)版本的复现,探究如下几个问题: py ...
MinkowskiEngine demo ModelNet40分类
MinkowskiEngine demo ModelNet40分类本文将看一个简单的演示示例,该示例训练用于分类的3D卷积神经网络.输入是稀疏张量,卷积也定义在稀疏张量上.该网络是以下体系结构的扩展 ...
Android - 下载别人的android demo 运行的时候加载很久问题处理
一般从git 下载别人的demo 的时候每次都要加载很久,下载gradle 版本之类的, 处理方法把 gradle 下面的 gradle-wrapper 里面的distributionUrl 替换自己 ...

ScrollMagic结合TweenMax的Demo

ScrollMagic结合TweenMax的Demo相关推荐

最新文章

热门文章