Dayros,
идея
Malleys,
Смена цвета текста в зависимости от секции
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<style>
html {
background: url("http://wallpaperscraft.com/image/mazda_white_front_view_113205_5064x3376.jpg") center / cover;
background-attachment: fixed;
height: 100vh;
}
body, .scrolling {
margin: 0;
height: 100vh;
overflow: auto;
}
nav {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
padding: 1em 1.5em;
margin: 1em;
border-radius: 70% 15% 40% 11%;
z-index: 1;
font-weight: bold;
font-size: 130%;
}
section {
height: 100vh;
position: relative;
top: 100vh;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
font: 20vh "Helvetica Neue", sans-serif;
}
section:nth-child(2n + 1), nav.white {
color: #fff;
background: #000;
mix-blend-mode: multiply;
}
section:nth-child(2n), nav {
color: #000;
background: #fff;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<nav>☰</nav>
<section>Lorem</section>
<section>Ipsum</section>
<section>Dolor</section>
<section>Sit</section>
<section>Amet</section>
<script>
window.addEventListener("DOMContentLoaded", function() {
var nav = document.querySelector("nav");
var element = document.querySelector("body");
document.addEventListener("scroll", function() {
var progress = .5 + window.pageYOffset / element.offsetHeight | 0;
nav.classList[progress % 2 ? "add" : "remove"]("white")
})
});
</script>
</body>
</html>