「Blocks Animation」設定サンプルページ
このページは「SWELLでできるアニメーション演出｜初心者でもふわっと動きをプラス」の記事で紹介したアニメーションを、実際に体験できるサンプルページです。
「Blocks Animation」プラグインを使った設定が実際にどう動くのかをご覧いただけます。
下にスクロールすると、
のサンプルが順番に表示されます。
各セクションに設定内容を記載しているので、気に入った動きがあれば同じ設定を試してみてください。
1. フェードイン
表示サンプル（メインビジュアル風）
あなたらしく、心地よく暮らす
自分のペースで始める、すっきり心地よい暮らし
片付けが苦手でも大丈夫。完璧を目指さなくていいんです。
あなたにとって「ちょうどいい」を見つけることが、
心地よい暮らしへの第一歩。
- アニメーション：フェードイン
- 遅延：なし / 500ミリ秒 / 1秒 / 1.5秒 / 2秒
- 速度：やや低速
- カバーブロック、見出し、段落、SWELLボタンを使用
表示サンプル（サービス紹介風）
選ばれる3つの理由
理由1.
初心者でも安心のサポート
わからないことはいつでも相談OK。丁寧にサポートします。
理由2.
あなたのペースで無理なく
ライフスタイルに合わせて、自分のペースで進められます。
理由3.
確かな実績と信頼
これまで500名以上の方にご利用いただいています。
- アニメーション：フェードイン
- 遅延：なし（見出し） / 200ミリ秒 / 400ミリ秒 / 600ミリ秒
- 速度：やや低速
- SWELLリッチカラムブロックを使用
2. 下からスライドイン
表示サンプル（料金プラン風）
料金プラン
- アニメーション：下からスライドイン
- 遅延：なし / 100ミリ秒 / 200ミリ秒（遅延を100msずつずらす）
- 速度：やや低速
- SWELLリッチカラムを使用
表示サンプル（チェックリスト風）
初回カウンセリング無料
まずはお気軽にご相談ください。あなたのお悩みをじっくりお伺いします。
あなた専用プランを作成
ライフスタイルや目標に合わせて、無理のないプランをご提案します。
LINEでいつでも相談OK
気になることがあれば、いつでもLINEで質問できます。
無理な勧誘は一切なし
安心してご利用いただけるよう、強引な営業は一切行いません。
- アニメーション：下からスライドイン
- 遅延：なし / 100ミリ秒 / 200ミリ秒 / 300ミリ秒（遅延を100msずつずらす）
- 速度：デフォルト
- メディアとテキスト（カード型）を使用
表示サンプル（画像ギャラリー風）
- アニメーション：下からスライドイン
- 遅延：なし / 100ミリ秒 / 200ミリ秒 / … / 500ミリ秒（遅延を100msずつずらす）
- 速度：やや低速
- 画像ギャラリーを使用
3. 左からスライドイン / 右からスライドイン
表示サンプル（ステップ風）
- アニメーション：左からスライドイン
- 遅延：なし / 100ミリ秒 / 200ミリ秒（遅延を100msずつずらす）
- 速度：デフォルト
- SWELLステップブロックを使用
表示サンプル（お客様の声風）
30代 / Aさん最初は不安でしたが、丁寧なカウンセリングで安心できました。 施術も痛みがなく、1ヶ月後には肌のトーンが明るくなって 自分でもびっくり！周りからも『肌きれいになったね』と 言われるようになりました。
40代 / 主婦忙しくて続けられるか心配でしたが、 自分のペースで通えるので無理なく継続できています。 スタッフの方も親身に相談に乗ってくれて、 本当にここを選んで良かったです。
20代 / 会社員友人の紹介で通い始めました。最初は半信半疑でしたが、3ヶ月経った今では朝のメイク時間が半分に！肌の調子が良いだけで、1日の気分が全然違います。もっと早く始めれば良かったです。
- アニメーション：左からスライドイン / 右からスライドイン
- 遅延：なし / 100ミリ秒 / 200ミリ秒（遅延を100msずつずらす）
- 速度：やや低速
- SWELLふきだしブロックを使用
4. ボタンホバーアニメーション
表示サンプル（脈打つボタン）
- アニメーション：脈打つ
- 遅延：なし
- 速度：デフォルト
- Play on Hover：ON
- SWELLボタン（立体）を使用