Idea di sini adalah untuk membuat penampilan tayangan slaid tanpa korsel. Dengan kata lain, kami membuat satu siri gambar dari slaid dari kiri ke kanan dan ulangi setelah akhir gambar telah dicapai. Caranya ialah kita menggunakan satu gambar latar dengan animasi CSS untuk (…)
Idea di sini adalah untuk membuat penampilan tayangan slaid tanpa korsel. Dengan kata lain, kami membuat satu siri gambar dari slaid dari kiri ke kanan dan ulangi setelah akhir gambar telah dicapai.
Caranya ialah kita menggunakan satu gambar latar dengan animasi CSS untuk memindahkannya ke seluruh skrin dan mengulanginya setelah selesai. Ini menimbulkan ilusi galeri gambar ketika kita benar-benar menggunakan satu gambar.
Menyiapkan HTML
Inilah rangka tindakan bagaimana HTML kita perlu disusun:
Terdapat dua elemen yang sedang kita bekerjasama: satu yang kita panggil .containeryang sesuai dengan lebar pandangan yang tepat dan satu lagi yang kita panggil .sliding-backgroundyang terletak di belakang .containerdan melimpahnya. Pada hakikatnya, kami menggunakan .containersebagai topeng untuk menyembunyikan lebar penuh .sliding-backgroundketika menatal di seluruh skrin.
Ini bermakna kita hanya perlu membuat dua elemen dalam markup HTML:
Menempatkan Elemen
Mari maju dan tambahkan beberapa CSS yang akan meletakkan dua elemen kami dengan betul.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Kami .containermenggunakan overflowharta benda yang akan menyembunyikan apa sahaja yang terdapat secara visual di luarnya. Fikirkan seperti tanaman pada gambar. Mungkin ada barang tambahan di luar bekas, tetapi bekas itu menghalang kita untuk melihatnya.
Di situlah kami .sliding-backgroundmula bermain. Ini ditetapkan untuk beberapa lebar yang tidak masuk akal yang akan melimpah sebahagian besar pemandangan. Dan itulah muslihatnya: mestilah sesuatu yang melimpah ke dalam bekas. Dalam kes ini, kami menggunakan 5076pxlebar yang dipilih dengan sewenang-wenangnya yang harus melimpah sebahagian besar paparan penyemak imbas.
Membuat Gambar Latar Belakang
Kita memerlukan gambar jika kita membuat ilusi galeri tayangan slaid, bukan? Itulah pesanan perniagaan kami yang seterusnya.
Ingat bagaimana kita menyebutkan bahawa 5076pxlebar yang agak sewenang-wenangnya dipilih untuk latar belakang gelongsor? Nah, itu sewenang-wenang, tetapi disengaja dalam arti bahawa ia dapat dibagi dengan 3, yang sesuai dengan waktu untuk gelung selama satu minit, yang akan muncul sedikit kemudian. Itu bermaksud kanvas untuk gambar latar belakang kita adalah 5076 / 3atau 1692px. Pada akhirnya, latar belakang kita akan mengulang sebanyak tiga kali dalam satu minit dalam gelung tak terhingga. Matematik untuk kemenangan!
The 500pxketinggian adalah benar-benar sewenang-wenangnya. Itu boleh menjadi apa sahaja yang anda mahukan dan selagi itu juga ukuran sebenar fail gambar latar.
Fail Photoshop yang digunakan untuk membuat gambar latar untuk demo pada awal bab ini tersedia untuk dimuat turun jika anda mencari titik permulaan.
Setelah gambar disimpan (dan dioptimumkan!), Inilah yang akan kita gunakan sebagai gambar latar dalam CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Hebat! Itu memberi kita gambar ginormous yang meluap bekas dan kini dapat digunakan untuk menatal melintasi layar iklan tanpa batas.
Menghidupkan Latar Belakang
Baiklah, mari kita buat perkara ini bergerak. Kami mahu ia bergerak dari kiri ke kanan dalam satu gelung yang berulang-ulang untuk mewujudkan kesan yang lancar agar gambar itu berterusan selama-lamanya.
Pertama, mari kita tentukan animasi CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Kami menggunakan transformharta tanah untuk meletakkan gambar kiri di tepi kiri bekas semasa animasi bermula, seperti:
Pada saat animasi selesai, ia akan mengubah posisi secara negatif (dari kiri ke kanan) dengan jumlah yang sesuai dengan lebar tepat gambar kita. Dan, kerana .sliding-backgroundlebarnya adalah tiga kali lebar gambar sebenar, gambar itu berulang tiga kali antara 0% dan 100% sebelum melingkar semula.
Nota: sebab kami menggunakan tambahan
background-positionutama transformuntuk melakukan pergerakan, yang jauh lebih berprestasi.
OK, mari kita selesaikan dengan memanggil slideanimasi kami di .sliding-backgroundkelas:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )Properti animationini memerintahkan .sliding-backgrounduntuk menggunakan slideanimasi dan menjalankannya selama satu minit pada satu masa dalam satu gelung linear dan tak terhingga.
Meletakkannya Bersama
.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); ) )