前提・実現したいこと

1セクションを1画面表示にして
スクロールするごとに1セクションずつ切り替わるようなページを実装したいです。

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出

スクロールスナップが効いている上記のようなサイトで
かつ、セクション同士の切れ目が見えないように
スクロールすると次のセクションがふわっと出てくるようなイメージです。

試したこと

調べてみたのですが、
スクロールしていき、表示領域に入ったら要素をふわっと表示させるような事ばかり出てきてしまい、
なかなか、1セクションごとに画面切り替えを行うといった情報が出てこず詰まってしまっております。。。

有識者の方がいらっしゃいましたら
ご教授いただけますと幸いです。

どうぞよろしくお願い致します。

【追記】
クロスフェード

がスクロールに連動するようなイメージです。
スクロールをすると、z軸の下側（マイナス）から次のセクションが浮き上がってくるように実装をしたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

Intersection Observer を使うのはいかがでしょうか。

Intersection Observer API - Web API | MDN

サンプルを作りました。

html
1    <section></section>
2    <section></section>
3    <section></section>

css
1        html {
2            scroll-snap-type: y mandatory;
3        }
4
5        section {
6            width: 100%;
7            height: 100vh;
8            scroll-snap-align: start;
9            opacity: 0;
10            transition: 1s;
11        }
12        section.active {
13            opacity: 1;
14        }

js
1        const observer = new IntersectionObserver(
2            entries => {
3                entries.forEach(e => {
4                    if (e.isIntersecting) e.target.classList.add('active');
5                })
6            },
7            { threshold: 0.5 }
8        );
9        document.querySelectorAll('section').forEach(e => {
10            observer.observe(e);
11        });

コメントを受けて追記

サンプル

css
1        section {
2            width: 100%;
3            height: 100vh;
4            box-sizing: border-box;
5            opacity: 0;
6            transition: 1s;
7            position: fixed;
8        }
9
10        section.active {
11            opacity: 1;
12            z-index: 2;
13        }

js
1        let f = true;
2        document.addEventListener('wheel', e => {
3            if (f) {
4                const target = document.querySelector('section.active');
5                const shown = (e.deltaY > 0) ?
6                    target.nextElementSibling :
7                    target.previousElementSibling;
8                shown?.classList.add('active');
9                target.classList.remove('active');
10                f = false;
11            }
12        });
13        document.querySelectorAll('section').forEach(el => el.addEventListener('transitionend', e => {
14            f = true;
15        }));

境界の処理とかはしてないので、上手くやってください。

ただ、これ、自前で実装するよりも、パララックスやスクロールのプラグインを使った方が上手くいくかもしれませんよ。

投稿2020/08/08 02:17

編集2020/08/08 03:53

Lhankor_Mhy

総合スコア36930

kii.32

2020/08/08 02:26

ご丁寧にサンプルまで作っていただきありがとうございます。こちらのサンプルですと、セクションごとの切れ目が見えているかと思うのですが、これを見えないように、セクションごとの切り替えをフェードインで行いたいです。。。（下にスクロールしている感を無くして、1画面で固定で下からふわっと次のセクションが出てくるような。。。）うまく説明ができずすみません。。。