昨年、私はトイレルのプロジェクトでショーン?ワン（Swyx）と協(xié)力する機會がありました。目標は、いくつかの創(chuàng)造的な要素でウェブサイトを強化することでした。私はデザイナーというよりも開発者の方が魅力的な課題でしたが、デザインスキルを拡大する機會を受け入れました。

私の貢獻の1つは、インタラクティブな星空の背景でした。ここで動作しているのを見ることができます：

パースペクティブとCSSカスタムプロパティを使用したBlockQuoteコンセプト。 @temporalioで創(chuàng)造的な自由を楽しんでいます。気まぐれなタッチを追加！ ??@ReACTJS && @TailWindCSS（サイトIS NextJS）？ @codepen pic.twitter.com/s9xp2trroxを介してCodepenにリンクします

- jhey ???（@jh3yy）2021年7月2日

このデザインの強度は、再利用可能な反応成分としての実裝にあり、高い構(gòu)成可能性を提供します。星の代わりに異なる形狀が必要ですか？粒子の配置を正確に制御したいですか？あなたは完全に制御されています。

このコンポーネントを構(gòu)築しましょう！ React、Greensock、およびHTMLを使用します<canvas></canvas>要素。 Reactはオプションですが、それを使用すると、將來のプロジェクトに再利用可能なコンポーネントが作成されます。

基本的なアプリの構(gòu)築

'https://cdn.skypack.dev/react'からのインポートReact;
'https://cdn.skypack.dev/react-dom'からReactdomをインポートします。
'https://cdn.skypack.dev/gsap'からGSAPをインポートします。

const root_node = document.queryselector（ '＃app'）;

const starscape =（）=><h1>かっこいい！</h1> ;

const app =（）=><starscape></starscape> ;

Reactdom.Render（<app></app> 、root_node）;

まず、aをレンダリングします<canvas></canvas>要素とReactのuseEffectフック內(nèi)で使用するための參照をつかみます。 Reactを使用していない場合は、參照を変數(shù)に直接保存します。

 const starscape =（）=> {
  const canvasref = race.useref（null）;
  戻る<canvas ref="{canvasRef}"></canvas>;
};

スタイリングします<canvas></canvas>ビューポートを埋めてコンテンツの後ろに座るには：

キャンバス{
  位置：修正;
  挿入図：0;
  背景：＃262626;
  z -index：-1;
  高さ：100VH;
  幅：100VW;
}

星を追加します

不透明度やサイズがさまざまなサークルを使用して、スターレンダリングを簡素化します。 aに円を描きます<canvas></canvas>コンテキストを取得し、 arc関數(shù)を使用することを伴います。 useEffectフックを使用して、中央に円（私たちの星）をレンダリングしましょう。

 const starscape =（）=> {
  const canvasref = race.useref（null）;
  const contextref = React.useref（null）;
  React.useeffect（（）=> {
    canvasref.current.width = window.innerwidth;
    canvasref.current.height = window.innerheight;
    contextref.current = canvasref.current.getContext（ '2d'）;
    contextref.current.fillstyle = 'Yellow';
    contextref.current.beginPath（）;
    contextref.current.arc（
      window.innerwidth / 2、// x
      window.innerheight / 2、// y
      100、//半徑
      0、//角度を開始（ラジアン）
      Math.Pi * 2 //終了角度（ラジアン）
    ）;
    contextref.current.fill（）;
  }、[]）;
  戻る<canvas ref="{canvasRef}"></canvas>;
};

これにより、黃色の円が作成されます。殘りのコードは、このuseEffect內(nèi)にあります。これが、反応部分がオプションである理由です。このコードを他のフレームワークに適応させることができます。

