这是一款效果非常炫酷的中国风古典云纹返回顶部jQuery插件。该返回顶部插件使用中国古典云纹元素,通过jquery和GSAP,以及CSS3来制作返回顶部特效。
古典云纹返回顶部插件由清萍工作室提供。插件中的素材是在网上找的云纹边框素材,然后再找的流苏,用Adobe Photoshop合成后,再用Adobe After Effects做飘动动画,最后导出为png,用css帧动画运用在网页中。该动画的CSS悬停用的是CSS滤镜变色。
使用方法
在页面中引入jquery、TweenMax.min.js和ScrollToPlugin.min.js文件。
<script src="dist/js/jquery.min.js"></script> <script src="dist/js/TweenMax.min.js"></script> <script src="dist/js/ScrollToPlugin.min.js"></script>
HTML结构
古典云纹返回顶部的HTML结构如下:
<div id="shangxia"> <div id="shang"></div> <!-- 如果你是博客,这里需要加php判断。 是首页则跳转到留言板,是内页则跳转到评论框。 --> <div id="comt"></div> <div id="xia"></div> </div>
CSS样式
为返回顶部特效添加下面的CSS样式:
/* --------- 返回顶部代码 --------- */ #shangxia { position: fixed; right: 50%; margin-right: -670px; top: 63%; z-index: 9993; -webkit-animation: dh_ffdb 2s steps(24) infinite; -o-animation: dh_ffdb 2s steps(24) infinite; animation: dh_ffdb 2s steps(24) infinite; background: url(img/gotop.png) no-repeat; width: 54px; height: 300px; transition: 1s; } /* 悬停变为青绿色滤镜动画 */ #shangxia:hover { -webkit-filter: hue-rotate(-227deg); filter: hue-rotate(-227deg); } #shang, #comt, #xia { width: 33px; position:absolute; z-index: 9996; cursor: pointer; } /* png序列的关键帧动画 */ @keyframes dh_ffdb{ 100% {background-position:-1296px 0;} } #comt { height: 33px; top: 71px; left: 10px; } #shang { height: 32px; top: 37px; left: 10px; } #xia { height: 33px; top: 106px; left: 10px; } /* 返回顶部代码完 */
初始化插件
该返回顶部插件可以实现返回页面的上中下部分的三个功能。具体效果请查看演示页面。返回页面顶部的实现代码如下:
// 返回顶部js jQuery(document).ready(function(a) { $body = window.opera ? document.compatMode == "CSS1Compat" ? a("html") :a("body") :a("html,body"); a("#shang").mouseover(function() { up(); }).mouseout(function() { clearTimeout(fq); }).click(function() { TweenMax.to(window, 1.5, { scrollTo:0, ease:Expo.easeInOut, y:0 }); });
滚动到页面底部的实现代码如下:
/* *点击返回顶部的“下”字时,以1秒是速度滚动到id为#footerbar处。 * window, 1 为1秒,这里可以随意设置。 * ease:Expo.easeInOut为速度的曲线缓动,这里支持jquery的ease函数。 */ a("#xia").mouseover(function() { dn(); }).mouseout(function() { clearTimeout(fq); }).click(function() { TweenMax.to(window, 1, { scrollTo:"#footerbar", ease:Expo.easeInOut }); });
返回到页面中间的实现代码如下:
/* *绑定返回顶部的“评”字的id"#comt",以1.5秒的速度滚动到“#pinglun”评论区域。这里可以绑定多个id。 * window, 1.5 为1.5秒,这里可以随意设置。 * offsetY:30 为30像素的偏移量。 */ $("#comt").click(function() { TweenMax.to(window, 1.5, { scrollTo:{ y:"#pinglun", offsetY:30 }, ease:Back.easeOut.config(1.9), y:0 }); }); });
代码中使用的两个函数up()
和dn()
代码如下:
// 下面的 "up()", 20是鼠标悬停时的位移速度,如需更慢,则设置为40或更高。 function up() { $wd = $(window); $wd.scrollTop($wd.scrollTop() - 1); fq = setTimeout("up()", 20); } function dn() { $wd = $(window); $wd.scrollTop($wd.scrollTop() + 1); fq = setTimeout("dn()", 20); }
中国风古典云纹返回顶部jQuery插件由清萍工作室提供,官方演示地址为:www.emlog.vip。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!