Merge pull request 'andy/reduce-flicker' (#25) from andy/reduce-flicker into main
Reviewed-on: Webmaster/dev-ieeeucsd-org#25 Reviewed-by: Shing Hung <shing.hung@ieeeucsd.org>
This commit is contained in:
commit
196d61190d
3 changed files with 5 additions and 2 deletions
|
@ -41,7 +41,7 @@ const { name, position, picture, email } = Astro.props;
|
||||||
>
|
>
|
||||||
<p
|
<p
|
||||||
data-inview
|
data-inview
|
||||||
class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]"
|
class="opacity-0 in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]"
|
||||||
>
|
>
|
||||||
{name}
|
{name}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -14,7 +14,8 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
|
||||||
<Image
|
<Image
|
||||||
src={qp}
|
src={qp}
|
||||||
alt="qp showcase photo"
|
alt="qp showcase photo"
|
||||||
class="md:w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full"
|
class="md:opacity-0 w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full relative in-view:animate-fade-down"
|
||||||
|
data-inview
|
||||||
/>
|
/>
|
||||||
<Link
|
<Link
|
||||||
data-inview
|
data-inview
|
||||||
|
|
Loading…
Reference in a new issue