javascript - マウスの動きでページの傾きとズームを実装する

Question

これを見たとき、チャットでいくつかのメッセージを検索しようとしていました:

マウスを左右に動かすとコンテンツが左右に傾き、マウスを上下に動かすとコンテンツがズームインまたはズームアウトします。これは本当に素晴らしい効果で、私は本当に気に入りました。私は同じことを実装したい。

今、同じページを確認しましたが、これが見当たりません。

誰かが私にこれを行う方法を教えてもらえますか?

Answer 1

これは、マウスポインターの方向に画面を回転させるようなものです。

これはCodePen.ioの例です

必要なのはbody、mousemoveイベントの に EventListener を追加し、css3 Transformation を適用することだけです。

これまでにこれを行ったことがないので、変換を少し調整する必要があるかもしれません。

webkitTransform例としてこのプロパティを使用しました。互換性リストを探す必要があるかもしれません

画像で変換を行ったコードは次のとおりです

window.addEventListener("mousemove",function(e) {

  var width = window.innerWidth;
  var height = window.innerHeight;
  var clientHeight = document.body.clientHeight;
  var skew = {}
  skew.y = (20 * ((e.x / width) - 0.5)) 
  skew.x = -(20 * ((e.y / height) - 0.5));

  document.body.style.webkitTransform = "perspective("+clientHeight+"px) rotateX("+skew.x+"deg) rotateY("+skew.y+"deg)"
})

編集:ボディ clientHeight をパースペクティブとして使用すると、少し良くなるようです

Answer 2

まあ、それは醜いですが、より現実的に見えるように変換を変更することができます：http: //jsfiddle.net/c5E6g/

<div id="container">
    Hey!
</div>

CSS：

#container{
    background-color:gray;
    border:1px solid #111;
}

JavaScript：

document.onmousemove = function(e) {
    document.getElementById("container").style.transform = "skewx("+e.clientX+"deg) translatex(150px)";
};

これは、変換のskewX値を変更する関数にすぎません。生のXカーソル位置を使用しました。ページ幅を使用して、より適切な値を計算できます。またはさらに良いことに、skewYも少し変更します。