Edited at

Vue.jsでイイ感じに雪を降らせるvue-snowfを使ってみる

Web上で雪や花びらを降らせるライブラリはいくつかあります。

従来の方法だとsnowfall.jsやparticles.jsなどのプラグインを利用が考えられるようですね。

雪や花びらが落下するアニメーションの実装方法を調べてみた

Vue上でイイ感じに雪を降らせるコンポーネントを探してみると、イイ感じのを見つけました。

vue-snowf


vue-snowfの使い方

リンク先のREADME.mdも使い方が書かれていますが、とてもシンプルで使いやすい。

// インストール

npm install vue-snowf --save

あとは雪を降らせたい画面でコンポーネントを呼び出すだけ。

import Snowf from 'vue-snowf';

// Add Snowf to the components
export default {
components: {
Snowf
},
...
}

// Insert component in the template
<Snowf
:amount="50"
:size="5"
:speed="1.5"
:wind="0"
:opacity="0.8"
:swing="1"
:image="null"
:zIndex="null"
:resize="true"
color="#fff"
/>

speedを0にすると雪のアニメーションが宙に浮いた状態となり、蛍が飛んでいるようにも見えます。

早速自分のポートフォリオにも使ってみました。

ポートフォリオ

vue-snowfはreact版のreact-snowfも用意されています。

Fuxy526さんに感謝mm