Blur Background Menu
#model-004-blur-bg-menu
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
</head>
<style type="text/tailwindcss">
.content {
@apply max-w-xs w-full mx-auto relative min-h-120 overflow-hidden;
}
.bg {
@apply absolute top-0 left-0 w-full h-full object-cover brightness-75;
}
.title {
@apply absolute bottom-0 left-0 p-5 w-full space-y-2;
}
.top-title {
@apply text-white/70 text-sm;
}
.bottom-title {
@apply text-white/80 text-3xl;
}
.border-line {
@apply w-full h-[1px] bg-white/30;
}
.menu-content {
@apply absolute top-5 left-5 w-6 space-y-1 z-30 cursor-pointer;
}
.line {
@apply w-full bg-white h-0.5 rounded;
}
.menu {
@apply absolute top-0 left-0 w-full h-full py-12 opacity-0 pointer-events-none scale-75 z-20;
}
.ul {
@apply divide-y divide-white px-5;
}
.link {
@apply py-5 text-white block transition-all duration-300;
}
.link:hover {
@apply text-white/50;
}
.link-title {
@apply transition-all duration-500;
}
.link:hover .link-title {
@apply translate-x-5;
}
</style>
<body class="min-h-svh flex items-center justify-center w-full">
<div class="content">
<img src="https://images.unsplash.com/photo-1758411897725-0bd3f733c66d?q=80&w=688&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
class="bg" alt="">
<div class="title">
<p class="top-title">PHOTO</p>
<p class="bottom-title">SUNSET</p>
<div class="border-line"></div>
</div>
<div class="menu-content btn">
<p class="line"></p>
<p class="line"></p>
</div>
<div class="menu">
<ul class="ul">
<li>
<a href="#" class="link group">
<p class="link-title">Home</p>
</a>
</li>
<li>
<a href="#" class="link group">
<p class="link-title">About</p>
</a>
</li>
<li>
<a href="#" class="link group">
<p class="link-title">Contact</p>
</a>
</li>
</ul>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
let btn = document.querySelector('.btn');
let status = false;
btn.addEventListener('click', function () {
if (status == false) {
gsap.to('.one', { duration: 0.5, rotate: '45deg', y: '3px' });
gsap.to('.two', { duration: 0.5, rotate: '-45deg', y: '-3px' });
gsap.to('.menu', { duration: 0.5, opacity: 1, pointerEvents: 'auto', scale: 1 });
gsap.to('.bg', { duration: 0.5, filter: "blur(8px) brightness(0.75)" });
gsap.to('.title', { duration: 0.5, filter: "blur(8px) brightness(0.75)" });
} else {
gsap.to('.one', { duration: 0.5, rotate: 0, y: 0 });
gsap.to('.two', { duration: 0.5, rotate: 0, y: 0 });
gsap.to('.menu', { duration: 0.5, opacity: 0, pointerEvents: 'none', scale: 0.75 });
gsap.to('.bg', { duration: 0.5, filter: "blur(0) brightness(0.75)" });
gsap.to('.title', { duration: 0.5, filter: "blur(0) brightness(0.75)" });
}
status = !status;
});
});
</script>
</body>
</html>