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

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

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

"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();
}

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