Realistische Buchseiten-Flip-Animation in JavaScript

Blog

Realistische Buchseiten-Flip-Animation in JavaScript

StPageFlip

Leistungsstarke, einfache und flexible JS-Bibliothek zum Erstellen realistischer und schöner Umblättereffekte.



Merkmale

  • Funktioniert mit einfachen Bildern auf Leinwand und komplexen HTML-Blöcken
  • Hat eine einfache API und flexible Konfiguration
  • Kompatibel mit Mobilgeräten
  • Unterstützt Quer- und Hochformat-Bildschirmmodus
  • Unterstützt weiche und harte Seitentypen (nur im HTML-Modus)
  • Verlass dich nicht

Demo und Dokumente: https://nodlik.github.io/StPageFlip/



Für React.JS können Sie Folgendes verwenden: https://nodlik.github.io/react-pageflip/

Docs (von TypeDoc generiert): https://nodlik.github.io/StPageFlip/docs/index.html



Installation

Sie können die neueste Version mit npm installieren:

Python-Spickzettel pdf 2020

npm install page-flip

Oder laden Sie das Bundle von Github herunter

Verwendungszweck

Wenn Sie das Paket von npm installiert haben, sollten Sie PageFlip aus dem Page-Flip-Paket importieren oder einfach |_+_| . verwenden Schild:

So erstellen Sie ein neues PageFlip-Objekt:

|_+_|- Wurzelelement, in dem das Buch erstellt wird

|_+_| - Konfigurationsobjekt.

Um auf einer Leinwand zu zeichnen, verwenden Sie |_+_|:

import {PageFlip} from 'page-flip'; const pageFlip = new PageFlip(htmlParentElement, settings); // or if you're using a script tag and page-flip.browser.js: const pageFlip = new St.PageFlip(htmlParentElement, settings);

Zum Beispiel:

htmlParentElement - HTMLElement settings: object

Verwenden Sie |_+_| -Attribut, um den Seitentyp (|_+_|) anzugeben und die Flipping-Animation zu definieren.

Konfig

Um die Konfiguration festzulegen, definieren Sie diese Parameter beim Erstellen eines Objekts:

  • |_+_| - erforderlich
  • |_+_| - erforderlich
  • |_+_| - Vorgabe: |_+_| Ob das Buch unter dem übergeordneten Element gestreckt wird oder nicht
  • |_+_| Sie müssen Schwellenwerte mit Größe festlegen: |_+_|
  • |_+_| - Vorgabe: |_+_| Beim Umblättern Schatten zeichnen oder nicht
  • |_+_| (Millisekunden) - Standard: |_+_| Animationszeit spiegeln
  • |_+_| - Vorgabe: |_+_| Wechseln in den Hochformatmodus aktivieren
  • |_+_| - Vorgabe: |_+_| Anfangswert für Z-Index
  • |_+_| - Vorgabe: |_+_| Seitennummer, ab der die Anzeige gestartet werden soll
  • |_+_| - Vorgabe: |_+_| Wenn dieser Wert wahr ist, entspricht das Elternelement der Größe des Buches
  • |_+_| - Vorgabe: |_+_| Schattenintensität (1: maximale Intensität, 0: versteckte Schatten)
  • |_+_| - Vorgabe: |_+_| Wenn dieser Wert wahr ist, werden die erste und die letzte Seite als hart markiert und im Einzelseitenmodus angezeigt
  • |_+_| - Vorgabe: |_+_| Deaktivieren Sie das Scrollen von Inhalten, wenn Sie ein Buch auf Mobilgeräten berühren

Veranstaltungen

Um Ereignisse abzuhören, verwenden Sie die Methode |_+_|:

loadFromImages

Verfügbare Veranstaltungen:

  • |_+_| - ausgelöst durch Seitenumblättern
  • |_+_| - ausgelöst, wenn sich die Seitenausrichtung ändert
  • |_+_| - ausgelöst, wenn sich der Status des Buches ändert

Das Ereignisobjekt hat zwei Felder: |_+_| und |_+_|

Methoden