CSS kompletter Parallax-Scrolling-Effekt

1. Was ist

Beim Parallax-Scrolling handelt es sich um die Bewegung mehrerer Hintergrundebenen mit unterschiedlicher Geschwindigkeit, wodurch ein dreidimensionaler Bewegungseffekt entsteht und ein hervorragendes visuelles Erlebnis geboten wird.

Wir können die Webseite in folgende Ebenen unterteilen: Hintergrundebene, Inhaltsebene, schwebende Ebene

Wenn Sie das Mausrad drehen, bewegt sich jede Ebene mit einer anderen Geschwindigkeit, wodurch ein optischer Unterschiedseffekt entsteht.

2. Umsetzung

Es gibt mehrere Möglichkeiten, mit CSS den Parallax-Scrolling-Effekt zu erzielen:

• Hintergrundanhang
• transform:translate3D

Hintergrundanhang

Mit dieser Funktion können Sie festlegen, ob das Hintergrundbild fixiert ist oder mit dem Rest der Seite mitrollt.

Die Werte lauten wie folgt:

• scrollen: Der Standardwert, das Hintergrundbild bewegt sich, wenn der Rest der Seite scrollt
• behoben: Das Hintergrundbild bewegt sich nicht, wenn der Rest der Seite scrollt
• inherit: erbt den Wert des background-attachment-Attributs des übergeordneten Elements

Um eine Scroll-Parallaxe zu erreichen, müssen Sie die Eigenschaft „background-attachment“ auf „fixiert“ setzen, sodass der Hintergrund relativ zum Ansichtsfenster fixiert ist. Auch wenn ein Element über einen Scroll-Mechanismus verfügt, scrollt der Hintergrund nicht mit dem Inhalt des Elements.

Mit anderen Worten: Der Hintergrund wird an seiner Ausgangsposition fixiert.

Der zentrale CSS-Code lautet wie folgt:

Abschnitt {
    Höhe: 100vh;
}

.g-img {
    Hintergrundbild: URL(...);
    Hintergrundanhang: behoben;
    Hintergrundgröße: Abdeckung;
    Hintergrundposition: Mitte Mitte;
}

Das Gesamtbeispiel sieht wie folgt aus:

<Stil>
div {
            Höhe: 100vh;
            Hintergrund: rgba(0, 0, 0, .7);
            Farbe: #fff;
            Zeilenhöhe: 100vh;
            Textausrichtung: zentriert;
            Schriftgröße: 20vh;
        }

        .a-img1 {
            Hintergrundbild: URL (https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
            Hintergrundanhang: behoben;
            Hintergrundgröße: Abdeckung;
            Hintergrundposition: Mitte Mitte;
        }

        .a-img2 {
            Hintergrundbild: URL (https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
            Hintergrundanhang: behoben;
            Hintergrundgröße: Abdeckung;
            Hintergrundposition: Mitte Mitte;
        }

        .a-img3 {
            Hintergrundbild: URL (https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);
            Hintergrundanhang: behoben;
            Hintergrundgröße: Abdeckung;
            Hintergrundposition: Mitte Mitte;
        }
</Stil>
 <div Klasse="a-text">1</div>
    <div Klasse="a-img1">2</div>
    <div Klasse="a-text">3</div>
    <div class="a-img2">4</div>
    <div Klasse="a-text">5</div>
    <div class="a-img3">6</div>
    <div Klasse="a-text">7</div>

transform:translate3D

Schauen wir uns zunächst die beiden Konzepte „Transformation“ und „Perspektive“ an:

• transform: CSS3-Attribut, das Elemente (2D/3D) transformieren kann, einschließlich Verschiebung, Drehung, Skalierung usw.
• Perspektive: CSS3-Attribut. Wenn das Element eine 3D-Transformation beinhaltet, kann die Perspektive den von unseren Augen wahrgenommenen 3D-Stereoskopieeffekt definieren, d. h. das Raumgefühl

Das 3D-Perspektivdiagramm sieht wie folgt aus:

Zum Beispiel:

<Stil>
    html {
        Überlauf: versteckt;
        Höhe: 100%
    }

    Körper {
        /* Das übergeordnete Element des Parallax-Elements benötigt eine 3D-Perspektive */
        Perspektive: 1px;
        Transformationsstil: 3D bewahren;
         Höhe: 100%;
        Überlauf-y: scrollen;
        Überlauf-x: versteckt;
    }
    #app{
        Breite: 100vw;
        Höhe: 200vh;
        Hintergrund: himmelblau;
        Polsterung oben: 100px;
    }
    .eins{
        Breite: 500px;
        Höhe: 200px;
        Hintergrund: #409eff;
        transformieren: übersetzenZ(0px);
        Rand unten: 50px;
    }
    .zwei{
        Breite: 500px;
        Höhe: 200px;
        Hintergrund: #67c23a;
        transformieren: übersetzenZ(-1px);
        Rand unten: 150px;
    }
    .drei{
        Breite: 500px;
        Höhe: 200px;
        Hintergrund: #e6a23c;
        transformieren: übersetzenZ(-2px);
        Rand unten: 150px;
    }
</Stil>
<div id="app">
    <div Klasse="eins">eins</div>
    <div class="zwei">zwei</div>
    <div Klasse="drei">drei</div>
</div>

Das Prinzip, um auf diese Weise optische Unterschiede zu erzielen, ist wie folgt:

• Wenn der Container auf „Transform-Style: Preserve-3D“ und „Perspective: XPX“ eingestellt ist, werden die untergeordneten Elemente in diesem Container im 3D-Raum platziert.
• Untergeordnete Elemente legen unterschiedliche Transformationen fest: translateZ (). Zu diesem Zeitpunkt ist der Abstand zwischen verschiedenen Elementen und dem Bildschirm (unseren Augen) in der 3D-Z-Achsenrichtung unterschiedlich.
• Da beim Scrollen der Bildlaufleiste die untergeordneten Elemente unterschiedliche Transformationen aufweisen: TranslateZ (), sind auch die Auf- und Ab-Abstände ihres Scroll-TranslateY relativ zum Bildschirm (unseren Augen) unterschiedlich, wodurch der Effekt der Scroll-Parallaxe erzielt wird.

Oben finden Sie Einzelheiten zur Verwendung von CSS zum Erzielen eines Parallax-Scrolling-Effekts. Weitere Informationen zum CSS-Parallax-Scrolling-Effekt finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!