☃冬なのに雪が降ってないサイトってダサくない？☃

ゆめみ Advent Calendar 2018 4日目の投稿です。

概要

particles.js snow

↑を見て自分もWebサイトにこういうのを降らせたいと思いやってみた結果思ったより簡単にできたので、今回はその手順を解説したいと思います。

冬だからWebサイトに雪を降らせたい！！！！！！！！

デモサイト

TL;DR

• particles.jsを使うとクールなグラフィックを簡単にWebサイトに導入できるよ
• 作ってくれた先人は偉大だよ
• エモい

📁Nuxtのプロジェクトを作成

create-nuxt-appを使います。
nuxt/create-nuxt-app: Create Nuxt.js App in seconds.

インストールしていない人は

npm install -g create-nuxt-app

でインストールすることで使用可能になります。

またはインストールしなくてもnpx create-nuxt-app フォルダ名で実行できます。

プロジェクトの作成

create-nuxt-app フォルダ名

対話式で色々聞かれるので、好みの設定を適用します。
とりあえずこんな感じで設定しました。

設定例

➜ create-nuxt-app particles-test
> Generating Nuxt.js project in パス/particles-test
? Project name particles-test
? Project description My dandy Nuxt.js project
? Use a custom server framework express
? Use a custom UI framework none
? Choose rendering mode Single Page App
? Use axios module no
? Use eslint yes
? Use prettier yes
? Author name SugarShootingStar
? Choose a package manager yarn
Initialized empty Git repository in パス/particles-test/.git/
yarn install v1.12.3

~インストール時の警告などが表示される~

終了時

✨  Done in 54.15s.

  To get started:

    cd particles-test
    yarn run dev

  To build & start for production:

    cd particles-test
    yarn run build
    yarn start

プロジェクトが作成できました！👊

📦できたフォルダの中から今回使うものの紹介

今回は

// 容量が軽いものを置く場所 jsや容量が軽い画像など。
assets/
// ページで使用するコンポーネント(共通部品)
components/
// nuxtによって公開されるページ ディレクトリ構造がそのまま公開されるページ構造になる
pages/
// 新しくインストールしたライブラリなどの設定に使用
plugins/
// 素材の置き場所、容量が重いもの　画像など。
static/
// ビルド設定、nuxtまわりのほぼ全ての設定を書く。
nuxt.config.js

配下を主に編集します。

⬇️particles.jsをインストール

こちらのライブラリを使用します。npm、またはyarnからインストールしましょう。
particles.js - A lightweight JavaScript library for creating particles

yarn add particles.js

📜nuxtでparticles.jsを適用する設定を行う

📃pluginsフォルダ配下に設定内容のjsを作成

importすることによって、windowオブジェクト内にparticlesJSメソッドが用意されます。

plugins/particles.js

import particlesJS from 'particles.js'

🗒nuxt.config.jsに読み込む設定を書く

nuxtの設定ファイルにpluginsという項目があるので、そちらに先程書いたjsのパスを記述します。

これでnuxt全体でparticles.jsが使用できるようになりました。

nuxt.config.js

  plugins: [
    '~plugins/particles.js'
  ],

☃️雪の画像をstatic配下に置く

初期のstaticフォルダは配下にREADME.mdとfavicon.icoしかないので、imgフォルダを作成します。static/imgフォルダ直下に置くのもアレなのでparticlesフォルダをimgフォルダに作成しましょう。

そしてstatic/img/particles配下に雪の画像を置きます。

名前は何でもいいですが、snow.pngとかでいいと思います。

🍎assets配下に設定を書いたjsを置く

vueファイル内に生書きしてもいいのですが、めちゃくちゃ長いしせっかくなので別ファイルに分けてそこから参照しましょう。

先程のstaticの時と同じようにassets/js/particlesまでフォルダを作成しその配下にファイルを置きます。

ソースコードはこちらです。data配下にparticles.jsで使用する設定が記述してあります。

ここの設定に関しての値は

ライブラリ公式サイトの右上を弄るとだいたいわかります。

公式ドキュメント

今回はすでにあるものを使用するのでほぼコピペです。

assets/js/particles/snow.js

export default {
  data: {
    particles: {
      number: {
        value: 400,
        density: {
          enable: true,
          value_area: 800
        }
      },
      color: {
        value: '#ffffff'
      },
      shape: {
        type: 'image',
        stroke: {
          width: 3,
          color: '#fff'
        },
        polygon: {
          nb_sides: 5
        },
        image: {
          src: '/img/particles/snow.png',
          width: 100,
          height: 100
        }
      },
      opacity: {
        value: 0.7,
        random: false,
        anim: {
          enable: false,
          speed: 1,
          opacity_min: 0.1,
          sync: false
        }
      },
      size: {
        value: 5,
        random: true,
        anim: {
          enable: false,
          speed: 20,
          size_min: 0.1,
          sync: false
        }
      },
      line_linked: {
        enable: false,
        distance: 50,
        color: '#ffffff',
        opacity: 0.6,
        width: 1
      },
      move: {
        enable: true,
        speed: 5,
        direction: 'bottom',
        random: true,
        straight: false,
        out_mode: 'out',
        bounce: false,
        attract: {
          enable: true,
          rotateX: 300,
          rotateY: 1200
        }
      }
    },
    interactivity: {
      detect_on: 'canvas',
      modes: {
        grab: {
          distance: 150,
          line_linked: {
            opacity: 1
          }
        },
        bubble: {
          distance: 200,
          size: 40,
          duration: 2,
          opacity: 8,
          speed: 3
        },
        repulse: {
          distance: 200,
          duration: 0.2
        },
        push: {
          particles_nb: 4
        },
        remove: {
          particles_nb: 2
        }
      }
    },
    retina_detect: true
  }
}

