この記事は389文字で約1分で読めます
とりあえずかっこよくしたい。
とりあえず作ったWebページをかっこよくしたいと思い手軽に使えるparticles.jsをVue.jsで使ってみます。
Table of Contents
npm
particles.jsをVue.jsで簡単に使えるようにしたものがすでにnpmで公開されてました。
今回はこちらを使います。
簡単な使い方
まず、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にしました。こうすることでほかのコンポーネントの下に滑り込ませられます。
完成!
これでかっこよいサイトになりました。
Related Posts
2019-10-23JavaScript TypeScript Google Apps Script API FLASH SlackAPI Clasp GitHub Action Jest 自動テスト Unit Test
Google Apps Script(GAS)とAPI FLASHとSlackAPIをClaspとJestとGitHub Actionで調理して定期的にWebページのスクリーンショットを撮る