21
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!

Last updated at Posted at 2018-11-29

できる限りお手軽なパララックスないかなと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-parallaxvue-parallaxyも試した見たけど…導入に比較的ハードルがあるので、手軽さにおいて「vue-parallax-js」に軍配が上がりました。

loading周りは魅力だけど、無理して使う必要はないかな。


久しぶりにcoffeeScriptのソースを読んだ。なつい。

Link

以下、公開中のnuxt.js(v2)関連の記事一覧

技術よりの記事

  1. nuxt.js(v2)のインストール〜ESLint設定まで
  2. nuxt.js(v2)の作業ディレクトリを整理
  3. nuxt.js(v2)のベースURLをターミナルからコントロール
  4. nuxt.js(v2)でpug/stylusを利用する
  5. nuxt.js(v2)でIE11対応をする(CSS編)
  6. nuxt.js(v2)でIE11対応をする(JS編)
  7. nuxt.js(v2)で絶対パス(https~)を取得する方法
  8. nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
  9. nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす

よく使うプラグインのお話

  1. nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
  2. nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
  3. nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!

まとめ系

  1. nuxt.js(v2)でgenerate納品する前にやっておきたい設定
  2. nuxt.jsにおける「components」ディレクトリの規約(案)
21
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?