Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body, html { margin: 0; padding: 0; background: #1F1F1F; width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .box { width: 800px; height: 600px; text-align: center; }
JavaScript
console.clear(); const star = document.getElementsByClassName("n-star"); const gl = document.getElementsByClassName("s-gls"); ////Morning function morning() { const morningTl = gsap.timeline({ ease: "linear" }); const mdura = 7; morningTl .to( "#morning", { opacity: 1, duration: 0 }, 0 ) .to( "#window-b", { scaleY: 0, transformOrigin: "top", duration: 2, ease: "power2.out" }, 0 ) .to( "#m-m1", { x: 70, duration: mdura }, 0 ) .to( "#m-m2", { x: 50, duration: mdura }, 0 ) .to( "#m-m3", { x: 35, duration: mdura }, 0 ) .to( "#m-m4", { x: 20, duration: mdura }, 0 ) .to( "#m-m5", { x: 20, duration: mdura }, 0 ) .to( "#window-b", { scaleY: 23, transformOrigin: "top", duration: 2, ease: "power2.out" }, 5 ) .to( "#morning", { opacity: 0, duration: 0 }, 7 ); return morningTl; } ///Sunset function sunset() { const sunsetTl = gsap.timeline({ ease: "linear" }); const sdura = 10; gsap.to(gl, { x: 8, stagger: { each: 0.1, from: "random", repeat: -1, yoyo: true }, duration: 2, ease: "power1.inOut" }); gsap.to(".s-bw2", { rotate: 25, transformOrigin: "right bottom", repeat: -1, yoyo: true, ease: "power1.inOut", duration: 1 }); gsap.to(".s-bw1", { rotate: -25, transformOrigin: "left bottom", repeat: -1, yoyo: true, ease: "power1.inOut", duration: 1 }); sunsetTl .to( "#sunset", { opacity: 1, duration: 0 }, 0 ) .to( "#window-b", { scaleY: 0, transformOrigin: "top", duration: 2, ease: "power2.out" }, 0 ) .to( "#s-ml2", { x: 30, duration: sdura }, 0 ) .to( "#s-ml1", { x: 20, duration: sdura }, 0 ) .to( "#s-ml3", { x: 5, duration: sdura }, 0 ) .to( "#s-m2", { x: 50, duration: sdura }, 0 ) .to( "#s-m1", { x: 40, duration: sdura }, 0 ) .to( "#s-y", { x: 40, duration: sdura }, 0 ) .to( "#s-b1", { x: 20, duration: sdura }, 0 ) .to( "#s-b2", { x: 20, duration: sdura }, 0 ) .to( "#s-c1", { x: 40, duration: sdura }, 0 ) .to( "#s-c2", { x: 30, duration: sdura }, 0 ) .to( "#window-b", { scaleY: 23, transformOrigin: "top", duration: 2, ease: "power2.out" }, 5 ) .to( "#sunset", { opacity: 0, duration: 0 }, 7 ); return sunsetTl; } ///NIGHT function night() { const nightTl = gsap.timeline({ ease: "linear" }); const ndura = 7; gsap.to(star, { scale: 0.3, transformOrigin: "center", stagger: { each: 0.1, from: "random", repeat: -1, yoyo: true }, duration: 0.6, ease: "power1.inOut" }); gsap.set("#n-l1", { y: -20 }); gsap.set("#n-l2", { y: -40 }); gsap .to("#n-l1, #n-l2, #n-l3, #n-l4", { rotate: 40, transformOrigin: "center bottom", stagger: { each: 1, from: "random", repeat: -1, yoyo: true }, duration: 3, ease: "power1.inOut" }) .seek(100); nightTl .to( "#night", { opacity: 1, duration: 0 }, 0 ) .to( "#window-b", { scaleY: 0, transformOrigin: "top", duration: 2, ease: "power2.out" }, 0 ) .to( "#n-stars", { x: 10, duration: ndura }, 0 ) .to( "#n-city", { x: 60, duration: ndura }, 0 ) .to( "#window-b", { scaleY: 23, transformOrigin: "top", duration: 2, ease: "power2.out" }, 5 ); // .to( // "#night", // { // opacity: 0, // duration: 0 // }, // 7 // ); return nightTl; } ///window gsap.set("#window-b", { scaleY: 23, transformOrigin: "top" }); ///Master const master = gsap.timeline({ repeat: -1 }); master.add(morning()).add(sunset(), 7).add(night(), 14);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>GSAP-旅行动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号