Changing background color on scroll
Question
so I made an attempt at writing my own version of code to change the background color of a page on scroll. I've searched all over the internet, but I just keep finding Jquery examples and no vanilla JS ones that really show me exactly how to do it.
My first thoughts were to handle the colors and animation in css and trigger them in JS. If I would like to handle animations in CSS, this is the way to go, no? Anyway, my code is obviously not working, so would anyone be able to help me out?
It's probably not as efficient as it should be, so any tips there would be helpful as well.
I haven't finished the animation part yet in css, but the groundwork is laid out. So my idea was to select all of the different colors, then put them into an array. Then make a for loop inside of the function.
<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);
}
}
})
2 answers
solution1
1 ACCPTED 2019-05-19 16:29:46
If you want to change the background color when a given section hits the top of the screen, you could try something like:
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>
solution2
0 2019-05-19 14:12:40
You can just use a trivial array of colors.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.