1
/
5

【開発日誌 #5】Nuxt.js × fullPage.jsでリッチなアニメーションページを構築 (2)fullPage.jsアニメーション編

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

当記事は先日書かせていただいた記事「【開発日誌 #3】Nuxt.js × fullPage.jsでリッチなアニメーションページを構築 (1)Web Font 編」の続編です。

【開発日誌 #3】Nuxt.js × fullPage.jsでリッチなアニメーションページを構築 (1)Web Font 編 | COMMUDE 開発日誌
初めまして。フロントエンドエンジニアの田中です! 先日、某大手ファストフード店のキャンペーンページの開発に携わらせていただきました。 開発の「概要」と「苦労した点」を下記しますので、よかったらご参考にしてみてください。 SSG(Static Site Generation) 画面いっぱいのコンテンツを、マウスホイール/タッチパッドでスクロールして表示を切り替える(fullPage.js) 表示が切り替わるごとに、コンテンツに合わせてアニメーションをする ▷Nuxt.js ( https://ja.nuxt
https://www.wantedly.com/companies/commude/post_articles/328645

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を記載させていただきます。


おわりに

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

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

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

株式会社コムデ's job postings
13 Likes
13 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more