Beispielcode zur Implementierung des Vollbild-Scrolleffekts von fullpage.js mit CSS

Beispielcode zur Implementierung des Vollbild-Scrolleffekts von fullpage.js mit CSS

Als ich kürzlich CSS studierte, stellte ich fest, dass ich mit nur zwei CSS-Eigenschaften einen Vollbild-Scrolleffekt erstellen konnte :

  • Scroll-Snap-Typ
  • Scrollen-Einrasten-Ausrichten

Damit können Sie den Vollbild-Scrolleffekt von fullpage.js erzielen. Tatsächlich ist die Theorie dieses Vollbild-Scrolleffekts sehr einfach: Verwenden Sie js, um das Scrollen der Benutzeroberfläche zu überwachen. Wenn die Benutzeroberfläche bis zu einem bestimmten Wert scrollt, lassen Sie die Benutzeroberfläche weiter zum nächsten Bildschirm scrollen, aber! Es ist sehr mühsam, die durch die Bildschirmgröße verursachten Kompatibilitätsprobleme zu berücksichtigen.

Die beiden heute genannten Eigenschaften können fullpage.js aus den folgenden zwei Gründen nicht ersetzen:

  1. Sie haben Kompatibilitätsprobleme mit Browsern.
  2. CSS-Eigenschaften können nicht auf Ereignisse hören und können daher keine Rückruffunktion für den Abschluss der Animation bereitstellen.

1. Kompatibilität

Derzeit unterstützen gängige Browser diese beiden CSS-Eigenschaften bereits, sodass Sie sie bedenkenlos verwenden können. Wenn Kompatibilität mit dem IE-Browser erforderlich ist, wählen Sie bitte fullpage.js .

2. Verwendung

Die Verwendungsmethode ist eigentlich sehr einfach. scroll-snap-type wird auf dem übergeordneten Container des Containers platziert, der Vollbild-Scrollen benötigt , während scroll-snap-align auf dem Vollbild-Scrollcontainer platziert werden muss. Mehr dazu muss man nicht sagen. Wir können deutlich erkennen, wie diese beiden CSS-Attribute verwendet werden, indem wir uns den Code direkt ansehen.

Der vollständige Code der gesamten Webseite ist sehr einfach, fügen Sie ihn einfach unten ein:

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-kompatibel" content="IE=edge" />
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
    <title>CSS-Scroll-Snap</title>
    <Stil>
      Körper {
        Rand: 0;
      }

      .container {
        Höhe: 100vh;
        Überlauf-y: scrollen;
        /* Verwenden Sie die Scroll-Snap-Type-Eigenschaft für den übergeordneten Container */
        Scroll-Snap-Typ: y obligatorisch;
      }

      Abschnitt {
        Polsterung: 112px;
        Höhe: berechnet (100vh – 224px);
        Farbe: weiß;
        /* Verwenden Sie die Scroll-Snap-Align-Eigenschaft für den Container, der gescrollt werden muss */
        Scrollen-Snap-Align: Start;
      }

      Abschnitt:n-ter-Typ(1) {
        Hintergrundfarbe: #60af15;
      }

      Abschnitt:n-ter-Typ(2) {
        Hintergrundfarbe: #158baf;
      }

      Abschnitt:n-ter-Typ(3) {
        Hintergrundfarbe: #af1581;
      }

      Abschnitt h3 {
        Schriftgröße: 48px;
      }

      Abschnitt p {
        Schriftgröße: 20px;
      }
    </Stil>
  </Kopf>
  <Text>
    <div Klasse="Container">
      <Abschnitt>
        <h3>Hier befindet sich ein Untertitel</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus als Periode assumeda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          Isa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          Übung ist der wichtigste Ort, um das Volumen zu reflektieren
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          Fehler und explicabo harum in ipsum iste labore laborum libero magni
          Ich weiß nicht, was es bedeutet, ein guter Mensch zu sein, aber ich weiß, dass
          recusandae reprehenderit saepe ähnliche Flüssigkeit vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </Abschnitt>
      <Abschnitt>
        <h3>Hier befindet sich ein Untertitel</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus als Periode assumeda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          Isa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          Übung ist der wichtigste Ort, um das Volumen zu reflektieren
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          Fehler und explicabo harum in ipsum iste labore laborum libero magni
          Ich weiß nicht, was es bedeutet, ein guter Mensch zu sein, aber ich weiß, dass
          recusandae reprehenderit saepe ähnliche Flüssigkeit vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </Abschnitt>
      <Abschnitt>
        <h3>Hier befindet sich ein Untertitel</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus als Periode assumeda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          Isa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          Übung ist der wichtigste Ort, um das Volumen zu reflektieren
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          Fehler und explicabo harum in ipsum iste labore laborum libero magni
          Ich weiß nicht, was es bedeutet, ein guter Mensch zu sein, aber ich weiß, dass
          recusandae reprehenderit saepe ähnliche Flüssigkeit vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </Abschnitt>
    </div>
  </body>
</html>

Sie sehen, dass der Code nicht kompliziert ist. Konzentrieren wir uns auf diese beiden CSS-Eigenschaften.

3. Scroll-Snap-Typ

Diese CSS-Eigenschaft hat die folgenden Werte:

