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

Reduced flicker on board member page name text

Browse source 
Also added animation to QP and Event images
This commit is contained in:
Andy Smithwick 2025-01-10 20:39:21 -08:00
parent c62379a53c
commit f928c023b8
4 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/board/Officer.astro
View file

@ -21,10 +21,10 @@ const {name, position, picture, email} = Astro.props;
<FaGear/> <FaGear/>
</div> </div>
<div class = "w-full flex justify-between px-[7%]"> <div class = "w-full flex justify-between px-[7%]">
<p data-inview class = " in-view:animate-fade-right text-[2vw] font-light leading-[4.5vh]"> <p data-inview class = "opacity-0 in-view:animate-fade-right text-[2vw] font-light leading-[4.5vh]">
{name} {name}
</p> </p>
<div data-inview class = "in-view:animate-fade-up text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center"> <div data-inview class = "opacity-0 in-view:animate-fade-up text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
{position} {position}
</div> </div>
</div> </div>

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

@ -3,9 +3,11 @@
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
entry.target.classList.add("in-view"); entry.target.classList.add("in-view");
entry.target.classList.remove("opacity-0");
console.log("Added 'in-view' class to:", entry.target); console.log("Added 'in-view' class to:", entry.target);
} else { } else {
entry.target.classList.remove("in-view"); entry.target.classList.remove("in-view");
entry.target.classList.add("opacity-0");
console.log("Removed 'in-view' class from:", entry.target); console.log("Removed 'in-view' class from:", entry.target);
} }
}); });

3
src/components/events/EventTitle.astro
View file

@ -8,7 +8,8 @@ import { LiaDotCircle } from "react-icons/lia";
<Image <Image
src={eventbg} src={eventbg}
alt="Event Page Background" alt="Event Page Background"
class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover" class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover relative in-view:animate-fade-down opacity-0"
data-inview
/> />
<div <div
class="absolute -bottom-[6%] left-[20%] flex items-center text-[3vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]" class="absolute -bottom-[6%] left-[20%] flex items-center text-[3vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]"

7
src/components/projects/QP.astro
View file

@ -14,12 +14,13 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
<Image <Image
src={qp} src={qp}
alt="qp showcase photo" alt="qp showcase photo"
class="w-[70vw] aspect-[2.5/1] rounded-full" class="opacity-0 w-[70vw] aspect-[2.5/1] rounded-full relative in-view:animate-fade-down"
data-inview
/> />
<Link <Link
data-inview data-inview
href="/quarterly" href="/quarterly"
className="in-view:animate-fade-left absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md" className="opacity-0 in-view:animate-fade-left absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md"
> >
more details more details
<IoIosArrowDroprightCircle <IoIosArrowDroprightCircle
@ -27,7 +28,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
/> />
</Link> </Link>
<div <div
data-inview class="in-view:animate-fade-right w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]" data-inview class="opacity-0 in-view:animate-fade-right w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]"
> >
<p class="text-[1.4vw] mb-[2%]">Quarterly Project</p> <p class="text-[1.4vw] mb-[2%]">Quarterly Project</p>
<p> <p>