全力のタイトルを作ってみた

「全力の静的サイトを作ってみた」で、ページを開いた瞬間にタイトルの文字が1文字ずつ飛び込んでくる演出を入れました。あの動きは、CSSだけで作っています。

あのタイトル演出を見て思ったんです。タイトルの1行だけに全力を注いだら、どこまでいけるのか。

この記事では、同じ「全力のタイトルを作ってみた」という13文字に対して、10種類のアニメーションを順番にかけていきます。すべてCSSのみ。JavaScriptは使っていません。

では、いきましょう。

1. 文字登場

1文字ずつ、下から回転しながら現れます。ぼやけた状態からピントが合うように浮かび上がるのがポイントです。

2. ネオングロウ

文字の背後からネオン管のような光がにじみ出ます。青と紫のグロウが交互に呼吸するように明滅して、たまにチラッとちらつきます。

3. グリッチ

映像が壊れたような一瞬のズレ。上半分と下半分が別々に動いて、色がにじむ。正常に戻ったと思ったら、またバグる。

4. ウェーブ

文字が海面のように波打ちます。1文字ずつタイミングがずれているので、左から右へ波が伝わっていくように見えます。浮くたびに色が変わります。

5. グラデーション

文字の色が虹のように流れ続けます。背景色が動いているのではなく、文字そのものが透明になって背後のグラデーションが透けて見える仕組みです。

6. タイプライター

誰かがキーボードを打っているように、1文字ずつ現れます。右端でカーソルが点滅し続けます。

7. 3D回転

文字列全体が立体的に傾きます。左に傾くと青い影、右に傾くと緑の影。奥行きを感じさせるのは、CSSのperspectiveというプロパティです。

8. パーティクル

文字の周囲から光の粒が放射状に飛び散ります。文字自体もゆっくり発光しています。粒の色と方向はそれぞれ違います。

9. 分解・再構築

文字がバラバラに吹き飛んで、また元の位置に戻ってきます。奇数番目は左上へ、偶数番目は右下へ。散った瞬間に色が変わり、戻ると白に戻ります。

10. 最終形態

全部載せです。背景が呼吸し、光が回転し、文字は1文字ずつ飛び込んでから浮遊し続けます。グラデーションで色が変わり、影が脈動する。タイトル1行のために、ここまでやりました。

まとめ

「全力のタイトルを作ってみた」というタイトル1行に、10種類のCSSアニメーションをかけました。

1. 文字登場 — 下から回転して浮かび上がる
2. ネオングロウ — 光がにじんで明滅する
3. グリッチ — 壊れたように色がズレる
4. ウェーブ — 波のように上下する
5. グラデーション — 虹色が流れ続ける
6. タイプライター — 1文字ずつ打ち出される
7. 3D回転 — 奥行きをもって傾く
8. パーティクル — 光の粒が飛び散る
9. 分解・再構築 — バラバラになって戻る
10. 最終形態 — 全部載せ

すべてCSSだけで動いています。JavaScriptは1行も書いていません。HTMLファイル1つに全部入っているので、このページのソースを見ればそのまま仕組みがわかります。

タイトルは記事の顔です。最初に目に入るものだからこそ、ここに全力を注ぐ意味があります。

← その他の記事一覧へ戻る