pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

feat(list): add header text swap effect

Browse source
This commit is contained in:
Kim, Jimin 2025-03-22 22:06:34 +09:00
parent a5fce32e78
commit 7ef199ec0e
Signed by: pomp
GPG key ID: D3932F82A0667A3B
2 changed files with 34 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

33
apps/list/components/Header.vue
View file

@ -24,14 +24,19 @@ const props = defineProps<{
class="mb-12 text-center text-4xl leading-[3rem] text-slate-800 dark:text-slate-200"
>
<span class="font-semibold">pomp</span>'s<br />
biased & opinionated
<br />
list of
<span
class="highlight whitespace-nowrap px-1 font-extrabold text-light-text-default dark:text-dark-text-default"
biased & opinionated list of
<div
class="flex h-12 w-full flex-col items-center gap-8 overflow-hidden"
>
{{ props.highlight }}
<TransitionGroup name="slide-up">
<span
class="highlight font-extrabold text-light-text-default underline decoration-blue-400/75 decoration-[12px] underline-offset-[-6px] dark:text-dark-text-default dark:decoration-blue-600/75"
:key="highlight"
>
&nbsp;{{ highlight }}&nbsp;
</span>
</TransitionGroup>
</div>
</h1>
</div>
</div>
@ -39,7 +44,6 @@ const props = defineProps<{
<style scoped>
.highlight {
@apply underline decoration-blue-400/75 decoration-[12px] underline-offset-[-6px] dark:decoration-blue-600/75;
text-decoration-skip-ink: none;
}
@ -51,4 +55,19 @@ const props = defineProps<{
.slant-shadow {
filter: drop-shadow(0px 0px 20px #ccc);
}
.slide-up-enter-active,
.slide-up-leave-active {
transition: all 0.2s ease-out;
}
.slide-up-enter-from {
opacity: 0;
transform: translateY(30px);
}
.slide-up-leave-to {
opacity: 0;
transform: translateY(-30px);
}
</style>

9
apps/list/pages/index.vue
View file

@ -7,12 +7,15 @@ type Item = {
const items: Item[] = [
{
name: "Content Creators",
name: "Content creators",
href: "/content-creators",
thumbnail: "content-creators",
},
]
const highlight = ref("anything")
// https://www.lichter.io/articles/nuxt3-vue3-dynamic-images/
const glob = import.meta.glob("~/assets/thumbnail/*", { eager: true })
const thumbnails = Object.fromEntries(
Object.entries(glob).map(([key, value]) => [
@ -23,12 +26,14 @@ const thumbnails = Object.fromEntries(
</script>
<template>
<Header highlight="anything" />
<Header :highlight="highlight" />
<Main>
<div class="flex gap-6">
<Card
v-for="(item, _index) in items"
@mouseenter="highlight = item.name"
@mouseleave="highlight = 'anything'"
:key="item.href"
:href="item.href"
:name="item.name"