jQuery Parallaxチュートリアル - アニメーションヘッダーの背景

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

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

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

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

https://www.php.cn/link/88cd5f09652e5b4b12be5e44148c344c

• https://www.php.cn/link/e3a12e198d15821a8fcf98714770bb57
• https://www.php.cn/link/8ec7ff1ac324a4bed44cc51d362e5b94
• https://www.php.cn/link/7de504cb196a4909cba94d8005d2e8df
• https://www.php.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;これにより、基本的な視差効果が完了します。画像サイズと位置を試して、希望するアニメーションを実現してください。

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

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