アプリ サイト

【Nuxt.js】スクロールアニメーション実践編:思わず最後までスクロール

前置き

スクロールエフェクトのアニメーション
青い背景が左からニョキっと出てきます👀
動きがあるとスクロールしたくなりますよね🎵

今回はシンプルですが、
背景やタイトルを動かしたり
アイテムを浮き出させたり、使い方は様々です🌟

構成

大まかにこんな感じです🍒
・mouted()でDOMから
 Y座標を取ってきてdata更新
・Y座標を1増やし(下げる)watchを反応させる
 対応するsection idにanimationクラスを付与

完成コード

) pages

解説

今回はいつものようにStep順ではなく
構成で全体感を説明しているため、
部分的に分けて解説していきます!

  • template
  • script
  • style

template

section id

watchでスクロールによる
idへのクラスを付与するためです!
スクロールしていき
この領域に入ったらアニメーション開始💃✨

script

data

positionY

Y軸を取得しwatchを反応させるため

positions

該当idの一番上の位置を代入させるため

mounted()

解説はインラインのコメントにて。
基本的にスクロールや座標の指定は
DOMの表示位置から取るため
大体のことはここに書きます✍️

methods

解説はインラインのコメントにて。
先ほどのmountedで実行している関数です。
ページ内容に関係なく今いる位置の一番上の
Y軸の位置を取れば良いだけなのでDOM関係なし!

watch

解説はインラインにて。

スクロールにより
途中でanimationクラスが
追加されているのが分かりますね👀

style

それぞれを書けばOK!

  • 通常時
  • animationクラス付与時

変化が分かりやすいように
transitionは3秒と長めにとりました。

-アプリ, サイト
-,

© 2020 aLiz Nuxt