フロントエンドエンジニアの田中です!
当記事は先日書かせていただいた記事「【開発日誌 #3】Nuxt.js × fullPage.jsでリッチなアニメーションページを構築 (1)Web Font 編」の続編です。
Nuxt.jsアプリにfullPage.jsをインストールし、ページの切り替えに合わせて簡単なアニメーションを適用させてみたいと思います。
《環境構築》
fullPage.jsのインストールから、動作のチェックまでをざっくり解説します。
(Nuxt.jsのインストールは割愛いたします。インストール方法はこちらを参考にしてください。)
1, yarnまたはnpmを使用してnuxt-fullpage.jsをインストール
npm install --save nuxt-fullpage.js
// 実行するとpackage.jsonに下記が追加される
"dependencies": {
"nuxt-fullpage.js": "0.0.3"
},
2, nuxt.config.jsのmodulesキー内にnuxt-fullpage.jsを使用することを記述
{
modules: [
'nuxt-fullpage.js',
]
}
3, Nuxtプラグインを作成し、使用する設定をする
// 3-1
// ルートで下記のコマンドを実行し、pulginsディレクトリを作成、その中にfullpage.jsファイルを作成
mkdir plugin && touch plugins/fullpage.js
// 3-2
// 作成したfullpage.jsに下記を記述
import Vue from 'vue'
import Fullpage from 'vue-fullpage.js'
import 'fullpage.js/dist/fullpage.css'
Vue.use(Fullpage)
// 3-3
// nuxt.config.jsのpluginsキー内に下記を記述
plugins: [
{ src: '~/plugins/fullpage', mode: 'client' }
],
4, pages/index.vueをまるっと下記に書き換える
<template>
<full-page ref="fullpage" :options="options" id="fullpage">
<div class="section">
<p class="text">
First section
</p>
</div>
<div class="section">
<p class="text">
Second section
</p>
</div>
<div class="section">
<p class="text">
Third section
</p>
</div>
</full-page>
</template>
<script>
export default {};
</script>
<style>
.section {
position: relative;
}
.section:nth-child(1) {
background-color: lightblue;
}
.section:nth-child(2) {
background-color: lightgray;
}
.section:nth-child(3) {
background-color: lightpink;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
font-size: 240px;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.active .text {
animation-name: fadeIn;
animation-duration: 0.5s;
animation-delay: 0.75s;
animation-fill-mode: forwards;
}
</style>
ひととおり記述できたらローカル環境で確認してみましょう。
npm run dev // localhost:3000でブラウザが立ち上がります。
・・・上記のようになっていればOKです。
《仕組みをざっくり解説》
fullPage.jsプラグインを使用している領域内では、sectionクラスを付与した要素が、画面いっぱいに表示される1枚のスライドになります。
// fullPage.jsを使用したい領域を<full-page>タグでラップする
<full-page ref="fullpage" :options="options" id="fullpage">
<div class="section">スライドの1枚目</div>
<div class="section">スライドの2枚目</div>
<div class="section">スライドの3枚目</div>
</full-page>
表示中のスライドにはactiveクラスが付与されます。(ブラウザの検証ツールで確認できます。)
そのactiveクラスを利用して、keyframeでアニメーションを適用します。
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.active .text { // activeクラス配下のtextクラスにfadeInアニメーションを適用
animation-name: fadeIn;
animation-duration: 0.5s;
animation-delay: 0.75s;
animation-fill-mode: forwards;
}
・・・以上が概要です。
〜おまけ〜
あまり工数かからずに
こんな感じの動きもつけられたりもします。
《まとめ》
fullPage.jsのインストールから、動作のチェックまでをざっくり解説させていただきました。
当記事では触れていませんが、メソッド、オプション、フックなど充実しており、奥の深いプラグインです。
実案件ではこれらを使用して、スライドの調整をしたり、途中で通常のスクロールにしたり、Internet Explorerに無理やり対応したりしました。
簡単だけどいろいろなことができる素晴らしいプラグインでした。公式のサイト、Githubを記載させていただきます。
《おわりに》
当社の案件はとにかく「多彩」!
求められる技術レベルも日に日に高まっています。
今後もモダンな技術を用いたサイト/アプリケーション構築が増えていく見込みです。