practice

　　　　

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

<style>
a{color:black;
font-size:16px;}
body{margin:0;
height:8000px;
background:black;
transition:0.6s;}
h1{position:fixed;
top:40px;
left:40px;
color:#ffffff;
font-size:40px;}
</style>

<section id="1"></section>
<h1>スクロール↓<br><span style="font-size:24px;color:gray;">オンロード black<br>　orange　lime　purple　blue　green　yellow<br>　silver　red　pink　magenta　brown 　white /</span><hr> <a href="#1">▲</a></h1>

<script>
window.addEventListener("scroll",function()
{scroll=window.pageYOffset;
if(scroll>240){document.body.style.backgroundColor="white";}
else
if(scroll>220)
{document.body.style.backgroundColor="brown";}
else
if(scroll>200)
{document.body.style.backgroundColor="magenta";}
else
if(scroll>180)
{document.body.style.backgroundColor="pink";}
else
if(scroll>160)
{document.body.style.backgroundColor="red";}
else
if(scroll>140)
{document.body.style.backgroundColor="silver";}
else
if(scroll>120)
{document.body.style.backgroundColor="yellow";}
else
if(scroll>100)
{document.body.style.backgroundColor="green";}
else
if(scroll>80)
{document.body.style.backgroundColor="blue";}
else
if(scroll>40)
{document.body.style.backgroundColor="purple";}
else
if(scroll>20)
{document.body.style.backgroundColor="lime";}
else
{document.body.style.backgroundColor="orange";}});
</script>

</html>