tubone

tubone

Boyaki makes a new world


 Recent posts  6 / 75

AprMayJunJulNEW GAME!から見る新入社員の心得その2Jetson Nanoを触る報告 ~立派なタワーPCみたいだろ? 小型なんだぜ?~tiny_yolov2_onnx_camを使って物体検知するJetson nano + SainSmart IMX219でアニメ風自撮り動画を作るStyleGANとStyleGAN2を使って美少女キャラを無限増殖させるRaspberry PIを使って植物の水やり監視システムを作る2020年のデスクトップはこれだ!かっこいいあつもりを始めてしまいましたクロスルート証明書について考えてみるReact Iframeを使ってPortfolioサイトにSoundCloudのメディアプレーヤーをつけるGitHub ProfileにREADMEをつけよう!Arctic Code Vault ContributorになったらしいMonWedFri
Arctic Code Vault ContributorになったらしいGitHub ProfileにREADMEをつけよう!React Iframeを使ってPortfolioサイトにSoundCloudのメディアプレーヤーをつけるクロスルート証明書について考えてみるあつもりを始めてしまいました2020年のデスクトップはこれだ!かっこいい


 WordCloud

wordCloud

 SearchBox

Search your interesting by Algolia in this blog.


この記事は22文字約2分で読めます

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

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

Table of Contents

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

˚