practice

　　　　

<html>
<meta charset="utf-8">

<style>
.表示{position:absolute;
left:50%;
top:50%;
width:100%;
height:100vh;
font-size:40px;
text-align:center;
line-height:100vh;
transform:translate(-50%,-50%);
opacity:0;
transition:2s;}
.その_01{background-color:red;}
.その_02{background-color:blue;}
.その_03{background-color:green;}
.その_04{background-color:yellow;}
.その_05{background-color:black;}
.その_06{background-color:silver;}
.その_07{background-color:purple;}
.その_08{background-color:brown;}
.その_09{background-color:lime;}
.その_10{background-color:orange;}
.その_11{background-color:white;}
.すくろーる{opacity:1;}
</style>

<div class="表示 その_01 すくろーる"style="color:white;">レッド</div>
<div class="表示 その_02"style="color:red;">ブルー</div>
<div class="表示 その_03"style="color:blue;">グリーン</div>
<div class="表示 その_04";style="color:green;">イエロー</div>
<div class="表示 その_05"style="color:yellow;">ブラック</div>
<div class="表示 その_06"style="color:black;">シルバー</div>
<div class="表示 その_07"style="color:silver;">パープル</div>
<div class="表示 その_08"style="color:purple;">ブラウン</div>
<div class="表示 その_09"style="color:brown;">ライム</div>
<div class="表示 その_10"style="color:lime;">オレンジ</div>
<div class="表示 その_11"style="color:orange;">ホワイト<span style="font-size:16px;">(ここまで)</span></div>

<script>
表示=document.querySelectorAll(".表示"),count=1;
{番号=!1;
window.addEventListener("wheel",function(ねくすと)
{if(!番号)
{ねくすと.deltaY>0?(count++,count>=表示.length&&(count=表示.length)):ねくすと.deltaY<0&&(count--,1>=count&&(count=1)),
番号=!0,setTimeout(function()
{番号=!1});
for(愛=0;
愛<表示.length;愛++)表示[愛].classList.remove("すくろーる");
表示[count-1].classList.add("すくろーる")}})}
</script>

</html>