这是一款效果非常炫酷的液态环形按钮菜单jQuery特效。该特效使用GSAP来制作圆形按钮的变形动画,当用户点击主按钮时,按钮会像液体一样变形,并分离出3个子菜单按钮。
使用方法
使用该液态环形按钮菜单特效需要在页面中引入jQuery和TweenMax.min.js以及font-awesome字体图标文件。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
HTML结构
该液态环形按钮菜单的HTML结构非常简单,子菜单使用的是一个无序列表,每个列表项中是一个按钮元素以及一个用于制作弹性效果的div层。主菜单按钮就是一个按钮元素。
<div class='content'> <div class='menu'> <div class='menu-wrapper'> <ul class='menu-items'> <li class='menu-item'> <button class='menu-item-button'> <i class='fa fa-reply-all'></i> </button> <div class='menu-item-bounce'></div> </li> <li class='menu-item'> <button class='menu-item-button'> <i class='fa fa-inbox'></i> </button> <div class='menu-item-bounce'></div> </li> <li class='menu-item'> <button class='menu-item-button'> <i class='fa fa-trash'></i> </button> <div class='menu-item-bounce'></div> </li> </ul> <button class='menu-toggle-button'> <i class='fa fa-plus menu-toggle-icon'></i> </button> </div> </div> </div>
CSS样式
为菜单添加下面的一些简单的CSS样式。
.menu { width: 300px; height: 200px; margin: 0 auto 100px; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); } .menu-wrapper { position: absolute; left: 50%; bottom: 10px; } .menu-toggle-button, .menu-item-bounce, .menu-item-button { background: #4f4f64; border-radius: 50%; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; height: 80px; color: #fff; border: none; outline: none; position: relative; } .menu-toggle-button { background: transparent; position: absolute; top: 0; left: 0; } .menu-toggle-icon { font-size: 30px; position: absolute; top: 0; left: 0; width: 80px; height: 80px; line-height: 80px; } .menu-items { list-style-type: none; padding: 0; margin: 0; position: absolute; left: 0; top: 0; } .menu-item { position: absolute; top: 0; left: 0; width: 0; height: 0; } .menu-item-bounce { position: absolute; top: 0; left: 0; } .menu-item-button { width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; position: absolute; top: 0; left: 0; color: #AD4C4C; } .menu-item-button .fa { font-size: 1.5rem; color: #fff; } .menu-item-button .fa-inbox { transform: rotate(182deg); } .menu-item-button .fa-reply-all { transform: rotate(-120deg); } .menu-item-button .fa-trash { transform: rotate(120deg); }
JavaScript
该液态环形按钮菜单使用GSAP来制作按钮的动画效果。其中openMenu()
函数为打开菜单,closeMenu()
函数为关闭菜单。
$(document).ready(function(){ var menuItemNum=$(".menu-item").length; var angle=120; var distance=90; var startingAngle=180+(-angle/2); var slice=angle/(menuItemNum-1); TweenMax.globalTimeScale(0.8); $(".menu-item").each(function(i){ var angle=startingAngle+(slice*i); $(this).css({ transform:"rotate("+(angle)+"deg)" }) $(this).find(".menu-item-icon").css({ transform:"rotate("+(-angle)+"deg)" }) }) var on=false; $(".menu-toggle-button").mousedown(function(){ TweenMax.to($(".menu-toggle-icon"),0.1,{ scale:0.65 }) }) $(document).mouseup(function(){ TweenMax.to($(".menu-toggle-icon"),0.1,{ scale:1 }) }); $(document).on("touchend",function(){ $(document).trigger("mouseup") }) $(".menu-toggle-button").on("mousedown",pressHandler); $(".menu-toggle-button").on("touchstart",function(event){ $(this).trigger("mousedown"); event.preventDefault(); event.stopPropagation(); }); function pressHandler(event){ on=!on; TweenMax.to($(this).children('.menu-toggle-icon'),0.4,{ rotation:on?45:0, ease:Quint.easeInOut, force3D:true }); on?openMenu():closeMenu(); } function openMenu(){ $(".menu-item").each(function(i){ var delay=i*0.08; var $bounce=$(this).children(".menu-item-bounce"); TweenMax.fromTo($bounce,0.2,{ transformOrigin:"50% 50%" },{ delay:delay, scaleX:0.8, scaleY:1.2, force3D:true, ease:Quad.easeInOut, onComplete:function(){ TweenMax.to($bounce,0.15,{ // scaleX:1.2, scaleY:0.7, force3D:true, ease:Quad.easeInOut, onComplete:function(){ TweenMax.to($bounce,3,{ // scaleX:1, scaleY:0.8, force3D:true, ease:Elastic.easeOut, easeParams:[1.1,0.12] }) } }) } }); TweenMax.to($(this).children(".menu-item-button"),0.5,{ delay:delay, y:distance, force3D:true, ease:Quint.easeInOut }); }) } function closeMenu(){ $(".menu-item").each(function(i){ var delay=i*0.08; var $bounce=$(this).children(".menu-item-bounce"); TweenMax.fromTo($bounce,0.2,{ transformOrigin:"50% 50%" },{ delay:delay, scaleX:1, scaleY:0.8, force3D:true, ease:Quad.easeInOut, onComplete:function(){ TweenMax.to($bounce,0.15,{ // scaleX:1.2, scaleY:1.2, force3D:true, ease:Quad.easeInOut, onComplete:function(){ TweenMax.to($bounce,3,{ // scaleX:1, scaleY:1, force3D:true, ease:Elastic.easeOut, easeParams:[1.1,0.12] }) } }) } }); TweenMax.to($(this).children(".menu-item-button"),0.3,{ delay:delay, y:0, force3D:true, ease:Quint.easeIn }); }) } })
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!