Question

所以我尝试编写自己的代码版本来更改滚动页面的背景颜色。我已经在互联网上进行了搜索，但是我一直在寻找Jquery示例，而没有真正显示出确切操作方法的普通JS示例。

我的第一个想法是处理CSS中的颜色和动画并在JS中触发它们。如果我想用CSS处理动画，这就是方法，不是吗？无论如何，我的代码显然无法正常工作，因此有人可以帮助我吗？

它可能没有达到应有的效率，因此那里的任何技巧也将有所帮助。

我还没有在CSS中完成动画部分，但基础工作已经完成。所以我的想法是选择所有不同的颜色，然后将它们放入数组中。然后在函数内部进行for循环。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css\style.css">
    <title>Site experiment</title>
</head>
<body>

<section>
<h1 id="first-h1">This site is an experiment on scroll effects</h1>
</section>

<section>
<h1 id="second-h1">I really hope this helps me learn vanilla JavaScript better</h1>
</section>

<section>
<h1 id="third-h1">I think it will honestly</h1>
</section>

<section>
<h1 id="fourth-h1">Or maybe it will frustrate me till the end of time</h1>
</section>

<section>
<h1 id="fifth-h1">Even if that does happen, I'll still keep trying</h1>
</section>

</body>
<script src="js\app.js"></script>
</html>

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto Mono', monospace;
}

body {
    background-color: #E5E1EE;
    transition: 0.3s all;
}

section {
    height: 100vh;
}

h1 {
    margin: 15rem;
}

.lightCyan {
    background-color: #DFFDFF;
}

.darkSkyBlue {
    background-color: #90BEDE;
}

.aquamarine {
    background-color: #68EDC6;
}

.electricBlue {
    background-color: #90F3FF;
}

    let bdy = document.querySelector('body');
let cyan = bdy.classList.add('lightCyan');
let skyBlue = bdy.classList.add('darkSkyBlue');
let aqua = bdy.classList.add('aquamarine');
let electric = bdy.classList.add('electricBlue');
let colors = [cyan, skyBlue, aqua, electric];


window.addEventListener('scroll', function () {
    if (document.documentElement.scrollTop || document.body.scrollTop > window.innerHeight) {
        for(let i = 0; i < colors.length; i++) {
           colors.push(i);
        }
    }
})

Answer 1

您可以只使用少量颜色。

let bdy = document.querySelector('body');
let colors = ['lightgreen', 'tomato', 'orange', 'purple'];

window.addEventListener('scroll', function () {
    if (document.documentElement.scrollTop || window.pageYOffset > window.innerHeight) {
    var diff = parseInt(window.pageYOffset - window.innerHeight);
    var step = parseInt(window.innerHeight*2);
    bdy.style.backgroundColor = colors[Math.floor(diff/step)];
    }
})

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto Mono', monospace;
}

body {
    background-color: #E5E1EE;
    transition: 0.3s all;
}

section {
    height: 100vh;
}

h1 {
    margin: 15rem;
}

.lightCyan {
    background-color: #DFFDFF;
}

.darkSkyBlue {
    background-color: #90BEDE;
}

.aquamarine {
    background-color: #68EDC6;
}

.electricBlue {
    background-color: #90F3FF;
}

<section>
<h1 id="first-h1">This site is an experiment on scroll effects</h1>
</section>

<section>
<h1 id="second-h1">I really hope this helps me learn vanilla JavaScript better</h1>
</section>

<section>
<h1 id="third-h1">I think it will honestly</h1>
</section>

<section>
<h1 id="fourth-h1">Or maybe it will frustrate me till the end of time</h1>
</section>

<section>
<h1 id="fifth-h1">Even if that does happen, I'll still keep trying</h1>
</section>

Answer 2

如果您要在给定部分到达屏幕顶部时更改背景颜色，可以尝试执行以下操作：

const colors = ['', 'lightCyan', 'darkSkyBlue', 'aquamarine', 'electricBlue']

const sections = [...document.getElementsByTagName('section')]

window.addEventListener('scroll', function () {

  const scrollFromTop = window.pageYOffset

  for (let i = 0; sections.length > i; i++) {

    if (scrollFromTop <= sections[i].offsetTop) {
      document.body.className = colors[i] 
      break
    } 

  }

})

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Mono', monospace;
}

body {
  background-color: #E5E1EE;
  transition: 0.3s all;
}

section {
  height: 100vh;
}

h1 {
  margin: 15rem;
}

.lightCyan {
  background-color: #DFFDFF;
}

.darkSkyBlue {
  background-color: #90BEDE;
}

.aquamarine {
  background-color: #68EDC6;
}

.electricBlue {
  background-color: #90F3FF;
}

<section>
<h1 id="first-h1">This site is an experiment on scroll effects</h1>
</section>

<section>
<h1 id="second-h1">I really hope this helps me learn vanilla JavaScript better</h1>
</section>

<section>
<h1 id="third-h1">I think it will honestly</h1>
</section>

<section>
<h1 id="fourth-h1">Or maybe it will frustrate me till the end of time</h1>
</section>

<section>
<h1 id="fifth-h1">Even if that does happen, I'll still keep trying</h1>
</section>

更改滚动条的背景色

2 个答案: