マウスでブラウザを移動する

Question

私は何かを試してみることを望んでいますlike thisコンテンツが画面外にあり、マウスを動かすとブラウザがそれに従います。私はそれがthisに似ていると思っていたところで、マウスが動いたときに画面の端がアニメーションされます。

元の例のように、JSを使用してtransform: matrixを変更しているようです。第2のリンク上の画面は、CSSを変更するにはgreensock、次のコードを使用してアニメーション化され：

// Mouse move tilt effect 
$(document).mousemove(function(event){ 

    // Detect mouse position 
    var xPos = (event.clientX/$(window).width())-0.5; 
    var yPos = (event.clientY/$(window).height())-0.5; 

    // Tilt the hero container 
    TweenLite.to($hero, 0.6, {rotationY:5*xPos, rotationX:5*yPos, ease:Power1.easeOut, transformPerspective:900, transformOrigin:"center"}); 

    // Update text on the page with the current mouse position 
    $(".bottom strong").text(event.pageX + ", " + event.pageY); 
}); 

は私が必要なものを行うに似た何かをすることは可能ですか？

Answer 1

私があなたの意図を基本的にどのように理解したかに基づいて、あなたがする必要があるのは基本的です。

1. ウィンドウサイズよりも幅及び高さより大きい有するDIVコンテナを作成し、コンテンツ
2. でそれを埋める幅と窓とオーバーフローに等しい高有するDIVコンテナ作成：隠されたのと1容器を含んでいます。その
   後 transform: translateX(-25%) translateX(-25%);と transition: transform 1s;

   と

3. 2 1の中央容器
4. 検出マウス位置
5. 計算ウィンドウ
6. の中心からの距離とに基づいて、その追加又は移動Xと移動Y値

EDIT 25％まで除去する。また

document.querySelector('body').style.transition = 'transform 1s'; 

window.addEventListener('mousemove', event => { 
    const absMaxX = window.innerWidth/2; 
    const absMaxY = window.innerHeight/2; 

    const maxDistance = Math.sqrt(Math.pow(absMaxX, 2) + Math.pow(absMaxY, 2)); 

    const mouseX = event.clientX; 
    const mouseY = event.clientY; 

    const directionX = mouseX - absMaxX >= 0 ? 1 : -1; 
    const directionY = mouseY - absMaxY >= 0 ? 1 : -1; 

    const distance = Math.sqrt(Math.pow(mouseX - absMaxX, 2) + Math.pow(mouseY - absMaxY, 2)) 
    const translation = distance/maxDistance * 100; 

    document.querySelector('body').style.transform = 
    `translateX(${directionX * translation}px) translateY(${directionY * translation}px)` 
});