Webサイトのファーストビュー部分を、実戦でありそうなテーマ(トンマナ)でアニメーションをつけました。
それぞれ解説していきます。

アニメーションのキーワード🫰

• ゆっくりなめらか
  • なるべく緩急はつけない
• duration長め
  • 2秒くらいでもいいかも
• イージング緩やか
  • Power1,Power2あたり
  • 基本~Out系
• 常にゆっくり動いてる
  • 高級感
• フェードインアウト
  • よく使うが、でかい画像のopacity操作を負荷が高くなりがちなので注意
• ゆるやかな変化
  • 変化するパラメータ量は抑えめ。scale=1.12→1.0

デモ
https://ikeryou.jp/sjintr/1/0/

ソースコード
https://github.com/ikeryou/sj_intr_1/blob/main/0/main.js

/*

背景がフェードインし終わっても、スケールを動かし続けて止まってる印象を与えない。
背景がゆっくりスケーリングしながら、テキストも緩やかに表示。
常に何かが動いてる間に要素を表示させて、常に動いてるテンポを大事にする。
フェードイン以外にもぼかしとかは相性がよいが負荷高いの大きい要素に使用するときは要注意。
テキストも背景んようにゆっくりスケーリングしたいが、DOMでやる場合ピクピクうごく場合があるのでやりづらい。
どうしてもの場合はcanvas、webgl

アニメーションのキーワード🫰

• 直線的
  • 右から左など全体で揃えた方がよい
  • バラバラだとポップさが出る(クールでポップならOK)
• イージング強め
  • Power3,Expo
  • inOut系
  • 最後だけきゅっと止まるようなのをカスタムしてもいい
• モーションの時間短め(に感覚的に見えるように)
  • durationだけのことではなく、duration=2でもイージングがきつめなら感覚的に短いモーションにみえるのでそういうこと

デモ
https://ikeryou.jp/sjintr/1/1/

ソースコード
https://github.com/ikeryou/sj_intr_1/blob/main/1/main.js

/*

背景、テキスト共に直線的なアニメーションにした。
その際にアニメーションの方向は揃える。
イージングはExpoInOutできつめにして、durationは1秒くらい。
FIXするまでの秒数をあんまり長くしない。
勢い大事。

アニメーションのキーワード🫰

• アニメーションさせる要素多め
  • 単語ごとにモーション
  • opacity、scale、rotaion、translate、など多くのパラメータをアニメーションさせる
• ランダム
  • 初期角度や位置などランダムにするとわちゃわちゃ感が出てポップさが出る
• バネ系のイージング
  • Elastic.easeOut.config(1, 0.75)
• いきなりでてくる
  • フェード系はあまり使わないか抑える
  • ぱっと出てきても以外と違和感ない
• テンポ早め
  • にぎやかさを重視

デモ
https://ikeryou.jp/sjintr/1/2/

ソースコード
https://github.com/ikeryou/sj_intr_1/blob/main/2/main.js

/*

ポップ系の大きい背景のモーション悩む。。今回はborderRadiusを使ったちょっと変わった感じに。
(webglを使って背景を分解してバラバラに出すやつとか相性よい)
タイトルは１文字ずつ分けて、y、scale、rotaionをアニメーションさせて、にぎやかな感じに。
rotaionの初期値はランダムに決定し予測できない楽しさを表現。
タイトル下のテキストは、さりげなく出して派手なタイトルのモーションの邪魔をしないように。

よくあるテーマ別にアニメーションのキーワードとサンプルを挙げた。
どれも汎用的に使えると思う。
たとえば、"高級感"＋"クール"。なモーションをつくるときは、上記のゆっくり、直線的で、きつめなイージングを用いたアニメーションなら大きくトンマナを外すことはないと思う。
アニメーションに迷った時はこういったテーマに合わせたキーワードを整理すると作りやすい。
MTG時にトンマナを擦り合わせる時こういういったキーワードを用いて擦り合わせることが多い。
(人によっては「ゆっくり」の捉え方が違ってたりするのでやはり細かい確認は場合によっては必要)
キーワードを知ることも大事だが、イコール気持ちのいいアニメーションを作れるとはまた違うのでアニメーションを考える練習と実装する練習は必要。
次回は実践にするかどうかは相談。

• 高級感
• 落ち着いた
• クール
• スタイリッシュ
• かっこいい
• 可愛い
• ポップ
• アクティブ、元気

上記のキーワードを1つ以上選び、今回のような仮想ファーストビューのアニメーションを実装する。
sjサーバーのどこかにアップして見れるようにする。

背景画像のフリー素材はこことか
https://pixabay.com/ja/

タイトル等のテキストは自由
今回のデモを改造する形でもOK
Canvas、WebGL有り？無し？
今回は出てくるまでのモーションのみ。FIX後にずっと動くとか、マウスインタラクションはなし？