Mewujudkan Marquee Advanced dengan Animasi CSS3
Hari ini kita akan melihat “marquee” sekali lagi. Kami sebenarnya telah membincangkannya dalam jawatan terdahulu kami yang bercakap mengenai penggunaan -webkit-marquee harta, tetapi kali ini kita akan mengambil subjek ini sedikit lagi.
Dalam jawatan ini, kami akan mencipta seperti marquee kesan menggunakan Animasi CSS3. Dengan cara itu, kami akan dapat menambahkan lebih banyak fungsi yang tidak dapat dicapai dengan hanya -webkit-marquee.
Kecuali anda sudah biasa dengan modul Animasi CSS3, kami mengesyorkan anda melihat rujukan berikut sebelum meneruskan dengan dokumentasi ini:
- Animasi CSS3 - W3School
- CSS animasi - Mozilla Dev. Rangkaian
Juga ambil perhatian bahawa, pada masa ini, Animasi CSS3 hanya boleh berfungsi di Firefox 8+, Chrome 12+ dan Safari 5.0+ dengan versi awalan (-moz- dan -webkit-). Walau bagaimanapun, kami hanya akan menggunakan versi rasmi dari W3C tanpa awalan untuk mengelakkan mengejek artikel ini dengan kod yang berlebihan.
Menangani Isu Marquee
Salah satu masalah dengan tamadun adalah bahawa teks terus bergerak. Tingkah laku ini mengganggu membaca, dan teks juga sukar dibaca. Kali ini, kami akan cuba membuat versi tuan rumah kami sendiri dan menjadikannya lebih mesra pengguna. Sebagai contoh; bukannya bergerak teks terus menerus, kami akan menghentikannya apabila ia dapat dilihat sepenuhnya, jadi pengguna boleh membaca teks seketika.
The Storyboard (jenis)
Setiap penciptaan kreatif dan reka bentuk, seperti logo, ilustrasi atau laman web, biasanya bermula dengan lakaran. Dalam bidang pengeluaran animasi, ini dilakukan dengan papan cerita. Sebelum kita memulakan sebarang pengekodan, kita akan mula mencipta jenis papan cerita, untuk membantu kita menggambarkan animasi kita.
Seperti yang anda dapat lihat dari papan cerita di atas, kami merancang untuk memaparkan hanya dua baris teks, yang kedua-duanya akan bergerak secara berurutan dari kanan ke kiri.
Papan cerita kami tidak begitu rumit sebagai papan cerita untuk filem animasi sebenar, tetapi perkara itu ialah: kita kini dapat memvisualisasikan bagaimana kemahuan kita akan kelihatan seperti.
Markup HTML
Oleh kerana animasi kami akan menjadi mudah, markup HTML juga akan semudah seperti:
Bagaimana untuk menambah Posts Related Post Tanpa Plugin
Automate Files Dropbox Anda Dengan Tindakan
Gaya Asas
Sebelum bekerja di sekitar benda animasi, mari tambahkan beberapa gaya asas. Mari mulakan dengan menambah tekstur latar belakang untuk html elemen.
html background: url ('... /images/skewed_print.png'); Seterusnya, kami akan menempatkan tenda di tengah-tengah tetingkap pelayar serta menambah beberapa butiran seperti bayangan batin, warna latar belakang dan sempadan.
.marquee width: 500px; ketinggian: 50px; margin: 25px auto; limpahan: tersembunyi; kedudukan: relatif; sempadan: 1px pepejal # 000; margin: 25px auto; warna latar belakang: # 222; -webkit-border-radius: 5px; jejari sempadan: 5px; -webkit-box-shadow: inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Kemudian, kami akan meletakkan teks - yang dalam kes ini dibungkus dalam tag perenggan - sama sekali, dan sejak mutlak kedudukan akan menyebabkan unsur itu runtuh, kita perlu menentukan elemen lebar itu 100% untuk menutup lebar ibu bapa mereka.
.marquee p position: absolute; font-family: Tahoma, Arial, sans-serif; lebar: 100%; ketinggian: 100%; margin: 0; garis ketinggian: 50px; teks-align: center; warna: #fff; teks-bayangan: 1px 1px 0px # 000000; penapis: dropshadow (warna = # 000000, offx = 1, offy = 1);
Mari lihat hasilnya sebentar.
Pada ketika ini, kami telah melakukan semua gaya asas yang kami perlukan; anda bebas menambah gaya peribadi. Tetapi, kami cadangkan anda melekat dengan dimensi marquee yang ditentukan (ketinggian dan lebar) hingga akhir tutorial.
Animasi itu
Pendek kata, animasi adalah pembentangan objek bergerak. Setiap pergerakan ditakrifkan dalam tempoh masa. Oleh itu, apabila kita sedang menjalankan animasi, kita kebanyakannya berurusan dengan Masa. Kami mengambil kira perkara seperti:
- Bilakah objek mula bergerak?
- Berapa lamakah masa untuk objek bergerak dari satu titik ke titik lain??
- Kapan dan berapa lama sekiranya objek itu kekal pada titik tertentu?
Dalam Animasi CSS3, yang masa boleh ditakrifkan dengan @keyframe sintaks. Tetapi, sebelum melompat ke bahagian ini, mari kita mula-mula menentukan kedudukan permulaan teks marquee.
Kami telah merancang bahawa teks akan bermula dari kanan kemudian bergerak ke kanan. Jadi, di sini kita akan meletakkannya di sebelah kanan dengan menggunakan sifat Transformasi CSS3.
.marquee p transform: translateX (100%);
Ingat, yang 100% yang telah kita didefinisikan untuk elemen perenggan kami sama dengan ibu bapanya lebar. Jadi, perkara yang sama juga akan digunakan di sini; elemen perenggan akan diterjemahkan ke kanan untuk 100% yang dalam contoh ini adalah sama dengan 500px.
Keyframes
The @keyframe sintaks mungkin agak membingungkan bagi sesetengah orang, jadi di sini kami telah mencipta panduan visual mudah untuk membantu anda dengan mudah memahami apa yang sedang berlaku dalam @keyframe sintaks.
Klik di sini untuk melihat versi yang lebih besar.
Keseluruhan animasi akan berlangsung 20 saat dan dibahagikan kepada dua urutan yang berkekalan 10 saat setiap.
Dalam urutan pertama, teks pertama akan langsung masuk ke dalam dari kanan dan kekal kelihatan sesaat untuk membolehkan pengguna membaca teks, sementara teks kedua akan tetap tersembunyi. Dalam urutan kedua, teks marquee pertama akan meluncur keluar ke kiri, dan teks kedua akan segera meluncur masuk dari kanan.
Dan di sini adalah semua kod kunci utama yang kita perlukan untuk menjalankan animasi.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
The kiri satu keyframes akan menentukan urutan pertama animasi, sementara dua kiri keyframes akan menentukan urutan kedua.
Melaksanakan Animasi ke Elemen
Untuk animasi untuk berfungsi, jangan lupa untuk menggunakan animasi pada elemen tersebut. Urutan pertama digunakan untuk teks pertama atau dalam kes ini perenggan pertama dan urutan kedua digunakan untuk perenggan kedua juga.
.marquee p: nth-child (1) animation: left-one 20s easy infinite; .marquee p: nth-child (2) animation: left-two 20s easy infinite;
Kita semua selesai dengan animasi kita; mari lihat hasil pada penyemak imbas.
- Demo
- Muat turun Sumber
Bonus
Kita juga boleh menentukan teks marquee untuk memindahkannya dari atas ke bawah atau sebaliknya, seperti yang kita lakukan dalam jawatan terdahulu kita. Inilah cara untuk melakukannya; menggantikan kod Animasi kami di atas dengan yang berikut di bawah gerakkan teks ke bawah:
.marquee p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Perhatikan bahawa kami telah menukar Paksi X kepada Paksi Y dan flip semua terjemahan nilai negatif kepada positif dan sebaliknya.
Kami juga mempunyai dinamakan semula Animasi kepada bawah satu dan bawah dua, jadi kami perlu memohon semula nama Animation dalam elemen perenggan juga.
.marquee p: nth-child (1) animation: down-one 20s easy infinite; .marquee p: nth-child (2) animation: down-two 20s easy infinite;
Atau, jika anda ingin memindahkannya sebaliknya; dari bawah ke bahagian atas. Berikut adalah semua kod yang perlu anda gunakan:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animation: up-one 20s easy infinite; .marquee.up p: nth-child (2) animasi: up-dua 20s memudahkan tak terhingga; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- Demo
- Muat turun Sumber
Kesimpulannya
Walaupun kekurangan sokongan penyemak imbas semasa, Animasi CSS3, jika dilakukan dengan betul, pasti akan menyelesaikan banyak masalah kebolehgunaan pada masa akan datang, seperti yang telah kami lakukan dalam contoh ini. Sekiranya kita hanya memerlukan animasi pendek untuk pelayar moden, menggunakan Animasi CSS3 mungkin lebih baik daripada memuatkan skrip jQuery.
Akhir sekali, kami sedar bahawa artikel ini mungkin agak menggembirakan bagi sesetengah orang, jadi jika anda mempunyai sebarang soalan mengenai artikel ini, jangan lepaskannya di bahagian komen di bawah.
