javascript - カーソルのホバーに応じて背景を移動する方法は?

Question

カーソルがスライダーの上をホバーすると、背景もカーソルのホバーに合わせて移動します。

このエフェクトを使用したサイトへのリンクはこちらです。 テレマルク

この効果は何と呼ばれますか？そして、この効果を達成する方法は？便利なリンク plz は、ある種の jquery プラグインまたは単純な css3 効果です。わかりません助けてください。

Answer 1

あなたの質問に対するコメントの意味を示すために、フィドルを作成しました。そこからさらに先へ進むことができるはずです。

document.addEventListener('mousemove', function (event) {
    if (window.event) { // IE fix
        event = window.event;
    }

    // Grab the mouse's X-position.
    var mousex = event.clientX;
    var header = document.getElementById('header');
    header.style.backgroundPosition = mousex/3 + 'px 0';
}, false);

ここで何が起こっているかを説明するために：

• mousemoveのイベントに関数をバインドしますdocument。
• を使用して現在のマウス位置を取得しevent.clientXます。
• 要素の背景位置を 1/3#headerの速度 ( mousex/3) で変更します。

ライブで確認してください:FIDDLE

リンクしたウェブサイトとまったく同じものが必要な場合は、互いにいくつかの div を配置し、それらの背景位置を別の速度で移動する必要があります。この例では、マウスの速度の 1/3 で移動します。

Answer 2

必要なのは、3 つの画像を重ねることです。

1. 要件に基づいて不透明度を設定する必要があります。
2. 画像が重なって位置が絶対になるように、画像の z-index を設定します。
3. で、画像を移動します。上mouseoverの画像は他の 2 つよりも多く、2 番目の画像は最後の画像よりも多くなります。

これにより、目的の効果が得られます。