saos

スクロール上の洗練されたアニメーション

スクロール時に要素をアニメーション化する非常に小さな細いコンポーネント

SAoS を使用すると、スクロール時に要素を 1 回または複数回アニメーション化できます。上部と下部の「トリガー」と内部 div の CSS を定義できます (推奨されませんが、場合によっては役に立ちます)。以下のデモを参照して、インストール方法を確認してください。そしていくつかの例は？

パフォーマンスの点で、このライブラリはほとんどのブラウザで Intersection Observer を使用します (Internet Explorer は残念です)。

⚡ デモ

---

インストール方法

• Npm

 npm i saos --save-dev

• 糸

 yarn add -D saos

注: Sapper は DEV 依存関係としてライブラリのみをサポートします。このライブラリを Sapper の通常の依存関係として使用したい場合は、次のようにインポートしてくださいimport Saos from 'saos/src/Saos.svelte';そうしないと SSR に問題が発生します。

使用方法

基本的な使い方:

• まず Svelte にパッケージをインポートします

 import Saos from "saos" ;

• 次に、@keyframes アニメーションを -global- on svelte として定義します。

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

• 最後に、-global- およびその他のアニメーション パラメータを付けずにキーフレーム名を追加します。

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

アニメーションパラメータ以外にも、以下を使用できます。

• anime_out -> 要素が「表示」されなくなったときにアニメーションを再生します (これを定義するには上部と下部を使用します)、デフォルト: 「なし; 不透明度: 0」
• 1 回 -> アニメーションが 1 回だけまたは複数回再生される場合、デフォルト: false
• top -> オブザーバーの上部。上部が表示された後にアニメーションを再生するには正の値を使用します。デフォルト: 0
• 底部 -> オブザーバーの底部。底部が表示された後にアニメーションを再生するには正の値を使用します。デフォルト: 0
• css_observer -> オブザーバーである div の CSS。使用はお勧めしませんが、ここにありますか?、デフォルト: ""
• css_animation -> アニメーションである div の CSS。使用はお勧めしませんが、ここにありますか?、デフォルト: ""

リアクティブディスパッチもあります!

次のようなことができます。

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

そしてそれはうまくいきます！すごいですね？デモの最後のカードを見てください

ここでたくさんの使用法を見ることができます

(私のように) 独自のアニメーションを作成するのが面倒な場合は、animista を見てください。