waypoint.js でスクロールに連動してクラス名を追加し、mobile ON / OFF 機能をつけるカスタマイズ

2019年11月20日

下記の記事を参考にして、waypoint.jsでスクロールに連動してクラス名を追加し、さらにmobile ON/OFFをつけるカスタマイズをしてみました。今回はjQueryではなくJavaScript版を使用しています。

【jQuery】waypoint.jsとCSSでスクロールして画面指定位置で要素をアニメーションさせる

デモ

See the Pen vYYbbOY by 荒井 潔子 (@raccoonico) on CodePen.

作り方

HTML

waypoints.jsをダウンロードし、ヘッダーにコードをリンクする。

 <script src="js/lib/noframework.waypoints.min.js" defer></script>

HTMLのスクロールしたい要素に「data-scroll」というカスタムデータ属性を追加する。(カスタムデータ属性の名前は任意)

<div class="container">
 <h1>Super Simple Sample</h1>
 <!-- スクロールしたい要素に「data-scroll」というカスタムデータ属性を追加 -->
 <section class="sectionElement" data-scroll>
    <h2>Sup Title</h2>
    <p>本文</p>
 </section>
</div>

JavaScript

JavaScriptで「data-scroll」というカスタム属性をもつ要素に「default」というクラス名を追加する。スクロールで指定位置に来た場合に、スクロール’down’のときのみ「’animated’」というクラスを追加し、スクロール’up’のときは「’animeted’」というクラスを削除する。

"use strict";

/* -----------------
option setting
------------------ */
const options = {
    attribute: 'data-scroll', // 取得するカスタムデータ属性名
    mobile : false, // mobileでアニメーションするかどうか
    offset : '85%' // 要素の上部がビューポイントの上部から何%の位置に達したらアニメーション開始するか。
}


/* -----------------
Code
------------------ */

// mobile判定用
function isMobile(agent) {
    return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
    );
}
let uaMobile = isMobile(navigator.userAgent);

// 「data-scroll」というカスタム属性をもつ要素を取得し、「.default」クラスを追加
const scrollElems = document.querySelectorAll('[' + options.attribute + ']');
if ((uaMobile && options.mobile) || !uaMobile ){
    for (let scrollElem of scrollElems){
        scrollElem.classList.add('default');
    }
}

// winHeightのoffsetの値まで達したら「.animated」クラスを追加する
for (let element of scrollElems) {
    let waypoint = new Waypoint({
        element: element,
        handler: function (direction) {
            if (direction === 'down') {
                // スクロールダウンするときに追加
                element.classList.add('animated');
            } else {
                // スクロールアップするとき削除
                element.classList.remove('animated');
            }
        },
        offset: options.offset
    })
}

// optionのmobile:falseの場合、すべてのアニメーションを停止する
if (uaMobile && !options.mobile) {
    Waypoint.disableAll();
}

<注意点>

・waypoint.jsのelementには複数要素を渡すことができないので、特定のクラス名をもつ要素すべてをターゲットにしたいときは、for文で囲って回す必要があります。

SCSS

elementにtransitionの値を、「.default」にアニメーション開始前の値、「.animated」にアニメーション終了時の値を追加します。transitionを使えばスクロールアップ時に逆再生してくれるので便利です。

.sectionElement{
    margin-top: 120px;
    transition: opacity 1s 0.5s, transform 1s;
    &.default{
        opacity: 0;
        transform: translateX(-1000px);
    }
    &.animated{
        opacity: 1;
        transform: translateX(0);
    }
}

「.animated」にCSSのanimationを使用してアニメーションを追加すれば、フレームアニメーションも追加することができます。

解説

こちらの記事でもっとお手軽なアニメーションの実装方法をご紹介していますが、waypointをカスタマイズする方法を使えば、下記のような部分にメリットがあると思います。

  • CSSにアニメーションの記述をまとめることができるのでコントロールしやすい
  • 「.default」クラスをうまく使うことで、デフォルト値を自分でコントロールしやすい
  • animate.jsなどのjsアニメーションを追加しやすい

anime.jsと組み合わせたデモも次回作成してみようと思います。以上です。