Awwwards や Codrops のショーケースで紹介されるサイトを見ると、「なぜこんなに気持ちいい動きになるのか」と気になったことはないでしょうか。実はあの独特な高級感は、魔法のような特殊技術ではなく、いくつかの定番テクニックの組み合わせでできています。この記事では、初心者の方にも仕組みが分かるように、代表的な演出パターンを一つずつ分解していきます。
スクロール連動演出の考え方
海外の受賞サイトでもっとも多用されているのが「スクロール量に応じて画面の状態が変化する」演出です。実装の基本は position: sticky で要素を画面に固定し、その間のスクロール量を0〜1の進捗値として取得して、要素の拡大率や透明度、色相などに反映させるという流れです。
GSAPのScrollTriggerというライブラリでは scrub というオプションを使うことで、スクロールバーの動きとアニメーションの再生位置を直接連動させられます。scrubを使うと、ユーザーが指を止めればアニメーションも止まり、逆にスクロールすれば止まらずについてくるため、「操作している感覚」がとても強くなります。これが単なる自動再生アニメーションとの決定的な違いです。文字が奥から迫ってくるように見えるズーム演出も、この仕組みの応用でよく使われます。
カーソル追従演出のバリエーション
マウスカーソルに要素が吸い寄せられたり、光が追いかけてきたりする演出も定番です。仕組みとしては、mousemove イベントでカーソル座標を取得し、それを目標値として毎フレーム少しずつ現在値を近づけていく「イージング(慣性)」処理を行っています。目標値と現在値の差分に一定の係数(0.05〜0.2程度)を掛けて足し込むだけで、なめらかに追従する動きが作れます。
さらに発展させると、ボタンの近くにカーソルが来たときだけ要素がぐっと引き寄せられる「磁力(マグネット)」効果や、暗い背景にスポットライトのような円形の光を重ねてカーソルの周りだけ内容が見える「フラッシュライト」演出も作れます。いずれも計算自体はシンプルで、CSSのtransformやradial-gradientの位置をJavaScriptで毎フレーム書き換えているだけです。
canvasによるパーティクル・流れ場表現
背景にふわふわと漂う粒子や、有機的に渦を巻く線が描かれているサイトでは、多くの場合HTMLのcanvas要素とJavaScriptによる自前の描画が使われています。代表的なのが「フローフィールド(流れ場)」という手法で、画面を格子状に区切り、各マスにパーリンノイズなどで生成した「向き」の情報を持たせます。粒子はその向きに沿って少しずつ移動し、軌跡を薄く残しながら描画されるため、まるで煙や水流のような自然な模様が生まれます。
この手法のポイントは、粒子一つひとつは単純な移動計算しかしていない点です。複雑に見える全体の動きは、大量の粒子とノイズパターンの組み合わせから生まれる「創発」的な結果であり、個々のロジックはさほど難しくありません。
タイポグラフィ表現の分解
見出しの文字が一文字ずつバラバラに登場したり、文字ごとに色や動きが変わったりする演出も海外サイトの十八番です。仕組みとしては、見出しのテキストをJavaScriptで一文字ずつspan要素に分解し、それぞれに個別のアニメーション遅延(delay)を設定するのが基本パターンです。文字数分のタイミングをわずかにずらすだけで、波のような連続感が生まれます。
グラデーションのかかった文字も人気ですが、これはCSSのbackground-clip: textというプロパティを使い、文字部分だけに背景のグラデーションを見せる技術です。さらに背景の位置をアニメーションさせれば、文字の中を光が流れるような表現になります。
パフォーマンスへの配慮も忘れずに
見た目が華やかな演出ほど、処理が重くなりがちです。海外の質の高いサイトほど、実は裏側の配慮も丁寧です。代表的なのが IntersectionObserver の活用で、画面内に入った要素だけアニメーションを動かし、画面外にある要素の処理は止めておくという制御です。これによりスクロールが長いページでも無駄な計算を減らせます。
もう一つ重要なのが、OSの「視差効果を減らす」設定を尊重することです。CSSの prefers-reduced-motion というメディアクエリを使えば、その設定が有効なユーザーには大きな動きを控えめにしたり、アニメーションそのものを無効化したりできます。かっこよさと使いやすさを両立させるうえで、この配慮は欠かせません。
まとめ
海外のかっこいいサイトの動きは、特別な秘密技術ではなく、スクロール進捗の取得、イージングによる追従、canvasでの粒子描画、文字の分解、そしてパフォーマンスへの配慮という、いくつかの基本パーツの組み合わせでできています。一つひとつの仕組みを理解すれば、自分のサイトにも少しずつ取り入れていくことができるはずです。まずは気になった演出を一つ選び、小さく試してみることから始めてみてください。