フロントエンドエンジニアの田中です！

当記事は先日書かせていただいた記事「【開発日誌 #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を記載させていただきます。

《おわりに》

当社の案件はとにかく「多彩」！

求められる技術レベルも日に日に高まっています。

今後もモダンな技術を用いたサイト／アプリケーション構築が増えていく見込みです。