Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

できる限りお手軽なパララックスないかなと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」ディレクトリの規約(案)
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away