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

fixed in-view

Browse source
This commit is contained in:
chark1es 2025-01-06 17:56:17 -08:00
parent d4be91b2e2
commit ae9691c78a
3 changed files with 40 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/core/InView.astro
View file

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

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

@ -1,20 +1,22 @@
--- ---
import InView from "../../components/core/InView.astro" import InView from "../../components/core/InView.astro";
--- ---
<InView />
<InView />
<!-- This is the parent div -->
<div data-inview class="flex py-[15vh] px-[7vw] items-end w-full"> <div data-inview class="flex py-[15vh] px-[7vw] items-end w-full">
<div class="w-3/5"> <!-- Notice that the data-inview can play as long as the in-view class is present -->
<p class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-flip-down"> <div data-inview class="w-3/5 in-view:animate-flip-down">
<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">Amet Consectetur</p>
Amet Consectetur
</p>
</div> </div>
<p class="text-white text-[1.5vw]"> <!-- Even if the data-inview is in the parent div, this animation will not play -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <p class="text-white text-[1.5vw] in-view:animate-flip-down`">
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim
</p> </p>
</div> </div>

8
tailwind.config.mjs
View file

@ -24,5 +24,11 @@ export default {
}, },
}, },
}, },
plugins: [require("tailwindcss-motion"), require("tailwindcss-animated")], plugins: [
require("tailwindcss-motion"),
require("tailwindcss-animated"),
function ({ addVariant }) {
addVariant("in-view", "&.in-view");
},
],
}; };