Super Cool jQuery Rocket-to-the-Top Effect

Add-ons

2026-07-21 12:57 5 次浏览 • 0 次下载 34.2KB

Plugin Description: A super cool jQuery rocket-to-the-top effect powered by GSAP.

Usage

Include jquery, TweenMax.min.js, and ScrollToPlugin.min.js in your page.

<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 Structure

The HTML structure for the back-to-top rocket is as follows:

<div id="shangxia2">
  <span id="gotop">
    <img src="img/huojian.svg" alt="Back-to-Top Rocket">
  </span>
</div>

CSS Styles

Add the necessary CSS styles for the rocket: use fixed positioning to keep it in the bottom-right corner of the page. Then, add a rubberBand animation when the mouse hovers over the rocket. This animation uses the transform function to apply a 3D scaling effect to the rocket.

/* Rocket CSS */
#gotop1 {
    width: 80px;
    position: fixed;
    bottom: 90px;
    cursor: pointer;
    z-index: 99998;
    right: 50%;
    margin-right: -620px;
}
  
/* Rocket Hover Effect */
  
#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);
  }
}

Initialize the Plugin

After the page DOM elements have finished loading, initialize the back-to-top effect using the following method.

$("#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");
});