
エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
Vue.js/Nuxt.jsでパララックス効果を実装 - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Vue.js/Nuxt.jsでパララックス効果を実装 - Qiita
Vue/Nuxtでパララックスしようぜ! ※パララックス効果とは:スクロールしたときに、スクロール量に合わ... Vue/Nuxtでパララックスしようぜ! ※パララックス効果とは:スクロールしたときに、スクロール量に合わせてずれたり動いたりするやつ。 こういうやつ Vue.jsプラグインもいくつかあるけど、自前で実装した方が自由度高くて楽だった。勉強にもなるし。 実装方法概要 実装方法の大まかな説明 scrollイベントをlisten スクロール量やら色々パラメータを取って移動量を計算 imgのstyleに object-position: {移動量X}% {移動量Y}% をぶち込む ※object-positionを知らない方は先に 事前知識 : CSS object-position について をどうぞ。 もちろん、 background-position: {移動量X}% {移動量Y}% プロパティでも可能です。 <template> <img ref="backgroundImg" class