❄️雪を降らせるコンポーネントを作成

前準備が長かったですが、コンポーネントを作成します。
今回は雪を降らせるのでSnowFallという名前で作成しましょう。
componentsフォルダにSnowFallフォルダを掘って、その配下にindex.vueファイルを作成します。

❄️template内に雪を降らせる要素を作る

particles.jsは要素がひとつあれば動くので、とりあえずdivを一つ作っておきます。

また、雪を降らせるときにidを使用するので設定しておきます。

<template>
  <div id="snowfall"/>
</template>

🔧particles.jsで使用する設定ファイルをimport

先程用意したjsファイルを読み込み、このコンポーネントで使えるようにします。

// particles.jsで降らせる雪の設定を読み込み
import snow from '~/assets/js/particles/snow.js'

⚒画面が表示された時にparticles.jsが動くように設定

particles.jsを使用するためには、nuxtのmountedに処理を書く必要があります。

mountedは画面が表示されたタイミングでjsが動かせるやつと覚えておけば大丈夫です。

particles.jsはwindow.particlesJS('tagname', 'setting')で設定を読み込ませて初期化してあげると動くようになります。

第一引数に雪を振らせたい要素のid、第二引数にparticles.jsで使用する設定Objectを指定します。

export default {
  mounted() {
    // 画面が表示された時にparticles.jsを動かす
    window.particlesJS('snowfall', snow.data)
  }
}

🔮ソース

以上の内容を踏まえたソースがこちらになります。cssはコピペで大丈夫です。

components/SnowFall/index.vue

<template>
  <div id="snowfall"/>
</template>

<script>
// particles.jsで降らせる雪の設定を読み込み
import snow from '~/assets/js/particles/snow.js'

export default {
  mounted() {
    // 画面が表示された時にparticles.jsを動かす
    window.particlesJS('snowfall', snow.data)
  }
}
</script>

<style>
#snowfall {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

✅pages/index.vueにSnowFallコンポーネントを入れる

localhost:3000で表示される初期表示ページに雪を降らせるコンポーネントを配置しましょう。

ちなみにこの状態の画面はこちらです。

雪を目立たせるため、ソースには.container要素にbackground:blackだけ設定しています。

💠コンポーネントをimportして、componentsに記述

多分デフォだとLogoの読み込みがされていると思うので、そのコードの下にSnowFallコンポーネントを読み込むコードを記述しましょう。

また、コンポーネントとして使用するにはjs内のcomponentsにimportした変数名を記述する必要があるので、Logoの後ろにSnowFallを記述しましょう。

import Logo from '~/components/Logo.vue'
// 雪を降らせるコンポーネントの読み込み
import SnowFall from '~/components/SnowFall'

export default {
  components: {
    Logo,
    SnowFall
  }
}
</script>

🚀template内にSnowFallコンポーネントを配置

画面全体に雪を降らせたいので、section配下にSnowFallコンポーネントを配置します。
これですべての準備が整いました。

<template>
  <section class="container">
    <!-- 雪を降らせる -->
    <SnowFall/>
    <div>
      <logo/>
      <h1 class="title">
        particles-test
      </h1>
      <h2 class="subtitle">
        My dandy Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
    </div>
  </section>
</template>

雪が降った！！！！！！！！！！！！！！！！！！！！

最高！！！！！！！！！！！！！！！！！！！！！！！！

みんなも雪を降らそう！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

備考

creotip/vue-particles: Vue.js component for particles backgrounds ✨

Vue Particlesでイケてるサイトをサクっと作る - Qiita

vue-particlesというものを使うと似たことができるらしいです。

最初はこれでやろうと思っていたんですが、細かい設定などに対応していないらしく試行錯誤してもうまく行かなかったため使用しませんでした。

particles.js以外にも色々ある降らせるやつ

🌸春

• almightynay/jQuery-Sakura: Make it rain - sakura petals or anything else for that matter.
  • jQuery
• Amazing Sakura - jsdo.it - Share JavaScript, HTML5 and CSS
  • ?
• サクラマイチル（canvas）
  • scss + js(canvas操作)
• Sakura rain effect
  • js(canvas操作)

🌴夏

• Falling Leaves
  • Three.js

🍁秋

• Falling Leaves
  • css animation + js
• Autumn Leaves
  • css(Stylus) + jquery
• Autumn falling leaves ( GSAP )
  • css + js(Tween.js)

❄️冬

• loktar00/JQuery-Snowfall: Makes it snow on any web page or specific element.
  • jQuery
• particles.js snow
  • particles.js
• Canvas Snow Threejs - JSFiddle
  • Three.js