Tidak semua yang ada di website harus ditampilkan secara lugas. Terkadang, menyembunyikan suatu elemen adalah hal yang bijaksana. Kami kemudian dapat mengungkapkannya secara otomatis atau melalui interaction pengguna.
Itulah yang membuat efek pengungkapan begitu menarik. Mereka dapat memiliki tujuan ganda. Yang pertama adalah menjaga tata letak kita tetap bagus dan rapi. Yang kedua adalah menambahkan sedikit sentuhan pada pengalaman pengguna (UX).
Dan ada banyak pilihan menarik bagi desainer web. Menggunakan CSS dan JavaScript menawarkan jalan untuk menciptakan efek kelas atas. Namun, mereka tidak hanya tampak hebat. Ada cara untuk membangun fitur yang berkinerja baik dan juga dapat diakses.
Ingin menjelajahi beberapa kemungkinan? Lihat koleksi efek pengungkapan fantastis kami. Mereka menjalankan keseluruhan kasus penggunaan dan teknologi.
Pengungkapan CSS Kartu Gores oleh Nicolas Jesenberger
Efek pengungkapan ini meniru pengalaman dunia nyata – menggunakan kartu awal. Gunakan jari atau alat penunjuk Anda untuk “menggores” kertas perak. Anda akan menemukan sedikit kejutan di bawahnya. Ini cerdas dan dilaksanakan dengan baik.
Lihat Pena Kartu gosok oleh Nicolas Jesenberger
Pengungkapan Tongkat Ajaib oleh Kalis Jaringan
Berikut cuplikan yang membawa keajaiban web ke tingkat berikutnya. Gerakkan tongkat ajaib dari kiri ke kanan untuk menampilkan galeri gambar di bawahnya. Ada juga efek halus untuk gambar di sekitar. Mereka buram dan ditampilkan dengan opacity lebih rendah.
Lihat Pena Pengungkapan Ajaib oleh Kalis Jaringan
Animasi Pengungkapan Melingkar oleh Liza Shermayster
Anda tidak perlu berlebihan dengan efek pengungkapan. Presentasi sederhana ini mengungkapkan lebih banyak gambar saat diarahkan. Dan itu juga menambahkan animasi teks berkelas. Ini akan berfungsi dengan baik pada portofolio atau halaman Tentang Kami.
Lihat Pena animasi pengungkapan melingkar oleh Liza Shermayster
Animasi Pengungkapan Teks oleh Owlypixel
Bagaimana dengan efek pengungkapan yang terjadi secara otomatis? Judul animasi ini indah dan pasti menarik perhatian pengguna. Ini juga didukung oleh CSS. Itu berarti tidak ada skrip berantakan yang memperlambat waktu buka halaman Anda. JavaScript yang digunakan dalam cuplikan menyegarkan demo.
Lihat Pena Animasi Pengungkapan Teks oleh Owlypixel
Pengungkapan Transisi Tinta oleh Ryan Yu
Animasi berbasis gulir ini luar biasa. Karya seni tersebut tampak tergambar di layar Anda saat Anda menggulir. Efeknya menciptakan mood untuk meningkatkan UX. Ini adalah kasus efek khusus yang menyesuaikan konten dengan tee.
Lihat Pena Efek transisi tinta dengan sprite PNG oleh Ryan Yu (@iamryanyu)
Pengungkapan Interaction Poster Film oleh Etan
UI Kartu adalah elemen desain yang populer saat ini. Tapi hanya ada sedikit konten yang bisa mereka simpan. Cuplikan ini menawarkan solusi yang solid. Arahkan kursor ke kartu untuk menampilkan konten lebih lanjut. Tata letaknya tetap rapi sambil menambahkan sedikit interaktivitas.
Lihat Pena Interaction Poster Film oleh Etan
Efek Pengungkapan Halaman oleh Kevin Levron
Ya, Anda dapat menggunakan efek pengungkapan untuk seluruh halaman! Dan alat ini dapat membantu Anda menciptakan kesesuaian yang sempurna untuk proyek Anda. Pilih dari beberapa jenis animasi dan opsi lain untuk membuat presentasi yang indah. Ditambah lagi, bereksperimen dengannya sangatlah menyenangkan.
Lihat Pena Efek Pengungkapan Halaman (CSS/VueJS) oleh Kevin Levron
Pengungkapan Offcanvas yang Dapat Diakses oleh Vasileios Mitsaras
Elemen di luar kanvas adalah tempat yang berguna untuk menyimpan informasi tambahan. Mereka sering digunakan untuk menyembunyikan navigasi seluler sehingga pengguna dapat fokus pada konten. Demo ini menggunakan jQuery untuk menambahkan elemen yang dapat ditampilkan dalam berbagai cara.
Lihat Pena Offcanvas yang Dapat Diakses oleh Vasileios Mitsaras
Cara Mengungkap untuk Membangun UI
Efek pengungkapan dapat terjadi dalam berbagai bentuk. Mereka cocok untuk segala hal mulai dari situs web perusahaan hingga game online. Potensi mereka sangat besar dan beragam.
Namun, tetap penting untuk mempertimbangkan dampaknya terhadap pengguna. Implementasi terbaik terasa alami dan menambah UX. Oleh karena itu, sebaiknya hindari efek yang menghalangi akses konten.
Untungnya, CSS dan JavaScript memberikan banyak kelonggaran. Anda dapat menggunakan kombinasi yang paling sesuai untuk proyek Anda.
Ingin melihat lebih banyak efek pengungkapan? Lihat kami Koleksi CodePen!
Atas