Idenya di sini adalah untuk membuat tampilan slideshow tanpa carousel. Dengan kata lain, kami membuat serangkaian gambar, geser dari kiri ke kanan dan diulangi setelah akhir gambar tercapai. Triknya adalah kita menggunakan satu gambar latar belakang dengan animasi CSS untuk (…)
Idenya di sini adalah untuk membuat tampilan slideshow tanpa carousel. Dengan kata lain, kami membuat serangkaian gambar, geser dari kiri ke kanan dan diulangi setelah akhir gambar tercapai.
Triknya adalah kita menggunakan satu gambar latar belakang dengan animasi CSS untuk memindahkannya melintasi layar dan mengulanginya setelah selesai. Ini menciptakan ilusi galeri gambar ketika kita benar-benar menggunakan satu gambar.
Menyiapkan HTML
Berikut adalah cetak biru bagaimana HTML kita perlu disusun:
Ada dua elemen yang kami kerjakan: satu yang kami panggil .containeryang pas dengan lebar viewport yang tepat dan satu lagi yang kami panggil .sliding-backgroundyang berada di belakang .containerdan meluapinya. Intinya, kami menggunakan .containersebagai masker untuk menyembunyikan lebar penuh .sliding-backgroundsaat bergulir melintasi layar.
Itu artinya kita hanya perlu membuat dua elemen di markup HTML:
Memposisikan Elemen
Mari lanjutkan dan tambahkan beberapa CSS yang akan memposisikan kedua elemen kita dengan benar.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Kami .containermenggunakan overflowproperti yang akan menyembunyikan apa pun yang secara visual terkandung di luarnya. Anggap saja seperti potongan pada foto. Mungkin ada barang ekstra di luar wadah, tetapi wadah mencegah kita untuk melihatnya.
Di situlah kami .sliding-backgroundberperan. Ini disetel ke beberapa lebar konyol yang akan meluap sebagian besar area pandang. Dan itulah triknya: itu harus menjadi sesuatu yang akan meluap dari wadah. Dalam kasus ini, kami menggunakan 5076pxlebar yang dipilih secara sewenang-wenang yang seharusnya memenuhi sebagian besar area pandang browser.
Membuat Gambar Latar Belakang
Kami membutuhkan gambar jika kami sedang membuat ilusi galeri slideshow, bukan? Itulah urutan bisnis kita selanjutnya.
Ingat bagaimana kami menyebutkan bahwa 5076pxlebar yang dipilih secara sewenang-wenang untuk latar belakang geser? Yah, ini sewenang-wenang, tetapi disengaja dalam arti dapat dibagi 3 dengan baik, yang cocok dengan pengaturan waktu untuk putaran satu menit, yang akan muncul sedikit kemudian. Artinya kanvas untuk gambar latar kita adalah 5076 / 3atau 1692px. Pada akhirnya, latar belakang kita akan berulang sebanyak tiga kali dalam satu menit dalam putaran tak terbatas. Matematika untuk kemenangan!
The 500pxtinggi benar-benar sewenang-wenang. Itu bisa apa saja yang Anda inginkan dan selama itu juga ukuran sebenarnya dari file gambar latar belakang.
File Photoshop yang digunakan untuk membuat gambar latar untuk demo di awal bab ini tersedia untuk diunduh jika Anda mencari titik awal.
Setelah gambar disimpan (dan dioptimalkan!), Inilah yang akan kita gunakan sebagai gambar latar belakang di CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Bagus! Itu memberi kita gambar yang sangat besar yang meluap dari penampung dan sekarang dapat digunakan untuk menggulir layar tanpa batas.
Menganimasikan Latar Belakang
Baiklah, mari kita lakukan ini. Kami ingin itu bergerak dari kiri ke kanan dalam satu lingkaran yang berulang-ulang untuk menciptakan efek mulus yang gambarnya berlangsung selamanya.
Pertama, mari tentukan animasi CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Kami menggunakan transformproperti untuk memposisikan gambar kiri di tepi kiri wadah saat animasi dimulai, seperti:
Pada saat animasi selesai, itu akan mengubah posisi secara negatif (dari kiri ke kanan) dengan jumlah yang sesuai dengan lebar gambar kita. Dan, karena .sliding-backgroundlebarnya tiga kali lipat dari gambar sebenarnya, gambar diulang tiga kali antara 0% dan 100% sebelum mengulang lagi.
Catatan: alasan kami menggunakan tambahan
background-positiondi utama transformuntuk melakukan gerakan, yang jauh lebih performanya.
Oke, mari kita selesaikan dengan memanggil slideanimasi kita di .sliding-backgroundkelas:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )The animationproperti menginstruksikan .sliding-backgrounduntuk menggunakan slideanimasi dan untuk menjalankannya selama satu menit pada suatu waktu secara linear, loop tak terbatas.
Menyatukan Semuanya
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )