ScrollRevealのデモ
Origin
default: bottom
動作の起点となる方向。指定の方向から要素の移動が始まる
まずはデフォルト
次は左から
次は右から
さいごに上から
...
Distance
default: '20px'
アニメーションで移動する距離。
以下では移動がわかりやすいようにorigin: 'left'を指定しています
まずはデフォルト
次は0を指定
次は100pxを指定した場合
...
Duration
default: 500
アニメーションの長さ。単位はミリセカンド（ms / milliseconds)
まずはデフォルト
次にデフォルトの半分（250 ms）
次はデフォルトの2倍（1000 ms）。だいぶゆっくり
次は3秒（3000 ms）を指定。かなり長い
...
Delay
default: 0
アニメーションの遅延。単位はミリセカンド（ms）
まずはデフォルト
次は1000msの遅延。
要素が表示されてアニメーションが始まるまで1秒。
結構長いですね
次は2000ms。長すぎ？
次は3000ms。
長すぎて気づかれない可能性もありそうです
...
Rotate
default: { x: 0, y: 0, z: 0 }
X、Y、Z軸で回転を指定できます。
以下ではアニメーションを見やすくするために長さを3秒に設定しています
まずはX軸を基軸に180度回転させます。
次はY軸を基軸に180度回転させます。
次はZ軸を基軸に180度回転させます。
次は3軸すべてに180度回転を指定してみます。
なかなかアクロバティックな動きになりますねw
Opacity
default: 0
アニメーション開始時の透明度。
デフォルトは0なので要素が見えない状態からアニメーションが始まります。
まずはデフォルト
次に透明度を0.5に設定してもの
次は1に指定
...
Scale
default: 0.9
アニメーションが始まる際の要素のスケール（大きさ）
まずはデフォルト。0.9（少し小さいサイズ）からアニメーションが始まります
次に1。等倍です
次は0.5。半分のサイズ
次は2。倍のサイズ
...
Easing
default: 'cubic-bezier(0.6, 0.2, 0.1, 1)'
アニメーションのイージング。デフォルトは上記の設定。ease、ease-in、ease-out、ease-in-out、linearなどのキーワードも使用可
まずはデフォルト
次は「ease」
次は「linear」
次は「ease-in」
次は「ease-out」
次は「ease-in-out」
違いがわかりずらいので、すべて一緒に見てみましょう。
長さを2秒、距離を400px、透明度を1、スケールを1にしました
それでもわかりにくい？笑
Mobile
default: true
以下はfalseに設定。
あくまでUserAgentでの検知ですが、iPhoneやAndroidで表示されないはずです。
...
useDelay
default: 'always'
遅延の種類を指定できます。
以下、全てにdelay: 2000を指定しています。
まずはデフォルト
次ははじめの1回だけ遅延
次は読み込まれた時に遅延。ページの最上部に表示する要素などに使えそうです。その他ではあまり意味ないかもしれません
...
viewFactor
default: 0.2
アニメーションを開始するために表示が必要な要素の割合。0.2 = 20%
以下の例では、distance: 0、scale: 0も指定しています
まずはデフォルト
次は0.5。要素が半分見えたところでアニメーションが開始します
次は1.0
次は0
...
viewOffset
default: { top: 0, right: 0, bottom: 0, left: 0 }
例えば、上に固定のナビゲーションバーなどがある場合に使える
まずはデフォルト
次は上に100pxのオフセットを設定
...