Question

以下是我发现的演示：http://clapat.ro/themes/wizzard/

我正在谈论汉堡菜单上的这种效果，一旦你进入它的区域，它跟随光标（并随之移动）20px左右。

显然在源代码中找到了一些代码：

HTML：

   <div id="burger-wrapper" style="transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: 0px 0px 0px;">
    <div id="burger-circle" style="transform: matrix(1, 0, 0, 1, 0, 0);"></div>
 <div id="menu-burger" style="transform: matrix(1, 0, 0, 1, 0, 0);">
          <span></span>
          <span></span>
      </div>
  </div>

JS：

    //Parallax Burger Menu
    $('#burger-wrapper').mouseleave(function(e){
        TweenMax.to(this, 0.3, {scale: 1});
        TweenMax.to('#burger-circle, #menu-burger', 0.3,{scale:1, x: 0, y: 0});           
    });     
    $('#burger-wrapper').mouseenter(function(e){
        TweenMax.to(this, 0.3, {transformOrigin: '0 0', scale: 1});
        TweenMax.to('#burger-circle', 0.3,{scale: 1.3});
    });     
    $('#burger-wrapper').mousemove(function(e){   
        callParallax(e);
    });     
    function callParallax(e){
        parallaxIt(e, '#burger-circle', 60);
        parallaxIt(e, '#menu-burger', 40);
    }       
    function parallaxIt(e, target, movement){
        var $this = $('#burger-wrapper');
        var boundingRect = $this[0].getBoundingClientRect();
        var relX = e.pageX - boundingRect.left;
        var relY = e.pageY - boundingRect.top;
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        TweenMax.to(target, 0.3, {
            x: (relX - boundingRect.width/2) / boundingRect.width * movement,
            y: (relY - boundingRect.height/2 - scrollTop) / boundingRect.width * movement,
            ease: Power2.easeOut
        });
    }

但我并不是真的想偷它。

我想知道这个效果是否有特定名称？

Answer 1

对我感到羞耻！再次搜索后找到它。

如果有人想要使用它：

＆＃13;

$('#container').mouseleave(function(e){
  TweenMax.to(this, 0.3, {height: 150, width: 150});
  TweenMax.to('.circle, .hamburger', 0.3,{scale:1, x: 0, y: 0});
});

$('#container').mouseenter(function(e){
  TweenMax.to(this, 0.3, {height: 200, width: 200});
  TweenMax.to('.circle', 0.3,{scale:1.3});
});

$('#container').mousemove(function(e){   
  callParallax(e);
});

function callParallax(e){
  parallaxIt(e, '.circle', 80);
  parallaxIt(e, '.hamburger', 40);
}

function parallaxIt(e, target, movement){
  var $this = $('#container');
  var relX = e.pageX - $this.offset().left;
  var relY = e.pageY - $this.offset().top;
  
  TweenMax.to(target, 0.3, {
    x: (relX - $this.width()/2) / $this.width() * movement,
    y: (relY - $this.height()/2) / $this.height() * movement,
    ease: Power2.easeOut
  });
}

＆＃13;

#container{
  display: flex;
  position: relative;
  height: 150px;
  width: 150px;
  justify-content: center;
  align-items: center;
}

.circle{

  position: absolute;
  height: 50px;
  width: 50px;
  border: solid 2px gray;
  border-radius: 100%;
}

.green{
  background: green;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div id="container">
  <div class="circle"></div>
  <div class="hamburger">=</div>
</div>

＆＃13;

汉堡菜单动画，它跟随光标（tweenmax）

1 个答案: