Tampilan Slide Mengungkapkan
Tampilan slide gambar sederhana dengan efek pengungkapan gerak saat menavigasi antara slide dan tampilan detail layar penuh.
Dari sponsor bulanan kami: HelloSign API: Semua yang diinginkan dan disukai pengembang. Coba gratis hari ini.
Hari ini kami ingin membagikan tayangan slide lain dengan Anda. Idenya adalah untuk memiliki sedikit lebih banyak gerakan saat menavigasi antara slide dan menunjukkan bagian pratinjau lainnya dengan gambar layar penuh. Inspirasi untuk efek ini berasal dari desain indah Louis Ansa, "Paradis - Reprise" . Animasi ini didukung oleh TweenMax .
Demo ini disponsori oleh monday.com: Alat manajemen proyek visual untuk desainer . Jika Anda ingin mensponsori salah satu demo kami, cari tahu lebih lanjut di sini .
Perhatian: Perhatikan bahwa kami menggunakan properti CSS modern yang mungkin tidak didukung di browser lama.
Tampilan slide menunjukkan gambar berukuran sedang di tengah halaman. Judul juga ditempatkan secara jelas di tengah:
Saat bernavigasi ke slide berikutnya, kami menutupi gambar saat ini dengan elemen terbuka dengan warna yang sama seperti latar belakang halaman. Gambar berikutnya, yang awalnya tertutup, akan terungkap. Kami menambahkan beberapa terjemahan ke elemen untuk membuat gerakan melenting.
Ketika panah rincian diklik di bawah gambar, kami menggeser gambar layar penuh masing-masing dengan kontennya dengan cara terbuka yang sama.
Kami harap Anda menyukai tayangan slide kecil ini dan bermanfaat!
Referensi dan Kredit
- Gambar dari Unsplash.com
- TweenMax oleh Greensock
- imagesLoaded oleh Dave DeSandro
0 komentar:
Posting Komentar