Project Saya

Susun 3 layer gambar di HTML

Bungkus semua dalam satu .card. Di dalamnya ada 3 layer yang ditumpuk: .wrapper (gambar cover/background), .logo, dan .character (gambar karakter yang nanti "melompat keluar").

<div class="card">
  <div class="wrapper">
    <img class="cover-image" />
  </div>
  <img class="logo" />
  <img class="character" />
</div>

Kasih "kedalaman" pakai perspective

Properti perspective diberikan ke .card (parent). Ini yang bikin browser tahu seberapa jauh "mata" kita dari elemen, jadi transform 3D di langkah berikutnya kelihatan nyata, bukan cuma gepeng.

.card{
  perspective: 2500px;
  position: relative;
}

Tumpuk tiap layer dengan position absolute

Semua layer (.wrapper, .logo, .character) dibuat position: absolute dengan z-index berbeda, supaya saling bertumpuk pas dalam satu kotak .card.

Animasikan tiap layer saat :hover

Ini bagian intinya. Saat .card:hover, tiap layer digeser pakai translate3d() dan rotateX() dengan jarak Z yang berbeda — layer karakter ditarik paling jauh ke depan, jadi kelihatan "melompat keluar" dari kartu.

.card:hover .character{
  opacity: 1;
  transform: translate3d(5%, -20%, 670px);
}
.card:hover .wrapper{
  transform: perspective(900px) rotateX(25deg);
}

Tambah vignette & transisi halus

Pseudo-element ::before dan ::after di .wrapper dipakai buat gradient gelap di atas-bawah gambar (vignette), biar lebih dramatis. Terakhir, kasih transition: all 0.5s di setiap layer supaya pergerakannya smooth, bukan langsung "lompat".

Buat background blob warna-warni

Efek glass butuh latar warna supaya refraksi-nya kelihatan. Buat 3 elemen bulat dengan filter: blur(90px) dan animasi float yang bergerak perlahan. Tanpa background berwarna, kaca kelihatan flat.

.blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: float 20s infinite alternate;
}
@keyframes float{
  0%{transform: translate(0,0) scale(1);}
  100%{transform: translate(0,-10%) scale(1.1);}
}

Bangun efek kaca dengan backdrop-filter

Ini inti dari liquid glass: backdrop-filter: blur(50px) saturate(200%) membuat konten di belakang nav terdistorsi. Lapis dengan box-shadow inset berlapis-lapis untuk efek ketebalan & pantulan cahaya.

.liquid-nav{
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(50px) saturate(200%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.8),
    inset 0 -2px 4px rgba(255,255,255,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.4);
}

Tambah pantulan "basah" di atas

Pseudo-element ::before dengan gradient putih dari atas memberi kesan permukaan basah & cembung, persis seperti efek Aqua-glass di produk Apple.

.liquid-nav::before{
  content: '';
  position: absolute;
  top: 1px; left: 1px; right: 1px;
  height: 46%;
  border-radius: 99px 99px 24px 24px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.6) 0%,
    transparent 100%);
}

Sliding pill dengan animasi bouncy

Satu elemen .active-pill digeser pakai JavaScript dengan transform: translateX() dan width. Kuncinya ada di cubic-bezier(0.34, 1.2, 0.64, 1) — angka lebih dari 1 bikin efek overshoot/bounce ala Apple.

activePill.style.width = `${btn.offsetWidth}px`;
activePill.style.transform =
  `translateX(${btn.offsetLeft}px)`;
/* transition cubic-bezier(0.34, 1.2, 0.64, 1) */

Cahaya interaktif ikut kursor

Event mousemove membaca posisi kursor relatif terhadap nav, lalu mengupdate CSS custom property --x dan --y. Radial gradient di .liquid-glare otomatis mengikuti posisi tersebut.

nav.addEventListener("mousemove", e => {
  const rect = nav.getBoundingClientRect();
  glare.style.setProperty("--x",
    `${e.clientX - rect.left}px`);
  glare.style.setProperty("--y",
    `${e.clientY - rect.top}px`);
});