全画面スクロールの調整方法

画面スクロールで要素の位置、透明度を変更して画面が切り替わっているように見せるサイトを構築しているのですが、少しのスクロールだけで画面が一気に切り替わってしまいます。

おそらく、スクロール量でスクロール方向を判定し、判定された数だけ値を代入して切り替えているためにこのような状態になっていると思うのですが対策方法がイマイチ思いつきません。

参考サイトのソースコードを見て対策を考えてみたのですが思い通りの結果にはなりませんでした。
以下の参考サイトのような挙動に近くなるようどなたかご教授願えませんでしょうか？

以下参考サイト↓
https://garden-eight.com/
http://momotaro.design/index.html

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
7
8</head>
9
10<body>
11
12    <div class="panel1 index">
13        <p class="text">test1</p>
14    </div>
15    
16    <div class="panel2 index hidden">
17        <p class="text">test2</p>
18    </div>
19    
20    <div class="panel3 index hidden">
21        <p class="text">test3</p>
22    </div>
23    
24    <div class="panel4 index hidden">
25        <p class="text">test4</p>
26    </div>
27    
28    <div class="panel5 index hidden">
29        <p class="text">test5</p>
30    </div>
31
32    <div class="bottom_layer">
33        <div class="split split_border"></div>
34        <div class="split split_border"></div>
35        <div class="split split_border"></div>
36        <div class="split split_border"></div>
37        <div class="split"></div>
38    </div>
39
40</body>
41
42</html>
43

css
1html,
2body {
3    width: 100%;
4    height: 100%;
5    margin: 0;
6}
7
8.panel1 {
9    width: 100%;
10    height: 100%;
11}
12
13.panel2 {
14    width: 100%;
15    height: 100%;
16}
17
18.panel3 {
19    width: 100%;
20    height: 100%;
21}
22
23.panel4 {
24    width: 100%;
25    height: 100%;
26}
27
28.panel5 {
29    width: 100%;
30    height: 100%;
31}
32
33.bottom_layer {
34    width: 100%;
35    height: 100%;
36    background: radial-gradient(#252525, #000);
37    display: flex;
38
39}
40
41.split {
42    width: 20%;
43}
44
45.split_border {
46    border-right: 1px solid #232323;
47}
48
49.text {
50    -webkit-text-stroke: 1px #fff;
51    z-index: 3;
52}
53
54.index {
55    position: fixed;
56}
57
58.is_active {
59    opacity: 1;
60}
61
62.index {
63    display: flex;
64    justify-content: center;
65    align-items: center;
66    font-size: 150px;
67    color: rgba(0, 0, 0, 0);
68    font-weight: bold;
69}
70
71.bottomIn {
72    animation: test 1s;
73    animation-fill-mode: forwards;
74}
75
76@keyframes test {
77    0% {
78        top: 100%;
79        opacity: 0;
80        transform: skew(50deg, 50deg);
81    }
82
83    100% {
84        top: 0;
85        opacity: 1;
86    }
87}
88
89.topOut {
90    animation: test2 1s;
91    animation-fill-mode: forwards;
92}
93
94@keyframes test2 {
95    0% {
96        bottom: 0;
97        opacity: 1;
98    }
99
100    100% {
101        bottom: 100%;
102        opacity: 0;
103        transform: skew(50deg, 50deg);
104    }
105}
106
107.topIn {
108    animation: test3 1s;
109    animation-fill-mode: forwards;
110}
111
112@keyframes test3 {
113    0% {
114        bottom: 100%;
115        opacity: 0;
116        transform: skew(50deg, 50deg);
117    }
118
119    100% {
120        bottom: 0;
121        opacity: 1;
122    }
123}
124
125.bottomOut {
126    animation: test4 1s;
127    animation-fill-mode: forwards;
128}
129
130@keyframes test4 {
131    0% {
132        top: 0;
133        opacity: 1;
134    }
135
136    100% {
137        top: 100%;
138        opacity: 0;
139        transform: skew(50deg, 50deg);
140    }
141}
142
143.hidden {
144    display: none;
145}
146

javascript
1var index = document.getElementsByClassName('index');
2var count = 0;
3
4$(window).on('wheel mousewheel', function (ev) {
5    var deltaY = ev.originalEvent.deltaY
6    var direction = (deltaY < 0) ? 'up' : 'down';
7    trymove(direction);
8});
9
10var trymove = function (direction) {
11
12    if (direction === 'up' && count >= 1) {
13        count -= 1;
14    } else if (direction === 'down' && count <= 3) {
15        count += 1;
16    }
17
18    var i = index[count];
19    var a = index[count - 1];
20    var b = index[count + 1];
21
22
23    if (direction === 'down') {
24
25        $(i).removeClass('hidden');
26        $(i).addClass('bottomIn');
27        $(i).removeClass('bottomOut');
28
29        $(a).addClass('topOut');
30        $(a).removeClass('bottomIn');
31        $(a).removeClass('topIn');
32
33    } else if (direction === 'up') {
34
35        $(i).removeClass('hidden');
36        $(i).removeClass('bottomIn');
37        $(i).removeClass('topOut');
38        $(i).addClass('topIn');
39
40        $(b).addClass('bottomOut');
41        $(b).removeClass('bottomIn');
42        $(b).removeClass('topIn');
43    };
44}

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

回答1件

ベストアンサー

ページ遷移中かどうかを判定する変数を用意する方法はいかがでしょうか。

javascript
1
2var index = document.getElementsByClassName('index');
3var count = 0;
4var isMoving = false; // この変数でページ遷移中か判断
5
6$(window).on('wheel mousewheel', function (ev) {
7  if(!isMoving) { // falseのときのみ以下を実行
8    isMoving = true; // isMovingをtrueにする
9
10    var deltaY = ev.originalEvent.deltaY
11    var direction = (deltaY < 0) ? 'up' : 'down';
12    trymove(direction);
13
14    var switchStatus = function() {
15      isMoving = false;
16    }
17    setTimeout(switchStatus, 1000);
18    // １秒経過したらisMovingをfalseに戻す
19    // ここの待機秒数はアニメーションの再生秒数と合わせる
20  }
21});
22
23/* 以下そのまま */
24
25var trymove = function (direction) {
26
27  if (direction === 'up' && count >= 1) {
28    count -= 1;
29  } else if (direction === 'down' && count <= 3) {
30    count += 1;
31  }
32
33  var i = index[count];
34  var a = index[count - 1];
35  var b = index[count + 1];
36
37
38  if (direction === 'down') {
39
40    $(i).removeClass('hidden');
41    $(i).addClass('bottomIn');
42    $(i).removeClass('bottomOut');
43
44    $(a).addClass('topOut');
45    $(a).removeClass('bottomIn');
46    $(a).removeClass('topIn');
47
48  } else if (direction === 'up') {
49
50    $(i).removeClass('hidden');
51    $(i).removeClass('bottomIn');
52    $(i).removeClass('topOut');
53    $(i).addClass('topIn');
54
55    $(b).addClass('bottomOut');
56    $(b).removeClass('bottomIn');
57    $(b).removeClass('topIn');
58  };
59}