Sebuah layout responsif sederhana dengan beberapa fancy transisi. Idenya adalah untuk melihat empat item dan memperluasnya dengan beberapa transisi halaman tambahan yang ditambahkan pada "inner items".Hari ini saya ingin berbagi layout responsif eksperimental dengan anda. Awalnya, layout terlihat empat item yang fleksibel. Ketika mengklik salah satu item, akan memperluas item tersebut untuk melihat dalam mode fullscreen dan yang lain akan kita buat dengan
Scale Down dan
Fade Out. Ketika menutup tampilan saat ini / current, maka akan bergerak kembali ke posisi semula sedangkan item lainnya kembali lagi ke tempat semula. Tipe lain dari halaman transisi dapat dilihat pada template - template portofolio dengan menggeser panel dari bawah
Semua efek dilakukan dengan transisi CSS dan dikontrol dengan menerapkan JavaScript. Seluruh layout fleksibel dan beberapa media queries ditambahkan ke ukuran responsive, hal-hal untuk layar yang lebih kecil.
Ilustrasi indah yang digunakan dalam demo adalah hasil dari
Isaac Montemayor .
Mari kita lihat beberapa screenshot:
Layar awal memiliki empat kotak yang fleksibel. Mengubah ukuran jendela browser untuk melihatnya bertransisi dengan mulus.
Ketika mengklik item, item tersebut akan tampil dalam mode fullscreen.
Melihat item yang diperluas. Sebuah konten yang relevan dan kita akan menambahkan scroll jika diperlukan.
Pada bagian ini, kita menambahkan Thumbnail Grid yang akan menampilkan rincian setelah kita klik pada item. Halaman transisi di sini adalah item baru bergeser dari bawah dan item sebelumnya bergeser ke belakang.
Navigasi melalui item memiliki halaman transisi yang sama. Ketika kita menutup tampilan item, item tersebut akan bertransisi kembali turun dan skala tampilan akan kembali lagi.
Saya harap Anda menyukai eksperimen kecil ini dan dapat membantu Anda menemukan inspirasi!