1画面スクロール用ライブラリメモ

scrollify

固定ヘッダーの場合はヘッダーの高さ分 offset で調節することが必要。
ただしその場合はフッターが見えなくなる / 切れてしまうためフッターもセクションとして設定する必要がある。

HTML

<div id="js-home-keyvisual" class="js-home-section" data-section-name="keyvisual">
	<div class="home-keyvisual__movie">
		<video class="home-keyvisual__video" autoplay playsinline muted loop>
			...
		</video>
	</div>
</div>
<section class="js-home-section" data-section-name="news">
...
</section>
<section class="js-home-section" data-section-name="about">
...
</section>

<footer id="js-footer" class="js-home-section footer" data-section-name="footer">
...
</footer>

CSS

.home-scrollfy-pagination {
    position: fixed;
    top: 50%;
    left: 20px;
    z-index: $zi-home-scrollfy-pagination;
    font-size: 1em;
    list-style: none;
    transform: translateY(-50%);

    span {
        display: none;
    }

    a {
        position: relative;
        display: block;
        height: 20px;
        padding: 4px;
        margin-bottom: 5px;
        color: var(--wp--preset--color--my-accent);

        &.active::after {
            box-shadow: inset 0 0 0 5px;
        }

        // /*現在地表示のテキストの設定*/
        // .hover-text {
        //     position: absolute;
        //     top: 0;
        //     right: 15px;
        //     padding-right: 15px;
        //     opacity: 0;
        //     transition: opacity 0.5s ease;
        // }

        // &:hover .hover-text {
        //     opacity: 1;
        // }

        &::after {
            position: absolute;
            top: 0;
            right: 3px;
            bottom: 0;
            display: block;
            width: 10px;
            height: 10px;
            margin: auto;
            content: '';
            border: 1px solid;
            border-radius: 50%;
            transition: box-shadow 0.5s ease;
        }
    }
}

jQuery

jQuery.scrollify({
	offset: -80,
	section : ".js-home-section",
	scrollbars:"false",
	interstitialSection: "#js-header, #js-footer, .home-keyvisual",
	easing: "swing",
	scrollSpeed: 300,

	//ページネーション設定
	before:function(i,panels) {
		var ref = panels[i].attr("data-section-name");
		jQuery('.home-scrollfy-pagination .active').removeClass('active');
		jQuery('.home-scrollfy-pagination').find('a[href="#' + ref + '"]').addClass('active');
	},
	afterRender:function() {
		var pagination = '<ul class="home-scrollfy-pagination">';
		var activeClass = '';
		jQuery('.js-home-section').each(function(i) {
		activeClass = '';
		if(i === jQuery.scrollify.currentIndex()) {
		activeClass = 'active';
		}
		pagination += '<li><a class="' + activeClass + '" href="#' + jQuery(this).attr("data-section-name") + '"><span>' + jQuery(this).attr("data-section-name").charAt(0).toUpperCase() + jQuery(this).attr("data-section-name").slice(1) + '</span></a></li>';
		});
		pagination += '</ul>';

		jQuery('#js-home-keyvisual').append(pagination);
		jQuery('.home-scrollfy-pagination a').on('click', jQuery.scrollify.move);
	}
});

トラブルシューティング

videoタグのmp4が崩れる

mp4のセクションはinterstitialSectionに含める。

afterLoad: function(anchorLink, index){
    jQuery('video')[0].play(); //これ入れる
...
}