はじめに
LPやコーポレートサイトでよく、スクロールするとコンテンツがフワッとフェードインするサイトが見られます。
本記事は、自分がNuxt.jsを使ってこの機能を実装した時に、ライブラリ、jQuery未使用で実装した内容を記事にします。
完成イメージをCodePenに載せているのでご参考にしてください。
See the Pen scroll-fade-in by Matsumoto (@RyoTa0222) on CodePen.
目次
- コンポーネントの作成
- v-ifとv-showの違い
- アニメーションを適用する
- 動作確認
- 最後に
1. コンポーネントの作成
Vue.jsで実装するため、機能が共通している部分をコンポーネントにします。今回では、「スクロールしていくとコンテンツがフェードインする」という部分が共通の機能となるため、この部分をコンポーネントにします。
<template>
<div>
<slot v-show="visible"></slot>
</div>
</template>
<script>
export default {
data() {
return {
visible: false
};
},
created() {
window.addEventListener("scroll", this.handleScroll);
},
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
handleScroll() {
if (!this.visible) {
var top = this.$el.getBoundingClientRect().top;
this.visible = top < window.innerHeight + 100;
}
}
}
}
</script>
テンプレートの部分では、slotでコンテンツの置換を行っています。変数のvisibleはデフォルトでfalseとなっており、非表示の状態になっています、このコンポーネントでは、スクロールイベントを設定し、デフォルトで非表示の要素が一定の高さにくるとvisibleがtrueになり、表示されます。
this.$el.getBoundingClientRect().top;では、ブラウザの表示領域の左上を(0, 0)として、そこから要素の上端までの相対位置の値が返ってきます。なので、this.visible = top < window.innerHeight + 100;では、ブラウザのウインドウの高さに100pxを足した値よりtopの値が小さくなった時に、this.visibleにtrueが代入されます。
次に、描画するかどうかをv-ifとv-showのどちらで切替を行うかについてお話します。
2. v-ifとv-showの違い
v-ifはDOMへの描画の切替を行います。そのため、DeveloperToolsを用いるとその要素が描画されていないことがわかります。
一方で、v-showは、画面への表示、非表示の切替がCSSで行われます。つまりDOM上では常に描画された状態であり、例えばv-show="false"は、CSSでdisplay: none;が与えられて非表示になっています。
今回のケースでどちらを用いるのが最適かというと、いろいろなサイトを見てもらうとわかるのですが、ページの長さがコンテンツの表示、非表示に関係なく同様となっています。つまり、DOM上には常に描画された形であり、v-showによって切り替えるのが正しいです。
3. アニメーションを適用する
Vue.jsでアニメーションといえば、トランジションをまず頭に思い浮かべます(トランジションについて)。Vue.jsのドキュメントにも以下のように書いてあります。
Vue は、transition ラッパーコンポーネントを提供しています。このコンポーネントは、次のコンテキストにある要素やコンポーネントに entering/leaving トランジションを追加することを可能にします:
- 条件付きの描画 (v-if を使用)
- 条件付きの表示 (v-show を利用)
- 動的コンポーネント
- コンポーネントルートノード (Component root nodes)
ただ、ここまで説明しておいて、今回はトランジションを使っておらず、CSSのanimationを使ってフェードインを実装しています
理由としては、自分がなかなかトランジションを使いこなせていないからです、、、そのうちトランジションマスターになってこの記事が更新されると信じています笑
<template>
<div :class="{fadeIn: visible}">
<slot v-show="visible"></slot>
</div>
</template>
<style>
.fadeIn {
animation: fadeIn 2s;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
ここでは、templateのdiv要素に対して、visibleがtrueとなった場合に動的にfadeInというクラス名が付与されています。
そして、CSSでfadeInという名前の@keyframesでアニメーションを作っています。
4. 動作確認
今回はコンポーネントの名前をFadeInComponentとしています。
このコンポーネントを呼び出す時は、<fade-in-component>タグの子要素に表示させたい中身を記述するだけです！
<fade-in-component>
<section>
<div class="wrapper">
<h1>Title00</h1>
<h2>subtitle00</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>subtitle01</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<div class="d-flex justify-space-around my-4">
<v-btn depressed color="info">button</v-btn>
<v-btn outlined color="info">button</v-btn>
</div>
</div>
</section>
</fade-in-component>
動作確認の方は、冒頭のCodePenの方で確認してみてください！また、animation: fadeIn 2s;の秒数やthis.visible = top < window.innerHeight + 100;の部分を変えたりして、好みに調整してみてください！
5. 最後に
今回実装したものは一つの方法でしかありません。ライブラリやjQueryに依存せず、他にももっといい方法があるかもしれないので、発見出来次第、追記していきたいと思っています！