keine: Wenn der sichtbare Ansichtsbereich dieses Bildlaufcontainers gescrollt wird, wird keine Verarbeitung durchgeführt.

  • x : Der Bildlaufcontainer rastet nur an Positionen auf seiner horizontalen Achse ein.
  • y : Der Bildlaufcontainer rastet nur an Positionen auf seiner vertikalen Achse ein.
  • Block: Der Bildlaufcontainer rastet nur an den Einrastpositionen auf seiner Blockachse ein.
  • inline: Der Bildlaufcontainer rastet nur an den Einrastpositionen seiner Inline-Achse ein.
  • beide: Der Bildlaufcontainer rastet auf beiden Achsen unabhängig voneinander an seiner Position ein (und rastet möglicherweise auf jeder Achse an unterschiedlichen Elementen ein).
  • obligatorisch : Wenn der Scroll-Container gescrollt wird, wird nach Überschreiten des kritischen Wertes automatisch zum nächsten Container gescrollt.
  • Nähe : Wenn der Scroll-Container gescrollt wird, wird nach Überschreiten des kritischen Wertes nicht automatisch zum nächsten Container gescrollt.

Worauf Sie achten müssen, sind die oben fett markierten Eigenschaften. Die Verwendung von mandatory bedeutet Vollbild-Scrollen. Wenn das Scrollen einen bestimmten Schwellenwert überschreitet, wird automatisch zum nächsten Bildschirm gescrollt. Wenn das Scrollen einen bestimmten Schwellenwert nicht überschreitet, wird es zurückgesprungen.

Der Unterschied bei proximity besteht darin, dass Sie nach dem Scrollen über einen bestimmten Schwellenwert normal scrollen können (während Sie bei mandatory direkt zum nächsten Bildschirm gelangen) und dass ein Rückprall erfolgt, wenn Sie nicht über einen bestimmten Schwellenwert scrollen.

Es ist eigentlich ganz einfach, diese beiden Eigenschaften zu verstehen. Ändern Sie einfach den obigen Code und erleben Sie es selbst.

Hinweis: Verwenden Sie mandatory mit Vorsicht, wenn die Höhe des Bildlaufcontainers bereits größer ist als die Höhe des Bildschirms , da es aufgrund des erzwungenen Bildlaufs dazu führen kann, dass einige Inhalte schwer lesbar sind.

4. Scrollen-Einrasten-Ausrichten

Diese CSS-Eigenschaft hat die folgenden Werte:

keine: Der Container wird nicht an der entsprechenden Achse ausgerichtet, die im übergeordneten Container definiert ist. Start: Die Position, an der der Container erfasst wird, ist der Startteil des Containers. Ende: Die Position, an der der Container erfasst wird, ist das Ende des Containers. Mitte: Der Ort, an dem der Container erfasst wird, ist der mittlere Teil des Containers.

Ein Bild kann die durch diese Attribute repräsentierten Containerpositionen deutlich zeigen:

5. Abschließende Gedanken

Da ich festgestellt habe, dass die meisten anderen Eigenschaften von scroll-snap ernsthafte Kompatibilitätsprobleme haben , werde ich hier nicht näher darauf eingehen. Wenn Sie interessiert sind, können Sie direkt zu CSS Scroll Snap gehen, um es auszuprobieren. Allerdings reicht es eigentlich aus, die beiden oben genannten Eigenschaften zu verwenden.

Referenzartikel:

Scrollen-Einrasten-Ausrichten MDN

Scroll-Snap-Typ MDN

Praktisches CSS-Scroll-Snapping

Damit ist dieser Artikel über Beispielcode zur Implementierung des Vollbild-Scrolleffekts von fullpage.js mit CSS abgeschlossen. Weitere relevante CSS-Inhalte zum Vollbild-Scrolling finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Detaillierte Erklärung von sechs mit JavaScript implementierten Karusselleffekten für Webseitenbilder

>>:  Apache Log4j2 meldet eine Sicherheitslücke auf Nuklearebene und eine schnelle Lösung

Artikel empfehlen

Lösung für die MySQL-Installationsaufforderung „Geben Sie für weitere Hilfe bitte NET HELPMSG 3534 ein“

Bei der heutigen Installation von MySQL erscheint...

JavaScript-Canvas zum Erzielen eines Spiegelbildeffekts

In diesem Artikel wird der spezifische Code für J...

Analyse der Unfallursachen durch Unicode-Signatur BOM

Möglicherweise verwenden Sie hier Include-Dateien,...

So verbergen Sie Elemente im Web und ihre Vor- und Nachteile

Beispiel-Quellcode: https://codepen.io/shadeed/pe...

So verwenden Sie Docker zum Bereitstellen von Spring Boot und zum Herstellen einer Verbindung mit Skywalking

Inhaltsverzeichnis 1. Übersicht 1. Einführung ins...

So aktualisieren, verpacken und laden Sie Docker-Container in die Alibaba Cloud hoch

Dieses Mal werden wir versuchen, den laufenden Co...

Alibaba Cloud Centos7 Installation und Konfiguration von SVN

1. SVN-Server installieren yum installiere Subver...

Linux (Center OS7) installiert JDK, Tomcat und MySQL, um eine Ausführungsumgebung für Java-Webprojekte zu erstellen.

1. JDK installieren 1. Deinstallieren Sie die alt...

Kapselungsimplementierung des von nestjs an das Front-End zurückgegebenen Datenformats

Im Allgemeinen wird während des Entwicklungsproze...

Lösen Sie das Problem der inkonsistenten MySQL-Speicherzeit

Nachdem die Systemzeit mit Java ermittelt und in ...

Sechs Vererbungsmethoden in JS und ihre Vor- und Nachteile

Inhaltsverzeichnis Vorwort Vererbung von Prototyp...

Tutorial zum Erstellen des File-Sharing-Dienstes Samba unter CentOS6.5

Samba-Dienste: Dieser Inhalt dient als Referenz f...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 winx64 unter win10

In diesem Artikel wird die spezifische Methode zu...

Detaillierte Erläuterung der Laderegeln der require-Methode in node.js

Laderegeln der Require-Methode Laden aus dem Cach...

So implementieren Sie Lastenausgleich in MySQL

Vorwort MySQL ist ein schnelles, leistungsstarkes...