パーティクルエフェクトで派手に見せるナビゲーションページ

概要

このサンプルは、Particle.jsを使ってパーティクル背景を動かしながら、スライドショーのようにコンテンツを切り替えるナビゲーションページです。

HTML

各セクション

<section>タグでコンテンツごとのセクションを定義しています。

<section id="tab-svelte" class="slider">
 <!-- コンテンツ --> 
</section>

id属性にそれぞれのセクションの識別子を、class="slider"に共通のスタイルを当てるクラスを指定しています。

ナビゲーション

<nav>
  <a href="#tab-svelte" class="nav-tab">SVELTE</a>
  <!-- 他のタブ -->
</nav>

<nav>タグの中に、各セクションのidをリンクのhref属性で指定したナビゲーションタブを定義しています。

背景

<canvas class="background"></canvas>

Particle.jsでパーティクルを描画するための<canvas>タグを用意しています。

CSS

.sliderクラスをFlexboxで中央寄せにするなど、共通のスタイルを定義しています。

ナビゲーションのスタイルもここでCSSで指定しています。

JavaScript

Particle.jsの設定

const particles = Particles.init({
  selector: ".background",
  color: ["#03dac6","#ff0266","#000000"],
  connectParticles: true,
  // 他の設定 
});

selectorに背景のcanvasを指定し、colorでパーティクルの色を設定しています。

connectParticles: trueにすることでパーティクル同士を線でつなげる設定をしています。

スライド切り替え

// タブをクリックした時
$(".nav-tab").click(function() {

  // スクロールを実行 
  let scrollTop = $(要素).offset().top;
  $("html, body").animate({scrollTop: scrollTop}, 600);

});

jQueryを使ってタブがクリックされた時に対応するセクションまでスクロールするように動作させています。

これによりスライドショーのようなUIを実現できます。

まとめ

• Particle.jsで派手な背景を作る
• HTML/CSSで構成を定義
• jQueryでインタラクションをつける

このようにJavaScriptライブラリを活用することで、視覚的に印象的なページを実装できます。