所属分类:网页特效-返回顶部
<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>
$("#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");
});
为小火箭添加必要的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);
}
}
返回顶部小火箭的HTML结构如下
<div id="shangxia2">
<span id="gotop">
<img src="img/huojian.svg" alt="返回顶部小火箭">
</span>
</div>