❄️

サイトに雪を降らせて、クリスマスムードを演出しよう!!

2024/11/29に公開

Next.js

はじめに

約5か月前にリリースしたフリー素材サイト『SOZAI』をクリスマス仕様にするため、サイトに雪を降らせてみました。その際に使用したライブラリをご紹介します。

ぜひ、ダークモードでサイトを見てみてください!!
https://soz-ai.com/

雪の降らせ方

react-snowfallというライブラリを使用します。

$ npm i react-snowfall

まず、雪を降らせるためのコンポーネントを作成します。

snow.tsx

"use client"

import Snowfall from 'react-snowfall';

export default function Snow() {
  return (
      <Snowfall style={{
        position: 'fixed',
        width: '100vw',
        height: '100vh',
      }} />
  )
}

次に、このコンポーネントを雪を降らせたいページに配置すれば完了です。私は全ページに雪を降らせたかったので、layout.tsxに配置しました。

layout.tsx

import "./globals.css";
import Header from "./components/Header/Header"
import Footer from "./components/Footer/Footer";
import Snow from "./components/snow";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body>
        <Header />
        <main>
          {/*ここに配置*/}
          <Snow />
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

雪を降らせることができました。

細かい調整

react-snowfallを使うと、雪の動きや量などを細かく調整することもできます。

snow.tsx

"use client";

import Snowfall from "react-snowfall";

export default function Snow() {
  return (
    <Snowfall
      style={{
        position: "fixed",
        width: "100vw",
        height: "100vh",
      }}
      // [min, max] の範囲で値を指定
      speed={[5, 10]}
      wind={[10, 10]}
      radius={[3, 3.5]}
      // 表示する雪片の数
      snowflakeCount={750}
    />
  );
}

サイトがまるで豪雪地帯のようになりました。

また、react-snowfallのパラメータを試せる公式のデモサイトもあります。

まとめ

今回は、Reactを使ってサイトに雪を降らせるライブラリreact-snowfallをご紹介しました。簡単にクリスマス仕様の演出ができるので、ぜひ皆さんも活用してみてください。

また、クリスマスにぴったりなイラストも『SOZAI』に追加しています。ぜひ、クリスマス仕様のサイトやデザインに『SOZAI』のイラストをご活用ください!!
https://soz-ai.com/

はじめに

雪の降らせ方

細かい調整

まとめ

Discussion