HTML
JavaScript
Vue.js
Granim

Vue.jsでグラデーションのアニメーション表示をしよう!Granim.js


Granim.js

Granim.jsはグラデーションをアニメーション表示させることができるJavaScriptライブラリです。

これを使うと、リッチなWebサイトを作ることができます!

どのようにアニメーション表示されるかは公式サイトのトップページExamplesをご覧ください。

Screenshot_2019-02-28 20.44.37_XuGUDd.png

このGranim.jsをVue.jsのアプリケーションで使ってみます。


手順


1.Gramin.jsのインストール

npm install granim


2.コンポーネントの作成


granim.vue

<template>

<div>
<canvas id="granim-canvas"></canvas>
</div>
</template>

<script>
import Granim from 'granim'

export default {
name: 'granim',
data () {
return {
GObj: Object
}
},
mounted () {
this.GObj = new Granim({
element: '#granim-canvas',
name: 'granim',
opacity: [1, 1],
states: {
'default-state': {
gradients: [
['#29323c', '#485563'],
['#FF6B6B', '#556270'],
['#80d3fe', '#7ea0c4'],
['#f0ab51', '#eceba3']
]
}
}
})
}
}
</script>

<style scoped>
#granim-canvas {
width: 100vw;
height: 100vh;
}
</style>


キモはコンポーネントのmountedライフサイクルフックでGranimをnewするところです。

mounted()に記述するコードは公式サイトの通りに記述すればOKです。

newするときのオプションでスピードや色の指定など様々な表現ができます。

※上のサンプルコードではESLintのエラー回避のためにdataにnewしたGranimのインスタンスを代入しています。


3.完成!

ezgif.com-video-to-gif (2).gif


バリエーション

Granim.jsを使うとただのグラデーションだけではなく、画像と組み合わせたり、文字に対してグラデーションのアニメーションをつけることができます。公式サイトにやり方が載っています。

Screenshot_2019-02-28 20.55.56_RaImf3.png

Screenshot_2019-02-28 20.56.03_dPpNVJ.png