Cara Membuat Efek Lampu Senter (Searchlight) pada Form Login dengan CSS

Pernahkah kamu ingin membuat halaman login yang membosankan menjadi lebih interaktif? Salah satu tren desain yang unik adalah efek "Searchlight". Dalam tutorial ini, kita akan mempelajari cara membuat efek lampu senter yang mengikuti kursor atau bereaksi saat sakelar dinyalakan, seperti yang terlihat dalam video viral "Login Gone Wild".

Cara Kerja Efek Ini

1. clip-path: polygon(...): Fungsi ini memotong elemen .light menjadi bentuk tertentu. Dalam video, bentuknya lebar di bawah dan menyempit di atas, meniru pancaran lampu senter.

2. pointer-events: none: Tanpa baris ini, kamu tidak akan bisa mengetik di dalam kotak email atau password karena terhalang oleh lapisan "cahaya". Properti ini membuat klik "menembus" lapisan tersebut.

3. Interaktivitas: Untuk membuat lampu menyala seperti di video, kamu bisa menambahkan class .active melalui JavaScript saat sakelar (toggle) ditekan, yang mengubah properti top dari -200% menjadi 0.

Berikut kode CSS

.light {
position: absolute;
top: -200%; /* Posisi awal di luar layar */
left: 0;
width: 100%;
height: 100%;

/* Membuat efek gradasi cahaya transparan */
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.3) -50%,
rgba(255, 255, 255, 0) 90%
);

/* Membentuk cahaya seperti kerucut/trapezium */
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);

/* Penting: Agar user tetap bisa klik input di bawah lapisan cahaya */
pointer-events: none;

/* Memberikan efek gerakan yang halus */
transition: .5s ease;
}

LINK SOURCE CODE

Silahkan download source codenya gratis dan untuk hasil tampilanya silahkan lihat pada video TikTok dibawah ini.

GET CODE    WATCH HERE.!

Dokumentasi Singkat

• Variabel Warna: Kamu bisa mengganti rgba(255, 255, 255, 0.3) menjadi warna lain (seperti kuning muda) untuk efek lampu bohlam klasik.

• Kecepatan Transisi: Sesuaikan transition: .5s jika ingin gerakan lampu terasa lebih berat atau lebih cepat.

Catatan: Pastikan elemen pembungkus (.login-container) memiliki position: relative dan overflow: hidden agar cahaya tidak keluar dari batas box login.

 Untuk Mendapatkan Info Terbaru, Silahkan Bergabung Di Saluran Kami Dibawah ini: