JQuery Parallax Tutorial - Animated Header Hintergrund

Dieses Tutorial zeigt, wie ein faszinierender Parallaxen -Hintergrundeffekt mit JQuery erstellt wird. Wir werden ein Header -Banner mit geschichteten Bildern bauen, die eine atemberaubende visuelle Tiefe erzeugen. Das aktualisierte Plugin funktioniert mit JQuery 1.6.4 und später.

Laden Sie die Bilder

herunter

Sie benötigen vier Hintergrundbilder:

1. layer1: Haupthintergrund (z. B. ein grüner Vektorhintergrund).
2. layer2: Overlay -Bild (z. B. ein Frosch, transparenter Png).
3. layer3: Overlay -Bild (z. B. Gras, transparentes Png).
4. layer4: Overlay -Bild (z. B. Schmetterlinge, transparente PNG).

Finden Sie kostenlose Vektor -Hintergrundbilder auf diesen Websites:

• 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

(Hinweis: Sie benötigen Software wie Adobe Illustrator oder Photoshop, um Vektordateien zu bearbeiten.)

Der Code

Fügen Sie die erforderlichen Dateien in Ihr HTML ein:

(Hinweis: jquery.event.frame.js kann in jquery.jparallax.min.js enthalten sein. Wenn ja, entfernen Sie die redundante Aufnahme.)

Fügen Sie die Bildebenen zu Ihrem HTML hinzu :

<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>

Initialisieren Sie das Parallaxe -Plugin in Ihrem HTML :

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

Fügen Sie die erforderlichen CSS hinzu:

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

Denken Sie daran: Kinderelemente eines parallaxierten Elements werden zu Ebenen und werden automatisch absolut positioniert. Das parallaxierte Element selbst benötigt position: relative; oder position: absolute;. overflow: hidden; verhindert, dass Schichten das Ansichtsfenster ausfallen. Passen Sie die Bildabmessungen auf Feingeschwindigkeiten an. Kleinere Bilder bewegen sich schneller.

Dies vervollständigt den grundlegenden Parallaxeffekt. Experimentieren Sie mit Bildgrößen und Positionen, um Ihre gewünschte Animation zu erreichen.

Der häufig gestellte Fragen wurde weggelassen, da er weitgehend nicht mit der Kern -Parallaxe -Implementierung zusammenhängt und der bereits paraphrasierten Antwort unnötige Länge hinzufügt.

Das obige ist der detaillierte Inhalt vonJQuery Parallax Tutorial - Animated Header Hintergrund. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!