このチュートリアルは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー畫像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します

畫像をダウンロードしてください

4つの背景畫像が必要です

：メインの背景（たとえば、緑色のベクトルの背景）。
1. layer1
：オーバーレイ畫像（例えば、カエル??、透明なPNG）
2. layer2：オーバーレイ畫像（例えば、草、透明なPNG）。
3. layer3：オーバーレイ畫像（例えば、蝶、透明なPNG）。
4. layer4これらのWebサイトで無料のベクトルバックグラウンド畫像を見つけます：

http://www.miracleart.cn/link/88cd5f09652e5b4b12be5e44148c344c

• http://www.miracleart.cn/link/e3a12e198d15821a8fcf98714770bb57
• http://www.miracleart.cn/link/8ec7ff1ac324a4bed44cc51d362e5b94
• http://www.miracleart.cn/link/7de504cb196a4909cba94d8005d2e8df
• http://www.miracleart.cn/link/437d432e126269160c1cc4e0fc72f1ee
• （注：Adobe IllustratorやPhotoshopなどのソフトウェアがベクトルファイルを編集する必要があります。

コード

HTML：に必要なファイルを含めます

（注：

は

に含まれる可能性があります。もしそうなら、冗長包含を削除してください。）

htmlのjquery.event.frame.jsjquery.jparallax.min.jsに畫像レイヤーを追加します

htmlの：

の視差プラグインを初期化します

<div id="parallax" class="clear">
    <div class="parallax-layer" style="width:1200px; height:250px;">
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555324986.png" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
    <div class="parallax-layer" style="width:500px; height:250px;">
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555497450.png" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
    <div class="parallax-layer" style="width:1200px; height:300px;">
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555488103.png" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
</div>

必要なCSSを追加：

jQuery(document).ready(function() {
    $('#parallax .parallax-layer').parallax({
        mouseport: $('#parallax')
    });
});

仕上げ

#parallax {
    position: relative;
    overflow: hidden;
    width: 950px;
    height: 250px;
    background-image: url('background.jpg');
}
.parallax-viewport {
    position: relative; /* relative, absolute, fixed */
    overflow: hidden;
}
.parallax-layer {
    position: absolute;
}

覚えておいてください：視差要素の子要素は層になり、絶対に自動的に配置されます。視差のある要素自體には

またはが必要です。

レイヤーがビューポートを越えて延長されないようにします。畫像の寸法を調整して、アニメーション速度を微調整します。小さい畫像はより速く移動します。

position: relative;これにより、基本的な視差効果が完了します。畫像サイズと位置を試して、希望するアニメーションを実現(xiàn)してください。

よくある質問セクションは、コア視差の実裝とはほとんど関係がなく、すでに言い換えられた応答に不必要な長さを追加するため、省略されています。

以上がjQuery Parallaxチュートリアル - アニメーションヘッダーの背景の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。