超酷火箭冲天返回顶部jQuery特效

所属分类:其他-移动,杂项

 3194  23  查看评论 (3)
超酷火箭冲天返回顶部jQuery特效 ie兼容8

使用方法

在页面中引入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");
});


相关插件-移动,杂项

移动端切换插件-swiper

移动端图片,tab等滑动切换
  移动
 51923  140

JQUERY页面平滑滚动插件-JQUERY-SMOOTH-SCROLL

相信大家都见过了诸如 回到顶部 和滑动到页面指定位置的效果,今天我我要给大家介绍的正是这样一款平滑滚动的jquery插件。
  移动
 27751  30

滚动顶部插件

滚动顶部插件,二维码,客服电话,移上去浮动显示
  移动
 13842  138

回到顶部插件-BACKTOTOP

BackToTop 是一款回到顶部的jquery插件,只需要引入js和css文件然后调用插件即可,当我们下拉滚动条的时候就会在屏幕的右上角出现一个回到顶部的按钮。
  移动
 10362  17

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    目标 0
    2017/2/15 8:19:52
    指南针 0
    2016/12/27 13:12:53
    随遇あ安然 0
    2016/12/22 17:12:56
取消回复
    PROMULGATOR

    Pic

    江苏省无锡市