Skip to content

Commit

Permalink
feat: added animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChanatpakornS
ChanatpakornS committed Jan 2, 2024
1 parent 2713a81 commit 141b42c
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 46 deletions.
Binary file added src/assets/navbar/rightArrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 50 additions & 45 deletions src/components/Navbar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,83 +8,88 @@
const SGCU = "src/assets/navbar/logo-sgcu.svg"
let MENU_HAMBURGER = "src/assets/navbar/menu-idle.svg"
let MENU_CLOSE = "src/assets/navbar/menu-close.svg"
function toggle(variable: boolean) {
variable = !variable;
}
let MENU_CLOSE = "src/assets/navbar/menu-close.svg"
let RIGHT_ARROW = "src/assets/navbar/rightArrow.png"
</script>

<nav class="fixed bg-gray-900 px-10 w-full text-white font-['Space Grotesk']">
<nav id="nav" class="fixed bg-stone-950 px-4 lg:px-10 w-full text-white ">
<div class="flex bg-blue justify-between py-4">
<img src={SGCU} alt="pic" class="h-24">
<img src={SGCU} alt="pic" class="h-8 lg:h-24">
<div class="flex flex-row items-center">
<p class="mr-6 text-base font-light ">Menu</p>
<button on:click={() => toggle(open)}>
<p class="mr-2 lg:mr-6 text-base font-light font-['Space Grotesk']" >Menu</p>
<button on:click={() => {open = !open;}}>
{#if open}
<img src={MENU_CLOSE} alt="pic" class="h-12" />
<img src={MENU_CLOSE} alt="pic" class="h-8 lg:h-12" />
{:else}
<img src={MENU_HAMBURGER} alt="pic" class="h-12"/>
<img src={MENU_HAMBURGER} alt="pic" class="h-8 lg:h-12"/>
{/if}
</button>
</div>
</div>

{#if open}
<div class={"gap-10 flex flex-col h-screen text-9xl align-middle mt-12 animate-sliding-left"}>
<!-- svelte-ignore a11y-interactive-supports-focus -->
<div class={"mt-3 align-middle relative gap-10 flex flex-col min-h-screen px-4 text-4xl justify-start font-['JetBrains Mono'] font-light lg:mt-12 lg:text-9xl animate-sliding-left"}>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="flex hover:ml-16"
role = "button"
class="cursor-pointer hover:ml-6 duration-700 "
on:mouseenter={() => {hoverHome = true;}}
on:mouseleave={() => {hoverHome = false;}}
>
<p class={hoverHome ? "block" : "hidden"} >-</p>
<p class={ (hoverHome) ? "-scale-x-100 " : ""}>H</p>
<p class={ (hoverHome) ? "-scale-x-100 " : ""}>O</p>
<p class={ (hoverHome) ? "-scale-x-100 " : ""}>M</p>
<p class={ (hoverHome) ? "-scale-x-100 " : ""}>E</p>
>
<a href="/home" class="flex">
<img src={RIGHT_ARROW} alt="" class={hoverHome ? "block" : "hidden"}>
<p class={ (hoverHome) ? "-scale-x-100 duration-700" : ""}>H</p>
<p class={ (hoverHome) ? "-scale-x-100 duration-700" : ""}>O</p>
<p class={ (hoverHome) ? "-scale-x-100 duration-700" : ""}>M</p>
<p class={ (hoverHome) ? "-scale-x-100 duration-700" : ""}>E</p>
</a>

</div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="flex hover:ml-16"
class="flex cursor-pointer hover:ml-6 duration-700"
on:mouseenter={() => {hoverProduct = true;}}
on:mouseleave={() => {hoverProduct = false;}}
>
<p class={hoverProduct ? "block" : "hidden"} >-</p>
<p class={ (hoverProduct) ? "-scale-x-100 " : ""}>P</p>
<p class={ (hoverProduct) ? "-scale-x-100 " : ""}>R</p>
<p class={ (hoverProduct) ? "-scale-x-100 " : ""}>O</p>
<p class={ (hoverProduct) ? "-scale-x-100 " : ""}>D</p>
<p class={ (hoverProduct) ? "-scale-x-100 " : ""}>U</p>
<p class={ (hoverProduct) ? "-scale-x-100 " : ""}>C</p>
<p class={ (hoverProduct) ? "-scale-x-100 " : ""}>T</p>
<a href="/project" class="flex">
<img src={RIGHT_ARROW} alt="" class={hoverProduct ? "block" : "hidden"}>
<p class={ (hoverProduct) ? "-scale-x-100 duration-700" : ""}>P</p>
<p class={ (hoverProduct) ? "-scale-x-100 duration-700" : ""}>R</p>
<p class={ (hoverProduct) ? "-scale-x-100 duration-700" : ""}>O</p>
<p class={ (hoverProduct) ? "-scale-x-100 duration-700" : ""}>J</p>
<p class={ (hoverProduct) ? "-scale-x-100 duration-700" : ""}>E</p>
<p class={ (hoverProduct) ? "-scale-x-100 duration-700" : ""}>C</p>
<p class={ (hoverProduct) ? "-scale-x-100 duration-700" : ""}>T</p>
</a>
</div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="flex hover:ml-16"
<div class="flex cursor-pointer hover:ml-6 duration-700"
on:mouseenter={() => {hoverJoin = true;}}
on:mouseleave={() => {hoverJoin = false;}}
>
<p class={hoverJoin ? "block" : "hidden"} >-</p>
<p class={ (hoverJoin) ? "-scale-x-100":""}>J</p>
<p class={ (hoverJoin) ? "-scale-x-100":""}>O</p>
<p class={ (hoverJoin) ? "-scale-x-100":""}>I</p>
<p class={ (hoverJoin) ? "-scale-x-100":""}>N</p>
<a href="/join" class="flex">
<img src={RIGHT_ARROW} alt="" class={hoverJoin ? "block" : "hidden"}>
<p class={ (hoverJoin) ? "-scale-x-100 duration-700":""}>J</p>
<p class={ (hoverJoin) ? "-scale-x-100 duration-700":""}>O</p>
<p class={ (hoverJoin) ? "-scale-x-100 duration-700":""}>I</p>
<p class={ (hoverJoin) ? "-scale-x-100 duration-700":""}>N</p>
</a>
</div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="flex hover:ml-16"
<div class="flex cursor-pointer hover:ml-6 duration-700"
on:mouseenter={() => {hoverContact = true;}}
on:mouseleave={() => {hoverContact = false;}}
>
<p class={hoverContact ? "block" : "hidden"} >-</p>
<p class={ (hoverContact) ? "-scale-x-100 " : ""}>C</p>
<p class={ (hoverContact) ? "-scale-x-100" : ""}>O</p>
<p class={ (hoverContact) ? "-scale-x-100" : ""}>N</p>
<p class={ (hoverContact) ? "-scale-x-100" : ""}>T</p>
<p class={ (hoverContact) ? "-scale-x-100" : ""}>A</p>
<p class={ (hoverContact) ? "-scale-x-100" : ""}>C</p>
<p class={ (hoverContact) ? "-scale-x-100" : ""}>T</p>
<a href="/contact" class="flex">
<img src={RIGHT_ARROW} alt="" class={hoverContact ? "block" : "hidden"}>
<p class={ (hoverContact) ? "-scale-x-100 duration-700" : ""}>C</p>
<p class={ (hoverContact) ? "-scale-x-100 duration-700" : ""}>O</p>
<p class={ (hoverContact) ? "-scale-x-100 duration-700" : ""}>N</p>
<p class={ (hoverContact) ? "-scale-x-100 duration-700" : ""}>T</p>
<p class={ (hoverContact) ? "-scale-x-100 duration-700" : ""}>A</p>
<p class={ (hoverContact) ? "-scale-x-100 duration-700" : ""}>C</p>
<p class={ (hoverContact) ? "-scale-x-100 duration-700" : ""}>T</p>
</a>
</div>

</div>
Expand Down
25 changes: 24 additions & 1 deletion tailwind.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,30 @@
export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {},
extend: {
keyframes: {
slideLeft: {
"0%": { transform: "translateX(-100%)" },
"70%": { transform: "translateX(2%)" },
"100%": { transform: "translateX(0)" },
},
slideRight: {
"0%": { transform: "translateX(100%)" },
"70%": { transform: "translateX(-2%)" },
"100%": { transform: "translateX(0)" },
},
},
animation: {
"sliding-left": "slideLeft 1.5s",
"sliding-right": "slideRight 1.5s",
},
},
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
},
},
plugins: [],
};

0 comments on commit 141b42c

Please sign in to comment.