LA24.orgはどのようにサイドメニュー近接アニメーションを実現しますか？

Question

LA24.orgウェブサイトには、マウスカーソルの近接とメニューに対する相対位置に応答するサイドメニューがあります。まるでマグネットで、マウスがメニューを引っ張っているかのようです。

これはどのように達成されましたか？この動作を提供するライブラリはありますか？

Answer 1

カスタムコードだと思います。可能な方法は、メニューの端にキャンバスを使用してマウスに有機/磁気プル効果を作成することです。

javascriptでは、リスナーをmousemoveイベントに追加できます。キャンバス要素では、特定のしきい値（マウスがメニューに十分接近しているとき）でマウス座標に向かってベジェ曲線を描くことができます。マウスがメニューにほとんど触れている場合は、メニューが展開されます。この例では、マウスが十分に近くにあるときにクラスをメニューに追加しました。メニューの左の位置がアニメーション化され、ビューにスライドされます。

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 

function draw(x,y){ 
    ctx.clearRect(0, 0, c.width, c.height); 
    ctx.beginPath(); 
    ctx.moveTo(0,0); 
    ctx.bezierCurveTo(x,y,x,y,0,400); 
    ctx.fillStyle = '#000000'; 
    ctx.fill(); 
    ctx.stroke();  
} 

document.addEventListener('mousemove', function(e){ 
    $(".container").removeClass('expand'); 
    if(e.x < 200 && e.x > 100){ 
    draw(200-e.x + 20, e.y); 
    } 
    else if(e.x < 100){ 
    $(".container").addClass('expand'); 
    draw(0,0); 
    }else{ 
    draw(0,0); 
    } 
}) 

私はそれを証明するためにラフcodepenを作っ：http://codepen.io/peerbolte/pen/JRJdVo簡単な物理学と呼ばれる