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>

11
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">
@ -12,4 +17,4 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
</p> </p>
</div> </div >