欢迎各位的到来。

超酷冲天火箭返回顶部特效(附源码下载)

发布:东轩Gg2017-7-12 0:08分类: 源码教程 标签: 源码教程

这几天没事就学习了下gasp。总感觉以前打造的返回顶部太不个性了,速度也是常规的。这次通过asap认识到,可以做出不同速度的,想怎么就怎么,于是边学边用,就制作了这个“冲天火箭返回顶部”动画分享给大家。

该动画有3个功能,目前本站正在用,大家可以看qpjk.cc小火箭的演示。


1、点击火箭以1.5秒的慢快慢速度旋转冲天而去,然后再旋转回来。

2、点击底部“返回顶部”文字按钮也会让火箭做动画消失。

3、火箭由悬停特效,该特效由“animate.css”强力驱动,本动画只是提取了其中一个。


演示       下载源码


如何使用?3步搞定。


第一步:给你的页面加上火箭的css

 /* 小火箭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); } } /* end 小火箭 */  


第二步:加上html

 <!-- 右侧小火箭图标返回顶部 --> <span id="gotop1"> <img src="huojian.svg" alt="返回顶部小火箭" /> </span> <!-- 底部文字返回顶部 --> <a id="gotop2" href="javascript:void(0);">返回顶部</a>  


第三步:在页面底部加上js

 <!-- js --> <script src="http://libs.baidu.com/jquery/1.11.1/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> <scripta> /* 选择你喜欢的速度类型,复制下面的某段代码即可。不明处请咨询:qpjk.cc */ $(function() { // 返回顶部,绑定gotop1图标和gotop2文字事件 $("#gotop1,#gotop2").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"); }); }); </scripta>  


本文转自清萍剑客

温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

已有 0/19 人参与

发表评论:

欢迎分享东轩博客-记录生活 技术记录 技术分享的博客

欢迎使用手机扫描访问本站,还可以关注微信哦~