10 Contoh Dramatis Splash Screen dalam Desain Web

Ingin membuat pintu masuk yang dramatis? Ingin menghangatkan pengunjung sebelum memukau mereka dengan animasi menakjubkan Anda, eksperimen dengan perpustakaan kelas atas, atau sekadar desain yang cerdik? Maka Anda mungkin harus mengarahkan mata Anda pada layar splash.

Berasal dari dunia perangkat lunak desktop, ia telah berhasil mengakar dalam desain web. Ini cepat, cepat, ringan, relatif sederhana dan kuat. Kami selalu berbicara tentang bagaimana beberapa detik pertama dapat membuat dunia berbeda. Semuanya harus sempurna dari awal. Dan layar splash adalah salah satu komponen aplikasi web yang terkait langsung dengan keberhasilan misi ini.

Mayoritas di luar sana berpikir bahwa area pahlawan berdiri di belakang penciptaan kesan pertama yang berharga ini. Namun, ada seniman kode yang teliti dan rajin yang suka menghiasi huruf i dan melewati huruf t, percaya bahwa setiap detik berarti. Nah, begitulah adanya.

Semakin awal Anda mulai memanjakan audiens online Anda, semakin baik kesan pertama yang akan Anda buat. Itu sebabnya kami menyaksikan berbagai solusi orisinal di arena ini. Sebenarnya dan faktual mereka membuka percakapan antara website dan penonton. Dan jika Anda berpikir bahwa loader tidak memiliki kapasitas untuk memamerkan kreativitas Anda, maka layar splash pasti memiliki beberapa potensi.

Memanfaatkan Layar Penuh

Dengan animasi splash, seluruh layar siap melayani Anda, bukan hanya elemen kecil. Mereka seperti urutan kredit pembukaan film yang menjanjikan penonton sesuatu yang luar biasa, sehingga memicu minat.

SmokeT oleh Tedd Arcuri

Three.js bukanlah pendamping yang baik untuk membuat intro yang cepat dan ringan, namun dalam kasus Tedd Arcuri itu pasti berhasil. Di sini efek asap yang sangat realistis yang direproduksi dengan terampil digunakan untuk menyempurnakan tampilan huruf "T." Yang terakhir ini murni simbolis di sini karena dapat dengan mudah diubah menjadi logotype, maskot atau judul.

.

Halaman pembuka oleh Timothy Giblin

Sebagian besar layar splash berjalan seiring dengan identitas merek. Misalnya, halaman Splash oleh Timothy Giblin. Ini adalah layar splash klasik 100% yang menampilkan identitas merek yang diperkaya dengan pemikiran kreatif seorang seniman. Penulis menunjukkan kepada kita bagaimana mematuhi mean emas. Konsepnya orisinal dan sekaligus sederhana. Ini hanya mengungkap logotype, namun pengungkapan ini menarik perhatian.

Animasi Layar Percikan oleh Hitesh Sahu

Contoh ini kurang mengesankan daripada solusi oleh Timothy Giblin, namun lebih praktis dan dapat dilihat di mana-mana akhir-akhir ini. Intinya, hanya lazy loading yang dibawa ke level selanjutnya. Ini mengungkapkan elemen beranda satu per satu dengan lucu dan kreatif, membuat segalanya jauh lebih menarik.

Ada beberapa cuplikan kode yang lebih menarik. Mari jelajahi koleksi bersama dan temukan yang paling cocok untuk proyek Anda berikutnya.

Solusi Klasik

Ingin menggunakan pendekatan yang lebih teruji untuk layar splash Anda? Contoh di bawah ini akan membantu Anda sampai di sana.

Layar Splash oleh Adam Blum

Efek geser tradisional berdiri di belakang keindahan solusi Adam Blum. Ini mencakup latar belakang yang bersih dan murni dan beberapa frasa kunci yang muncul satu demi satu. Ini mengambil keuntungan dari kekuatan antisipasi: Cara primitif, namun layak untuk menghidupkan minat pengguna.

Mainkan oleh Nirajan

