Slashpage Help Center
Sign In
Home
購読
アニメーション
アニメーションを追加
アニメーションの種類
入場
ホバー
押す
繰り返し
スクロール
ブロックがスクロール位置と時間に応じて多様に移動し、内容を強調する効果を与えます。
アニメーションを追加
編集画面で、アニメーションを適用するブロックのハンドル(
⋮⋮
)>
アニメーション
をクリックします。アニメーションウィンドウの右上
+
をクリックして、入場、ホバー、タップ、繰り返し、スクロールのいずれかを選択します。
目的のエフェクトを選択して設定値を調整します。
他の種類のアニメーションを重複して適用するには、アニメーションウィンドウの右上
+
をもう一度クリックします。
同じアニメーションを複数のブロックに一度に適用したい場合は、スタイルコピー機能を活用してみてください。
スタイルのコピー: Cmd(Ctrl) + Option(Alt) + C
スタイルの貼り付け: Cmd(Ctrl) + Option(Alt) + V
アニメーションの種類
トリガー(アニメーションを開始するための行為)に応じて大きく5つに分けられます。
入場
ブロックが画面に表示されるとすぐにアニメーションが開始され、スクロール位置とは無関係に事前設定された期間だけ動作します。
Slide
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Fade in
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Scale in
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Rotate
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Wave(テキストのみ)
アニメーション効果でテキストを強調してみてください。
Type in (テキストのみ)
アニメーション効果でテキストを強調してみてください。
Blur in (テキストのみ)
アニメーション効果でテキストを強調してみてください。
Scramble(テキストのみ)
アニメーション効果でテキストを強調してみてください。
Split text(テキストのみ)
アニメーション効果でテキストを強調してみてください。
Stagger (背景ブロックとセクションのみ)
Welcome to Slashpage
ボタン
ボタン
ホバー
マウスカーソルをブロックの上に置いている間、アニメーションは機能し、カーソルが外れると元の状態に戻ります。
スケール
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Change color
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
マウスカーソルをこのボックスの上に置きます。
Text reveal
マウスカーソルをこのテキストの上に置きます。
Text curtain
マウスカーソルをこのテキストの上に置きます。
押す
ブロックをクリック(タッチ)するとアニメーションが機能し、カーソル(手)を離すと元の状態に戻ります。
スケール
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
この灰色のボックスを押してください。
Change color
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
この灰色のボックスを押してください。
Text reveal
このテキストを押してみてください。
Text curtain
このテキストを押してください。
繰り返し
サイトにアクセスするとすぐにアニメーションが開始され、スクロール位置に関係なく動作し続けます。
Breathe
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Rotate
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Heartbeat
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Slide(画像スライダのみ)
スクロール
スクロール中にブロックが画面に表示され始めてから見えなくなるまで、アニメーションはスクロール位置に沿って連続的に動作します。
Fade in
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Fade out
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Parallax
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Scale in
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3
Rotate
ボタン1
ボタン1
ボタン2
ボタン2
ボタン3
ボタン3