くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Animation

NuxtでLottieを組み込む方法

アニメーションライブラリのLottieを使ってみたときの備忘録。 フリーで使えるアニメーションはLottieFilesで公開されてる。 インストール $ npm i lottie-web 表示用のコンポーネントの準備 表示するコンポーネント(LottieView)の用意。 マウントされたらlo…

Vue/Nuxtのアニメーションするときに参考にしたところ

VueとNuxtでアニメーションをするときに調べたところのまとめ。 公式サイトを読みながら、関連するとこをまとめた感じの備忘録。 トランジションクラスってのがあるらしい 参考: Enter/Leave とトランジション一覧 — Vue.js <transition>で囲むと、いくつかのクラスを生</transition>…

Nuxt.jsでローディングにSpinKitを使ってみる

Loaders.cssを使ってみたけど、display:inline-blockで使いにくかった。。 SpinKitというのもあるそうなので、そっちを使ったときの備忘録 SpinKitは、vue用のライブラリもあるよう(vue-spinkit) SpkinKit(vue-spinkitなし) インストール $ npm install --sa…

SSRなVueでもTweenLiteでカウントアップアニメーション(数字がクルクルするやつ)

以下の記事で、数字がクルクルするアニメーションをやってみたけど、 SSRだとうまくいかないっぽい。。 そのときの備忘録。 www.memory-lovers.blog 初期表示がおかしい!! TweenLiteを入れたページでリロードするとこんな感じに。。 Unexpected token expo…

調べたアニメーションライブラリのちょっとしたまとめ

Webサービスの画面にアニメーションをつけたいなと思ったときに、いろいろ調べたときの備忘録。 いろいろあって悩ましい。。 アニメーションライブラリ AOS - Animate on scroll library スクロールアニメーションのライブラリ。簡単に導入できる Delighters…