Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

check in view

Browse source
This commit is contained in:
Shing Hung 2025-01-06 16:38:22 -08:00
parent 9b9488584f
commit d4be91b2e2
2 changed files with 24 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/core/InView.astro Normal file
View file

@ -0,0 +1,16 @@
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
console.log("Added 'in-view' class to:", entry.target);
} else {
entry.target.classList.remove("in-view");
console.log("Removed 'in-view' class from:", entry.target);
}
});
}, { threshold: 0.2 });
document.querySelectorAll("[data-inview]").forEach((el) => observer.observe(el));
</script>

9
src/components/main_page/Divider.astro
View file

@ -1,6 +1,11 @@
<div class="flex py-[15vh] px-[7vw] items-end w-full"> ---
import InView from "../../components/core/InView.astro"
---
<InView />
<div data-inview class="flex py-[15vh] px-[7vw] items-end w-full">
<div class="w-3/5"> <div class="w-3/5">
<p class="text-ieee-yellow text-[4.5vw] font-semibold"> <p class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-flip-down">
02 02
</p> </p>
<p class="text-white text-[2.5vw] font-light"> <p class="text-white text-[2.5vw] font-light">