saos herunterladen - saos Quellcode herunterladen

saos

Anderer Quellcode

v1.3.1

Herunterladen

Schlanke Animation beim Scrollen

Eine sehr kleine, schlanke Komponente zum Animieren Ihrer Elemente beim Scrollen

Mit SAoS können Sie ein Element beim Scrollen einmal oder mehrmals animieren. Sie können die oberen und unteren „Trigger“ und das CSS der internen Divs definieren (nicht empfohlen, kann aber in einigen Fällen hilfreich sein). Siehe unten die Demo zur Installation und einige Beispiele?

In Bezug auf die Leistung verwendet diese Bibliothek den Intersection Observer für die meisten Browser (schämen Sie sich für Ihren Internet Explorer).

⚡ Demo

Anleitung zur Installation

Npm

 npm i saos --save-dev

Garn

 yarn add -D saos

Hinweis: Sapper unterstützt nur Bibliotheken als DEV-Abhängigkeiten . Wenn Sie diese Bibliothek wirklich als normale Abhängigkeit von Sapper verwenden möchten, stellen Sie sicher, dass import Saos from 'saos/src/Saos.svelte'; sonst bekommst du Probleme mit SSR!

Wie zu verwenden

Grundlegende Verwendung:

Importieren Sie zunächst das Paket auf Svelte

 import Saos from "saos" ;

Definieren Sie dann Ihre @keyframes-Animation als -global- auf schlank

 @keyframes -global-from-left {
  0 % {
    transform : rotateX ( 50 deg ) translateX ( -200 vw ) skewX ( -50 deg );
    opacity : 1 ;
  }
  100 % {
    transform : rotateX ( 0 deg ) translateX ( 0 ) skewX ( 0 deg );
    opacity : 1 ;
  }
}

Fügen Sie abschließend den Keyframe-Namen ohne -global- und die anderen Animationsparameter hinzu

 < Saos animation = { "from-left 4s cubic-bezier(0.35, 0.5, 0.65, 0.95) both"} >
  < div > < p > animation: from-left </ p > </ div >
</ Saos >

Über den Animationsparameter hinaus können Sie Folgendes verwenden:

animation_out -> um eine Animation abzuspielen, wenn das Element nicht mehr „sichtbar“ ist (verwenden Sie oben und unten, um dies zu definieren), Standard: „none; Deckkraft: 0“
einmal -> wenn die Animation nur einmal oder mehrmals abgespielt wird, Standard: false
oben -> die Oberseite des Beobachters, verwenden Sie einen positiven Wert, um die Animation abzuspielen, nachdem die Oberseite sichtbar ist, Standard: 0
unten -> die Unterseite des Beobachters, verwenden Sie einen positiven Wert, um die Animation abzuspielen, nachdem die Unterseite sichtbar ist, Standard: 0
css_observer -> das CSS des Div, das der Beobachter ist. Die Verwendung wird nicht empfohlen, ist aber hier?, Standard: „“
css_animation -> das CSS des Div, das die Animation darstellt. Die Verwendung wird nicht empfohlen, ist aber hier?, Standard: „“

Und wir haben auch reaktive Sendungen!

Sie können so etwas tun:

 // Create a handler on your script

function handleObserver ( x ) {
  console . info ( x . detail . observing ) ;
}

// Use the `update` event on your html that will be dispatched every time that the `observing` update!

< Saos on : update = { handleObserver } > ... < / Saos >