できる限りお手軽なパララックスないかなとVueプラグインを幾つかテスト。
中でも「vue-parallax-js」が導入しやすく軽量なので、常に入れておいても良いかもしれない。
早速、nuxt.jsで使ってみる。
vue-parallax-jsの導入方法
npmパッケージをインストール
npm i vue-parallax-js --save
pluginファイル作成
plugins/vue-parallax-js.js
import Vue from 'vue'
import VueParallaxJs from 'vue-parallax-js'
Vue.use(VueParallaxJs)
SSRに対応していないので、plgugin読み込み時にssr: false
を追加。
nuxt.config.js
module.exports = {
plugins: [
{ src :'~/plugins/vue-parallax-js', ssr: false },
],
...
}
動作テスト
pages/index.vue
<template lang="pug">
.main
h1(v-parallax="0.2") parallaxテスト
</template>
<style scoped>
.main {
width: 100%;
background-color: #eee;
margin-top: 100vh;
margin-bottom: 100vh;
}
</style>
画像も試してみる
pages/index.vue
<template lang="pug">
.main
img(src="~/assets/dummy.png" v-parallax="0.2")
</template>
<style scoped>
.main {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
overflow: hidden;
margin-top: 80vh;
margin-bottom: 100vh;
}
</style>
何この簡単さは…Cool!
他も試してみたけど…
vue-parallaxやvue-parallaxyも試した見たけど…導入に比較的ハードルがあるので、手軽さにおいて「vue-parallax-js」に軍配が上がりました。
loading周りは魅力だけど、無理して使う必要はないかな。
久しぶりにcoffeeScriptのソースを読んだ。なつい。
Link
以下、公開中のnuxt.js(v2)関連の記事一覧
技術よりの記事
- nuxt.js(v2)のインストール〜ESLint設定まで
- nuxt.js(v2)の作業ディレクトリを整理
- nuxt.js(v2)のベースURLをターミナルからコントロール
- nuxt.js(v2)でpug/stylusを利用する
- nuxt.js(v2)でIE11対応をする(CSS編)
- nuxt.js(v2)でIE11対応をする(JS編)
- nuxt.js(v2)で絶対パス(https~)を取得する方法
- nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
- nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす
よく使うプラグインのお話
- nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
- nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
- nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!