JSでスクロール時にフェードインしたい。class置き換えに範囲制限をつけたい。

前提・実現したいこと

JSでスクロール時にパワーポイントの画面遷移のような形でフェードインするものを実装したいと思っています。

該当のソースコード
https://jsfiddle.net/Lhankor_Mhy/8d5nhLau/

発生している問題・エラーメッセージ

上記のコードでは指定されているセクションを行き過ぎた際に、画面が表示されないものになっています。
class名をactiveに置き換える範囲に制限をかける？等の処理を実装したいのですが、何文JSを触り始めたところで右も左もわかっておりません。

記載しておりますソースコード以外に、プラグイン等で実装できる方法がありましたら、併せてご教示いただければ幸いです。

よろしくお願いいたします。

該当のソースコード

こちらの質問・回答を参考にしました。

Teratail上の該当の質問
https://teratail.com/questions/283349

該当のソースコード
https://jsfiddle.net/Lhankor_Mhy/8d5nhLau/

以下は上記のソースコードを起こしたものになります。

HTML
1<body>
2    <section class="active">section1</section>
3    <section>section2</section>
4    <section>section3</section>
5    <script type="text/javascript" src="scroll.js"></script>
6</body>

CSS
1section {
2    width: 100%;
3    height: 100vh;
4    box-sizing: border-box;
5    opacity: 0;
6    transition: 1s;
7    position: fixed;
8}
9section.active {
10    opacity: 1;
11    z-index: 2;
12}
13section:nth-child(1){
14    background-color: khaki;
15}
16section:nth-child(2){
17    background-color: azure;
18}
19section:nth-child(3){
20    background-color: pink;
21}
22

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

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

回答1件

querySelectorAll('section').lengthで要素数が取れるので変数へ代入。
代入する際に-1する。※要素数-1が切替できる数だから。

変数をif文の中のカウンターとして使う。
ifを通ったら-1する。
0になると切り替えられなくなります…とか。

この例だと3-1=2をカウント用変数として持ち、ifを通る条件として追加。

js
1let count = querySelectorAll('section').length - 1;
2
3if(f && count > 0){
4  処理
5  --count;
6};

これで２回通るとスルーされるはず。

投稿2021/02/23 15:36

退会済みユーザー

総合スコア0

pochi_722

2021/02/23 17:21

amiya-se様ご教示頂き、ありがとうございます！カウンターの使い方への理解が深まりました。重ねてお礼申し上げます。確認＆実装させて頂いたのですが、こちらの方法ですと、・一度行ったきりでスクロールアップすると２回以上の画面遷移ができない・途中でスクロールアップすると、２回目以降のスクロールダウンができないような状態となりました。理想としてはsection1~3の範囲内で無制限にスクロールアップ/ダウンを行いたいと思っています。スクロールアップ時にcountに1を追加するような処理を実装したのですが、その場合でも、section3まで遷移してcount = 0 になってしまうとそれ以上のスクロールができない状態になっています。重ね重ねの質問で恐縮ですが、amiya-seさんのお知恵を拝借できれば幸いです。よろしくお願いいたします。

退会済みユーザー

2021/02/24 00:16 編集

すみません。三項演算子を使われてるので例示のみ実装される方だとは思わず、範囲を数値化する方法のみお伝えしました。とりあえず動くサンプルコード貼っておきます。 countどこ行った？と疑問に思われるかもしれませんがこっちの方が簡単なので。表示されている前後の要素が取れないとJSがエラーを吐くので`span`で挟んでます。 shownにspanが入るとif文で弾かれてactiveの付け外しをスルーするため、上でも下でも動かせつつ、白バックにはなりません。 ※CSSを弄ってます。nth-of-typeに変えました。このタイプの実装であれば白バックを見せることは無いので大丈夫だと思いますが、サイトの中間に組み込むときはハマりますのでご注意ください。 ※スクロールできる範囲を解除する仕組みが必要になります。以下コードです。 console.log()は理解を深めるために貼ってあるので、もし納品とかされるようでしたら消してくださいね？ <style> section { width: 100%; height: 100vh; box-sizing: border-box; opacity: 0; transition: 1s; position: fixed; } section.active { opacity: 1; z-index: 2; } section:nth-of-type(1){ background-color: khaki; } section:nth-of-type(2){ background-color: azure; } section:nth-of-type(3){ background-color: pink; } </style> <div class=""> <span></span> <section class="active">section1</section> <section>section2</section> <section>section3</section> <span></span> </div> <script> let f = true; document.addEventListener('wheel', e => { if (f) { const target = document.querySelector('section.active'); const shown = (e.deltaY > 0) ? target.nextElementSibling : target.previousElementSibling; if (shown.tagName=="SECTION") { shown?.classList.add('active'); target.classList.remove('active'); f = false; } console.log(shown); console.log(shown.tagName); } }); document.querySelectorAll('section').forEach(el => el.addEventListener('transitionend', e => { f = true; })); </script> 蛇足ですが、+-させる方法は、 (e.deltaY > 0) ? --count: ++count; こちらで実装可能かと。ご参考まで。

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