超酷火箭冲天返回顶部jQuery特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款基于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");
});

该火箭冲天返回顶部特效由清萍工作室投稿提供。