とりあえずかっこよくしたい

とりあえず作ったWebページをかっこよくしたいと思い手軽に使えるparticles.jsをVue.jsで使ってみます。

npm

particles.jsをVue.jsで簡単に使えるようにしたものがすでにnpmで公開されてました。

今回はこちらを使います。

vue-particles

簡単な使い方

まず、main.tsでvue-particlesをimportします。

import Vue from 'vue';
import App from './App.vue';
import router from './router';

import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
// @ts-ignore
import VueParticles from 'vue-particles';

import store from './store/';

Vue.use(BootstrapVue);
Vue.use(VueParticles);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

importしたあとに、Vue.useします。

次にApp.vueでparticles.jsを設定します。まずはTemplateにcomponentを設定します。

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

次にCSSですのでstyleで設定します。

#particles-js {
    background-image: url("https://raw.githubusercontent.com/tubone24/ebook-homebrew-vue-typescript-client/master/src/assets/bg.jpg");
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
}

z-indexを-999にしました。こうすることでほかのコンポーネントの下に滑り込ませられます。

完成!

これでかっこよいサイトになりました。

Img