Работал над этой простой анимацией навигационной панели с html, css и javascript. Эффект заключается в том, что мои элементы навигационной панели окрашиваются в тот же цвет, что и цвет фона моих секций, когда я прокручиваю страницу вниз. Все регистрируется в консоли, но по какой-то причине не работает. Я пытался выполнить все свои шаги назад, но, похоже, не могу его найти. Нужна вторая пара глаз для этого. Спасибо!
Вот весь код и ссылка на мой репозиторий GitHub: https://github.com/AlexCFurtuna/portfolio
const sections = document.querySelectorAll('section');
const bubble = document.querySelector('.bubble');
const gradients = [
"linear-gradient(to right top, #7F7FD5, #6dd5ed)",
"linear-gradient(to right top, #f7ff00, #db36a4)",
"linear-gradient(to right top, #8a2387, #e94057, #f27121)",
"linear-gradient(to right top, #aaffa9, #11ffbd)"
];
const options = {
threshold: 0.7
};
let observer = new IntersectionObserver(navCheck, options);
function navCheck(entries) {
entries.forEach(entry => {
const className = entry.target.className;
console.log(className);
console.log(entry);
const activeAnchor = document.querySelector(`[data-page=${className}]`);
var gradientIndex = entry.target.getAttribute('data-index');
const coords = activeAnchor.getBoundingClientRect();
const directions = {
height: coords.height,
width: coords.width,
top: coords.top,
left: coords.left
};
if (entry.isIntersecting) {
bubble.style.setProperty('left', `${directions.left}px`);
bubble.style.setProperty('top', `${directions.top}px`);
bubble.style.setProperty('width', `${directions.width}px`);
bubble.style.setProperty('height', `${directions.height}px`);
}
});
}
sections.forEach(section => {
observer.observe(section);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
}
section h2 {
font-size: 5rem;
color: white;
}
header {
background: white;
position: sticky;
top: 0;
background: -webkit-linear-gradient(to right, #7F7FD5, #6dd5ed);
background: linear-gradient(to bottom right, #7F7FD5, #6dd5ed);
}
nav {
min-height: 10vh;
margin: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
}
nav h1,
nav ul {
font-size: 1.5rem;
flex: 1;
}
nav ul,
h1 {
list-style: none;
display: flex;
justify-content: space-evenly;
}
nav a {
text-decoration: none;
}
.bubble {
position: absolute;
z-index: -2;
background: linear-gradient(to right top, #7F7FD5, #6dd5ed);
transition: all;
}
h1 {
font-weight: normal;
}
.home {
margin: 0;
background: -webkit-linear-gradient(to right top, #7F7FD5, #6dd5ed);
background: linear-gradient(to right top, #7F7FD5, #6dd5ed);
}
.about {
background: -webkit-linear-gradient(to right top, #f7ff00, #db36a4);
background: linear-gradient(to right top, #f7ff00, #db36a4);
}
.projects {
background: -webkit-linear-gradient(to right top, #8a2387, #e94057, #f27121);
background: linear-gradient(to right top, #8a2387, #e94057, #f27121);
}
.contact {
background: -webkit-linear-gradient(to right top, #aaffa9, #11ffbd);
background: linear-gradient(to right top, #aaffa9, #11ffbd);
}
footer {
height: 50px;
background: -webkit-linear-gradient(to right bottom, #aaffa9, #11ffbd);
background: linear-gradient(to right bottom, #aaffa9, #11ffbd);
color: white;
text-align: center;
}
h3 {
padding: 15px;
}
<body>
<header>
<nav>
<h1>Alex Furtuna</h1>
<ul>
<li>
<a data-page="home" href="#"></a>Home</li>
<li>
<a data-page="about" href="#"></a>About</li>
<li>
<a data-page="projects" href="#"></a>Projects</li>
<li>
<a data-page="contact" href="#"></a>Contact</li>
<div class="bubble"></div>
</ul>
</nav>
</header>
<main>
<section data-index="0" class="home">
<h2>Home</h2>
</section>
<section data-index="1" class="about">
<h2>About</h2>
</section>
<section data-index="2" class="projects">
<h2>Projects</h2>
</section>
<section data-index="3" class="contact">
<h2>Contact</h2>
</section>
</main>
<footer>
<h3>footer</h2>
</footer>
<script src="app.js"></script>
</body>