New to this forum and looking forward to receiving assistance and making some fantastic connections!
Currently working on my personal portfolio with the goal of getting it online for job hunting purposes, but encountering some challenges along the way.
The layout I'm aiming for is a single-page portfolio where elements fade in as you scroll, which I've managed to achieve. However, once the fading is complete, the elements disappear abruptly.
Has anyone else faced this issue before? Do I need to include a fadeOut option in my CSS to address the sudden disappearance of the elements, which are structured in sections?
Also, utilizing Bootstrap in my project as well!!!!!
Code provided below:
CSS
h1 {
font-size: 4rem;
}
h2, h3, h4, h5, h6 {
font-size: 3em;
}
p {
font-size: 1.5em;
}
hr {
border-top: 5px dotted white;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5,
rgba(0, 0, 0, 0.5)), url(https://i.pinimg.com/originals/16/5a/ca/165aca25ea0a632a7eddae4230003f17.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Header Section */
...
...JavaScript
const sectionOne = document.querySelector('#header');
const sections = document.querySelectorAll('section');
const options = {
root: null,
threshold: 0,
rootMargin: "250px"
};
const observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
}
entry.target.classList.toggle('fade');
console.log(entry.target);
})
}, options);
sections.forEach(section => {
observer.observe(section);
})