Untuk membuat solusi sebelumnya sedikit lebih menarik, Anda dapat menambahkan manipulasi dengan latar belakang seperti yang dilakukan Niranjan di pena ini. Proyeknya, Play On, menampilkan transisi geser yang indah antara layar overlay semi-transparan yang diterapkan pada latar belakang gambar. Bagus dan lucu.

Percikan Saya oleh Williams

My Splash oleh Williams adalah contoh representatif lain dari layar splash klasik. Konsep ini memiliki dua tahap. Pada awalnya, animasi mengungkapkan tanda tangan penulis dengan kecepatan sedang dan nyaman. Setelah itu, layar hitam muncul. Ini adalah solusi elegan, ramping dan bisnis yang sesuai dengan banyak proyek.

Layar Splash Animasi oleh Dmytro Lvivsky

Layar Splash Animasi oleh Dmytro Lvivsky adalah titik awal yang sempurna untuk membuat solusi Anda sendiri. Animasi yang didukung JavaScript memiliki beberapa layar dan transisi tradisional di antara masing-masing layar. Yang terakhir didasarkan pada efek di mana lingkaran memimpin permainan.

Lihat Layar Splash Animasi Pena oleh Dmytro Lvivsky (@UnforbiddenYet) di CodePen.

Memudar CSS3 Sederhana oleh Giles Papworth

Berikut adalah solusi yang sangat disederhanakan. Rutinitasnya terletak pada menampilkan blok teks satu per satu, disertai dengan efek fading yang dihormati waktu. Namun, ia melakukan semua yang seharusnya. Dan, yang terpenting, ia melakukannya tanpa "memakan" sumber daya berharga Anda karena hanya menggunakan CSS3. Ini sederhana, elegan, sederhana dan ringan.

Pengatur suasana hati

Contoh berikut menunjukkan bahwa layar splash juga dapat digunakan untuk mengatur nada situs web sejak awal.

Animasi pemuatan konsol oleh Andrew Tunnecliffe

Misalnya, jika Anda seorang pembuat kode, maka animasi pemuatan konsol oleh Andrew Tunnecliffe akan menciptakan suasana yang tepat. Ini kuno, sangat sederhana dan sangat cocok dengan portofolio pribadi apa pun untuk pengembang.

Falling Numbers oleh Thibault Jan Beyer

Jika Anda memiliki proyek berbasis statistik atau berbasis data, Falling Numbers oleh Thibault Jan Beyer adalah awal yang baik untuk pengalaman mendongeng Anda. Animasi dibuka dengan angka jatuh yang akhirnya menyentuh tanah dan membuka layar utama. Ini memiliki pesona geometris yang diperkaya dengan beberapa bumbu digital.

Terakhir tapi bukan yang akhir

Bagi banyak orang, Stan Lee akan selalu menjadi "saudara kutu buku Bruce Lee". Bagi kami, dia adalah ikon yang berdiri di belakang alam semesta di mana kebaikan menang atas kejahatan, dan yang akan ada di hati kita selamanya.

Layar Splash Marvel oleh Matt Feinstein

Marvel Splash Screen oleh Matt Feinstein sebenarnya bukanlah sebuah penghargaan, tetapi semua penggemar superhero akan menikmatinya. Judul berbicara untuk dirinya sendiri. Animasi percikannya memiliki getaran buku komik yang luar biasa. Ini adalah replika dari urutan pembuka untuk film Marvel yang terlihat luar biasa.

Cara Membuat Splash

Splash screen dapat digunakan sebagai alternatif untuk loader – kecuali tentu saja berat. Sayangnya, masih ada orang yang menganggapnya terlalu serius dan mencoba mengubahnya menjadi bagian drama yang penuh aksi.

Layar pembuka dalam desain web efektif selama cepat, pendek, ringan, dan langsung ke intinya. Tentu saja, mereka memberi Anda seluruh layar untuk menunjukkan kejeniusan Anda. Namun, Anda harus tetap berpegang pada misi aslinya. Mereka adalah percikan yang seharusnya membangkitkan minat dan segera memberikan tongkat estafet ke solusi yang lebih menarik.