Advertisement
oscarviedma

Funcionalidad JavaScript Menu Gooey

May 31st, 2023
1,067
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.16 KB | None | 0 0
  1. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
  2. <script>
  3. jQuery(document).ready(function( $ ) {
  4. var $ovGooeyButtons=$(".ov-gooey-button")
  5. ,$toggleButton=$(".ov-gooey-toggle-button")
  6.  
  7. ,menuOpen=false
  8. ,buttonsNum=$ovGooeyButtons.length
  9. ,buttonsMid=(buttonsNum/2)
  10. ,spacing=75
  11. ;
  12.  
  13. function openGooeyMenu(){
  14. TweenMax.to($toggleButton,0.1,{
  15. scaleX:1.2,
  16. scaleY:0.7,
  17. ease:Quad.easeOut,
  18. onComplete:function(){
  19. TweenMax.to($toggleButton,.8,{
  20. scale:0.72,
  21. ease:Elastic.easeOut,
  22. easeParams:[1.1,0.7]
  23. })
  24. TweenMax.to($toggleButton.children(".ov-gooey-icon"),.8,{
  25. scale:1.4,
  26. ease:Elastic.easeOut,
  27. easeParams:[1.1,0.7]
  28. })
  29. }
  30. })
  31. $ovGooeyButtons.each(function(i){
  32. var $cur=$(this);
  33. var pos=i-buttonsMid;
  34. if(pos>=0) pos+=1;
  35. var dist=Math.abs(pos);
  36. $cur.css({
  37. zIndex:buttonsMid-dist
  38. });
  39. TweenMax.to($cur,1.1*(dist),{
  40. x:pos*spacing,
  41. scaleY:0.7,
  42. scaleX:1.1,
  43. ease:Elastic.easeOut,
  44. easeParams:[1.01,0.5]
  45. });
  46. TweenMax.to($cur,.8,{
  47. delay:(0.2*(dist))-0.1,
  48. scale:0.72,
  49. ease:Elastic.easeOut,
  50. easeParams:[1.1,0.7]
  51. })
  52.  
  53. TweenMax.fromTo($cur.children(".ov-gooey-icon"),0.2,{
  54. scale:0
  55. },{
  56. delay:(0.2*dist)-0.1,
  57. scale:1,
  58. ease:Quad.easeInOut
  59. })
  60. })
  61. }
  62. function closeGooeyMenu(){
  63. TweenMax.to([$toggleButton,$toggleButton.children(".ov-gooey-icon")],1.4,{
  64. delay:0.1,
  65. scale:1,
  66. ease:Elastic.easeOut,
  67. easeParams:[1.1,0.3]
  68. });
  69. $ovGooeyButtons.each(function(i){
  70. var $cur=$(this);
  71. var pos=i-buttonsMid;
  72. if(pos>=0) pos+=1;
  73. var dist=Math.abs(pos);
  74. $cur.css({
  75. zIndex:dist
  76. });
  77.  
  78. TweenMax.to($cur,0.4+((buttonsMid-dist)*0.1),{
  79. x:0,
  80. scale:.95,
  81. ease:Quad.easeInOut,
  82. });
  83.  
  84. TweenMax.to($cur.children(".ov-gooey-icon"),0.2,{
  85. scale:0,
  86. ease:Quad.easeIn
  87. });
  88. })
  89. }
  90.  
  91. function toggleGooeyMenu(){
  92. menuOpen=!menuOpen
  93.  
  94. menuOpen?openGooeyMenu():closeGooeyMenu();
  95. }
  96. $toggleButton.on("mousedown",function(){
  97. toggleGooeyMenu();
  98. })
  99.  
  100. })
  101. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement