这是一款基于gsap的超酷火箭冲天返回顶部jQuery特效。该特效由清萍工作室提供。该返回顶部特效的火箭使用SVG来制作,通过gsap以不同的动画时间和缓动函数来完成返回顶部的效果。该返回顶部特效的DEOM中实现了3个功能:
- 点击火箭以1.5秒的慢快慢速度旋转冲天而去,然后再旋转回来。
- 点击底部“返回顶部”文字按钮也会让火箭做动画消失。
- 火箭由悬停特效,该特效由“animate.css”强力驱动,本动画只是提取了其中一个。
使用方法
在页面中引入jquery和TweenMax.min.js,以及ScrollToPlugin.min.js文件。
<script src="js/jquery.min.js"></script> <script src="http://cdn.bootcss.com/gsap/1.19.0/TweenMax.min.js"></script> <script src="http://cdn.bootcss.com/gsap/1.19.0/plugins/ScrollToPlugin.min.js"></script>
HTML结构
返回顶部小火箭的HTML结构如下:
<div id="shangxia2"> <span id="gotop"> <img src="img/huojian.svg" alt="返回顶部小火箭"> </span> </div>
CSS样式
为小火箭添加必要的CSS样式:定位方式为fixed
,位置固定在页面的右下角。然后在鼠标滑过小火箭时,为小火箭添加rubberBand
的animation动画,该动画通过transform函数来对小火箭进行3D缩放。
/* 小火箭css */ #gotop1 { width: 80px; position: fixed; bottom: 90px; cursor: pointer; z-index: 99998; right: 50%; margin-right: -620px; } /* 小火箭悬停特效 */ #gotop1:hover { animation: rubberBand 1s; } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } }
初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该返回顶部特效。
$("#gotop").click(function(e) { TweenMax.to(window, 1.5, {scrollTo:0, ease: Expo.easeInOut}); var huojian = new TimelineLite(); huojian.to("#gotop1", 1, {rotationY:720, scale:0.6, y:"+=40", ease: Power4.easeOut}) .to("#gotop1", 1, {y:-1000, opacity:0, ease: Power4.easeOut}, 0.6) .to("#gotop1", 1, {y:0, rotationY:0, opacity:1, scale:1, ease: Expo.easeOut, clearProps: "all"}, "1.4"); });
该火箭冲天返回顶部特效由清萍工作室投稿提供。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!