Vue Particlesでイケてるサイトをサクっと作る #JavaScript

こんにちは。
自分はVue大好きで、最近よくVue.js Showcase - Made With Vue.jsを見ています（Vueに関連したサイトなどが載ってて楽しいのでVue好きは是非覗いてみてください）。そこで先日、Vue Particles - Made with Vue.jsを見つけてしまったのです。
もうやばいです。かっこいいです。

これ、作りましょう。

デモ

先にデモをお見せしておきます。
http://taishikato-try-vue-particles.surge.sh/
ちなみに今回はホスティングにSurgeを使いました。

Githubリポジトリ

taishikato/try-vue-particles

Tools

今回使用するツールはこちらです。

vue-cli
yarn

How to use

プロジェクトフォルダ作成

$ vue init webpack try-vue-particles

上記コマンドを実行するとyarnコマンド実行まで行えるはずです。
それで必要なnode moduleがインストールされます。

それっぽい画像をゲットする

Free stock photos · Pexelsにアクセスして、universeで検索しましょう。Particleなオブジェクトと相性のいい、壮大な宇宙を想像させるハイクオリティな画像がたくさん出てきます。
良さげな写真を選んでbgimage.jpegとしてsrc/assets/image/配下に保存しましょう。

Bulmaを使う

正直今回はBulmaを使うまでもないんですけど、好きなので使います。

$ yarn add bulma --dev

src/assets/sass/main.scssを作成し、以下を記述します。


@import '~bulma/bulma'

src/main.jsにrequire('./assets/sass/main.scss')を追記


import Vue from 'vue'
import App from './App'
import VueParticles from 'vue-particles'

Vue.config.productionTip = false

+ require('./assets/sass/main.scss')
Vue.use(VueParticles)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

node-sass、sass-loaderをインストールします。

$ yarn add node-sass sass-loader --dev

コーディング

今回いじるのはsrc/App.vueのみです。


<template>
  <div id="app">
    <div id="main" class="has-text-centered">
      <h1 class="title is-1">VUE PARTICLES IS ASESOME</h1>
      <a href="https://bulma.io" target="_blank">
        <img src="https://bulma.io/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
      </a>
    </div>
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
html, body, #app {
    height: 100%;
}

#app {
  position: relative;
  background-image: url('./assets/image/bgimage.jpeg');
  background-size: cover;
}

#main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

h1 {
  color: #ffffff !important;
  text-shadow: 5px 5px 0px #000000;
  font-family: 'Dosis', sans-serif;
}
</style>

ここで大事なのは、↓です。
<vue-particles>が、いけてるParticleを生成・表示するコンポーネントです。

<vue-particles
  color="#dedede"
  :particleOpacity="0.7"
  :particlesNumber="80"
  shapeType="circle"
  :particleSize="4"
  linesColor="#dedede"
  :linesWidth="1"
  :lineLinked="true"
  :lineOpacity="0.4"
  :linesDistance="150"
  :moveSpeed="3"
  :hoverEffect="true"
  hoverMode="grab"
  :clickEffect="true"
  clickMode="push"
>
</vue-particles>

サーバー起動

$ yarn dev

http://localhost:8080/ をブラウザで確認してみましょう。
UniversalでParticleなイケてるサイトが目の前に現れるはずです。

VUE PARTICLES IS ASESOME

ありがとうございました。

💡3/30 追記

VUE PARTICLESを使って、これから作ろうと思ってるサイトのComing Soon的なページも作ってみました。
http://movieing-astronaut-coming-soon.surge.sh/
taishikato/movieing-astronaut-coming-soon-page - GitHub

今回はちょっと画像の綺麗さにもこだわって、でもサイトローディングの速度は落としたくなく、Cloudinaryを使って実装しました。