複數(shù)の星を生成してレンダリングする必要があります。キャンバスのサイジングを含む星生成とキャンバスのセットアップを処理するためのLOAD関數(shù)を作成しましょう。

 const load =（）=> {
  const vmin = math.min（window.innerheight、window.innerwidth）;
  const star_count = math.floor（vmin * densityratio）;
  canvasref.current.width = window.innerwidth;
  canvasref.current.height = window.innerheight;
  Starsref.current = new Array（star_count）.fill（）。map（（）=>（{{
    X：gsap.utils.random（0、window.innerwidth、1）、
    y：gsap.utils.random（0、window.innerheight、1）、
    サイズ：gsap.utils.random（1、sizelimit、1）、
    スケール：1、
    アルフ?。篻sap.utils.random（0.1、defaultalpha、0.1）、
  }））;
};

各星は、その特性（x、y位置、サイズ、スケール、アルファ）を??定義するプロパティを持つオブジェクトです。 sizeLimit 、 defaultAlpha 、およびdensityRatio 、デフォルト値を持つStarscapeコンポーネントに渡されたプロップです。

サンプルスターオブジェクト：

 {
  「X」：1252、
  「Y」：29、
  「サイズ」：4、
  「スケール」：1、
  「アルファ」：0.5
}

これらの星をレンダリングするために、 arc関數(shù)を使用してstarsを繰り返し、各星をレンダリングするRENDER関數(shù)を作成します。

 const render =（）=> {
  contextref.current.clearrect（
    0、
    0、
    canvasref.current.width、
    canvasref.current.height
  ）;
  starsref.current.foreach（（star）=> {
    contextref.current.fillstyle = `hsla（0、100％、100％、$ {star.alpha}）`;
    contextref.current.beginPath（）;
    contextref.current.arc（star.x、star.y、star.size / 2、0、math.pi * 2）;
    contextref.current.fill（）;
  }）;
};

clearRect関數(shù)は、レンダリングの前にキャンバスをクリアします。これはアニメーションに重要です。

完全なStarscapeコンポーネント（まだ対話性なし）を以下に示します。

 const starscape =（{denthesratio = 0.5、sizelimit = 5、defaultalpha = 0.5}）=> {
  const canvasref = race.useref（null）;
  const contextref = React.useref（null）;
  const starsref = race.useref（null）;
  React.useeffect（（）=> {
    contextref.current = canvasref.current.getContext（ '2d'）;
    const load =（）=> {
      const vmin = math.min（window.innerheight、window.innerwidth）;
      const star_count = math.floor（vmin * densityratio）;
      canvasref.current.width = window.innerwidth;
      canvasref.current.height = window.innerheight;
      Starsref.current = new Array（star_count）.fill（）。map（（）=>（{{
        X：gsap.utils.random（0、window.innerwidth、1）、
        y：gsap.utils.random（0、window.innerheight、1）、
        サイズ：gsap.utils.random（1、sizelimit、1）、
        スケール：1、
        アルフ?。篻sap.utils.random（0.1、defaultalpha、0.1）、
      }））;
    };
    const render =（）=> {
      contextref.current.clearrect（0、0、canvasref.current.width、canvasref.current.height）;
      starsref.current.foreach（（star）=> {
        contextref.current.fillstyle = `hsla（0、100％、100％、$ {star.alpha}）`;
        contextref.current.beginPath（）;
        contextref.current.arc（star.x、star.y、star.size / 2、0、math.pi * 2）;
        contextref.current.fill（）;
      }）;
    };
    const run =（）=> {
      負荷（）;
      與える（）;
    };
    走る（）;
    window.addeventlistener（ 'resize'、run）;
    return（）=> {
      window.removeeventlistener（ 'resize'、run）;
    };
  }、[]）;
  戻る<canvas ref="{canvasRef}"></canvas>;
};

デモで小道具を試して、それらの効果を確認します。ビューポートのサイズ変更を処理するために、 LOADを呼び出してサイズRENDER （最適化のために脫出します。これはここで簡潔に省略されています）。

インタラクティブ性を追加します

それでは、背景をインタラクティブにしましょう。ポインターが動くと、カーソルの近くの星が明るくなり、スケールアップします。

UPDATE関數(shù)を追加して、ポインターと各星間の距離を計算し、GreensockのmapRangeユーティリティを使用してStarのスケールとアルファをトゥイーンします。また、スケーリングの動作を制御するために、 scaleLimitおよびproximityRatio小道具を追加します。

 const update =（{x、y}）=> {
  starsref.current.foreach（（star）=> {
    const distance = math.sqrt（math.pow（star.x -x、2）math.pow（star.y -y、2））;
    gsap.to（star、{
      スケール：scalemapperref.current（math.min（distance、vminref.current * proximityratio））、
      alpha：alphamapperref.current（math.min（distance、vminref.current * proximityratio））、
    }）;
  }）;
};

更新をレンダリングするには、 gsap.ticker （ requestAnimationFrameの優(yōu)れた代替手段）を使用して、ティッカーにRENDERを追加してクリーンアップで削除します。 1秒あたりのフレーム（FPS）を24に設定します。 RENDER関數(shù)は、ARCを描畫するときにstar.scale値を使用するようになりました。

負荷（）;
gsap.ticker.add（render）;
gsap.ticker.fps（24）;
window.addeventlistener（ 'resize'、load）;
document.addeventlistener（ 'pointermove'、update）;
return（）=> {
  window.removeeventlistener（ 'resize'、load）;
  document.removeeventlistener（ 'pointermove'、update）;
  gsap.ticker.remove（render）;
};

さて、マウスを動かすと、星は反応します！

マウスがキャンバスを離れるケースを処理するために、星を元の狀態(tài)に戻すpointerleaveイベントリスナーを追加します。

 const exit =（）=> {
  gsap.to（starsref.current、{scale：1、alpha：defaultalpha}）;
};

// ...イベントリスナー...
document.addeventlistener（ 'pointerleave'、exit）;
return（）=> {
  // ... 掃除 ...
  document.removeeventlistener（ 'pointerleave'、exit）;
  gsap.ticker.remove（render）;
};

ボーナス：コナミコードイースターエッグ

コナミコードのイースターエッグを追加しましょう。キーボードイベントを聴き、コードが入力されている場合はアニメーションをトリガーします。

 const konami_code = 'arrowup、arrowup、arrowdown、arrowdown、arrowleft、arrowright、arrowleft、arrowright、keyb、keya';
const coderef = React.useref（[]）;
React.useeffect（（）=> {
  const handlecode =（e）=> {
    coderef.current = [... coderef.current、e.code] .slice（coderef.current.length> 9？coderent.length.length -9：0）;
    if（coderef.current.join（ '、'）。tolowercase（）=== konami_code.tolowercase（））{
      //イースターエッグアニメーションをトリガーします
    }
  };
  window.addeventlistener（ 'keyup'、handlecode）;
  return（）=> {
    window.removeeventlistener（ 'keyup'、handlecode）;
  };
}、[]）;

コナミコードのイースターエッグを使用した完全でインタラクティブなStarscapeコンポーネントは非常に長く、ここでは簡潔に省略されています。ただし、上記の原則は、React、Greensock、およびHTMLを使用して、完全に機能的でカスタマイズ可能なインタラクティブな星空の背景を作成する方法を示しています<canvas></canvas>。イースターエッグアニメーションには、 gsap.timeline作成して星のプロパティをアニメーション化することが含まれます。

この例は、獨自のカスタム背景を作成するために必要な手法を示しています。背景がサイトのコンテンツとどのように相互作用するかを忘れないでください。さまざまな形、色、アニメーションを試して、ユニークで魅力的なビジュアルを作成します。

以上がコンテンツ用のインタラクティブな星空の背景の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。