プリセットの選択

Mojave Particlesには、パーティクルの見た目や動作を定義するいくつかの組み込みプリセットが含まれています。プリセットを選択するには、キャンバス上のMojave Particlesレイヤーをクリックします。右側のサイドバーで「プリセット」ドロップダウンを開き、スタイルを選択します。プレビューは、オプションをスクロールすると瞬時に更新されます。

プリセットの説明:

• ブラックホール: マウスは、近くのパーティクルを引き寄せる重力のように作用します。

• 雪: 雪片に似た優雅に落ちるパーティクル。

• レインボー: ホバーに反応するマルチカラ―の光るポイント。

• レーザー: ホバーすると拡大する明るいオーブ。

• バブル: 軽く空中を漂う動きで柔らかく風通しが良い印象。

• ネットワーク: 技術的な外観を持つ相互接続されたラインとノード。

• ギャラクシー: カーソルに従う星野のアニメーション。

• ネオン: 暗い背景に映える高コントラストの光るキューブ。

• ラバランプ: ゆっくりとした、流動的で有機的な不規則の動きで穏やかな雰囲気。

• 絵文字: パーティクルを1つ以上の絵文字に置き換えます。

• テキスト: パーティクルのように動いたり反応したりする浮かぶテキスト。

プリセットは出発点です。すべての視覚および動作プロパティは後でカスタマイズできます。

パーティクル設定の調整

Mojave Particlesコンポーネントが選択されていると、すべてのカスタマイズオプションが右側のプロパティパネルに表示されます。

外観コントロール:

• パーティクルの数を調整してアニメーションの密度を変更できます。

• サイズ範囲のスライダーまたは入力フィールドを使用して、パーティクルの最小および最大サイズを制御します。

• カラーパレットは単色、グラデーション、またはFramerのカラーバリアブルにリンクすることができます。

• 不透明度はパーティクルの視認性を設定し、速度は全体の動きの強度を決定します。

動作コントロール:

• 重力またはドリフトの設定により、パーティクルの垂直移動方法が変更されます。

• 反発と引き寄せは、マウスカーソルへの反応を決定します。

• 振動は、より自然な動きのために穏やかでランダムな揺れを加えます。

• スクロールの反応性により、パーティクルはスクロール速度や方向に反応します。

レイアウトコントロール:

• 背景色は#000005がデフォルトで、Mojaveの暗いテーマにマッチしています。

• パーティクルをコンテンツレイヤーの背後に配置するためにZインデックスを調整できます。

• 「スクリーン」や「ノーマル」などのブレンドモードのオプションを使って、パーティクルが背景と視覚的にどのように相互作用するかを微調整できます。

インタラクティビティオプション

Mojave Particlesは、コードなしで組み込みのインタラクティビティをサポートしています。ホバー応答が有効になると、カーソルが通過する際にパーティクルが動いたり光ったりします。クリック応答は、ユーザーがクリックすると拡大や動きのバーストを追加します。スクロールの認識により、ユーザーがページをスクロールするときにアニメーションが動いたり、フェードしたり、変化したりします。没入感のあるページには、ホバーとスクロールの反応性を組み合わせて、微妙で自然な感じの動きを作成してみてください。

クリエイティブな使用ケース

Mojave Particlesは、動きがコンテンツから注意をそらすことなく体験を強化する場所で最適に機能します。

人気の使用方法には以下が含まれます:

• ゆっくりとしたアンビエントムーブメントを持つヒーローセクション。

• スクロールやホバーに反応するランディングページ。

• 深みを増すための製品背景。

• ネットワークやギャラクシースタイルを使用したテクノロジーやデータをテーマにしたページ。

• インタラクティブで生き生きとしたポートフォリオ。

小さく慎重な動きでデザインをダイナミックにしつつ、重要な点に集中できます。

クイック例

浮遊するギャラクシーバックグラウンド

ギャラクシープリセットを選択します。パーティクル数を120〜200の間に設定します。不透明度を約60〜70％に下げ、スムーズな視差スタイルの動きを実現するためにスクロール反応性を有効にします。

控えめなヒーローグロー

ネオンプリセットを選択します。数を約50に設定し、ブランドの主要色を低不透明度で使用します。穏やかで集中したヘッダー効果のためにスクロール反応性をオフにします。