0

私はこの質問をするためのより良い方法を考えることができないので、私はそれを完全に尋ねます。http://petenelson.co.ukでレイヤードバックグラウンド効果を実現する方法を知っている人はいますか？これを実現するためのプラグインはおそらくありますか？

4

1 に答える 1

1

これは視差効果と呼ばれる ので、jQuery視差プラグインをグーグルで検索すると、視差効果が得られます。

経験則では、ページスクロールイベント中にさまざまな速度で移動するさまざまなzインデックスを持つさまざまな要素があります。

このデモページhttp://www.ianlunn.co.uk/plugins/jquery-parallax/を見ると、次のコードが含まれていることがわかります。

<script src="scripts/jquery.parallax-1.1.3.js"></script>

と

$（document）.ready（function（）{
    $（'＃nav'）。localScroll（800）;

    //.parallax(xPosition、speedFactor、outerHeight）オプション：
    //xPosition-要素の水平位置
    //慣性-垂直スクロールに対して移動する速度。例：0.1はスクロール速度の10分の1、2はスクロール速度の2倍です。
    // externalHeight（true / false）-jQueryがouterHeightオプションを使用して、セクションがビューポートにあるかどうかを判断するかどうか
    $（'＃intro'）。parallax（ "50％"、0.1）;
    $（'＃second'）。parallax（ "50％"、0.1）;
    $（'。bg'）。parallax（ "50％"、0.4）;
    $（'＃third'）。parallax（ "50％"、0.3）;

}）

ここにいくつかの便利なリンクがあります：

アップデート：

視差効果は、スクロールだけでなく使用できます。実際、それはあなたの想像力と創造性次第です。たとえば、この視差プラグインデモhttp://stephband.info/jparallax/#parallaxの画像の上にマウスを移動すると、レイヤー化された画像が異なる速度で移動していることがわかります。

于 2012-12-13T11:00:54.653 に答える