YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-12 06:16:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

finally working intersection observers

Browse Source
This commit is contained in:
youhavetrouble
2023-12-28 20:37:03 +01:00
parent ac48133584
commit 0fb0eeaebb
3 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7 -3
View File
@@ -20,11 +20,12 @@
</head> </head>
<body> <body>
<nav> <nav>
<a href="#hero">Home</a> <a data-link="about" href="#about">About me</a>
<a href="#projects">Projects</a> <a data-link="projects" href="#projects">Projects</a>
<a data-link="socials" href="#socials">Socials</a>
</nav> </nav>
<main> <main>
<section id="hero"> <section id="about">
<article> <article>
<div> <div>
<h1>YouHaveTrouble</h1> <h1>YouHaveTrouble</h1>
@@ -213,6 +214,9 @@
</article> </article>
</div> </div>
</section> </section>
<section id="socials">
</section>
</main> </main>
</body> </body>
index.js
+26 -31
View File
@@ -1,42 +1,37 @@
const navLinks = { const sections = document.querySelectorAll('main section');
hero: document.querySelector('a[href="#hero"]'), const navLinks = document.querySelectorAll('[data-link]');
projects: document.querySelector('a[href="#projects"]'),
}
const sections = { const options = {
hero: document.querySelector('#hero'), root: null,
projects: document.querySelector('#projects'), rootMargin: '-20% 0px -20% 0px',
} threshold: 0.2
};
changeSection(window.location.hash ? window.location.hash : '#hero') const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
for (const link of Object.values(navLinks)) { entries.forEach(entry => {
link.addEventListener('click', (e) => { if (entry.isIntersecting) {
const target = e.target.getAttribute('href'); const sectionId = entry.target.id;
if (!target.startsWith('#')) return; setActiveLink(sectionId);
changeSection(target)
} }
) });
} });
}, options);
function changeSection(sectionName) { sections.forEach(section => {
for (const link of Object.values(navLinks)) { observer.observe(section);
});
function setActiveLink(sectionId) {
navLinks.forEach(link => {
link.classList.remove('active'); link.classList.remove('active');
if (link.getAttribute('data-link') === sectionId) {
link.classList.add('active');
} }
for (const link of Object.values(sections)) { });
link.classList.remove('active');
}
if (!sectionName.startsWith('#')) {
sectionName = '#' + sectionName;
}
const targetElement = document.querySelector(sectionName);
if (!targetElement) return;
targetElement.classList.add('active');
navLinks[targetElement.id].classList.add('active');
} }
/** Shuffle data-info elements */ /** Shuffle data-info elements */
function shuffleArray(array) { function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) { for (let i = array.length - 1; i > 0; i--) {
main.css
+19 -11
View File
@@ -6,6 +6,7 @@
--text-color: #cccccc; --text-color: #cccccc;
--text-color-highlight: #ffffff; --text-color-highlight: #ffffff;
scroll-behavior: smooth; scroll-behavior: smooth;
overscroll-behavior-y: contain;
} }
html { html {
@@ -27,7 +28,7 @@ body {
background-color: rgba(0, 0, 0, 0.65); background-color: rgba(0, 0, 0, 0.65);
background-attachment: fixed; background-attachment: fixed;
background-position: center; background-position: center;
overflow-y: hidden; overflow-y: auto;
} }
.text-center { .text-center {
@@ -92,8 +93,8 @@ main {
padding: 0; padding: 0;
margin-left: 2rem; margin-left: 2rem;
width: 100%; width: 100%;
scroll-snap-type: block; overscroll-behavior-y: contain;
scroll-snap-align: start; scroll-snap-type: y proximity;
} }
section { section {
@@ -102,13 +103,15 @@ section {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow-y: auto; overflow-y: auto;
overscroll-behavior: contain;
scroll-snap-align: start;
} }
article { article {
width: 100%; width: 100%;
} }
#hero { #about {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -120,20 +123,18 @@ article {
flex-direction: column; flex-direction: column;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
background-color: rgba(0,0,0, 0.9); background-color: rgba(0,0,0, 0.85);
background-blend-mode: darken; background-blend-mode: darken;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
background-image: url("/img/bg-projects.jpg"); background-image: url("/img/bg-projects.jpg");
transition: background-color 4s;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
overflow-y: auto; height: auto;
overflow-y: overlay;
} }
#projects.active { #projects.active {
background-color: rgba(0,0,0, 0.85);
} }
#projects .links { #projects .links {
@@ -155,6 +156,11 @@ article {
cursor: pointer; cursor: pointer;
} }
#projects .links a button:hover {
background-color: rgba(255,255,255, 0.15);
transition: background-color 0.2s;
}
#projects .links a button img { #projects .links a button img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -187,7 +193,7 @@ article {
border-color: var(--text-color-highlight); border-color: var(--text-color-highlight);
} }
#hero article { #about article {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -195,7 +201,7 @@ article {
gap: 1.5rem; gap: 1.5rem;
} }
#hero h1 { #about h1 {
color: var(--text-color-highlight); color: var(--text-color-highlight);
} }
@@ -208,6 +214,8 @@ article {
#projects .project-scroller { #projects .project-scroller {
height: 100%; height: 100%;
max-width: 100vw; max-width: 100vw;
scroll-snap-type: y mandatory;
scroll-snap-align: start;
} }
#projects .project-scroller article { #projects .project-scroller article {