Tutoriel JQuery Parallax - Contexte d'en-tête animé

Ce tutoriel montre comment créer un effet de fond de parallaxe captivant à l'aide de jQuery. Nous allons construire une bannière d'en-tête avec des images en couches qui créent une profondeur visuelle étonnante. Le plugin mis à jour fonctionne avec jQuery 1.6.4 et plus tard.

Téléchargez les images

Vous aurez besoin de quatre images d'arrière-plan:

1. layer1: fond principal (par exemple, un fond vectoriel vert).
2. layer2: Image de superposition (par exemple, une grenouille, PNG transparent).
3. layer3: Image de superposition (par exemple, l'herbe, PNG transparent).
4. layer4: Image de superposition (par exemple, papillons, PNG transparent).

Trouver des images d'arrière-plan vectorielles gratuites sur ces sites Web:

• https://www.php.cn/link/88cd5f09652e5b4b12be5e44148c344c
• https://www.php.cn/link/e3a12e198d15821a8fcf9871470bb57
• https://www.php.cn/link/8ec7ff1ac324a4bed44cc51d362e5b94
• https://www.php.cn/link/7de504cb196a4909cba94d8005d2e8df
• https://www.php.cn/link/437d432e126269160c1cc4e0fc72f1ee

(Remarque: vous aurez besoin de logiciels comme Adobe Illustrator ou Photoshop pour modifier les fichiers vectoriels.)

le code

Incluez les fichiers nécessaires dans votre HTML:

(Remarque: jquery.event.frame.js peut être inclus dans jquery.jparallax.min.js. Si c'est le cas, supprimez l'inclusion redondante.)

Ajoutez les calques d'image à vos HTML :

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

Initialisez le plugin Parallax dans votre HTML :

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

Ajouter le CSS requis:

#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;
}

Finition up

Rappelez-vous: les éléments enfants d'un élément parallaxé deviennent des couches et sont automatiquement positionnés absolument. L'élément parallaxé lui-même a besoin position: relative; ou position: absolute;. overflow: hidden; empêche les couches de s'étendre au-delà de la fenêtre. Ajustez les dimensions de l'image aux vitesses d'animation affiner. Les images plus petites se déplacent plus rapidement.

Cela complète l'effet de parallaxe de base. Expérimentez les tailles d'image et les positions pour réaliser l'animation souhaitée.

La section des questions fréquemment posées a été omise car elle n'est largement pas liée à l'implémentation de parallaxe principale et ajoute une durée inutile à la réponse déjà paraphrasée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!