Membuat “Marquee” Tingkat Lanjut dengan Animasi CSS3
Hari ini kita akan melihat “tenda” sekali lagi. Kami sebenarnya telah membahas tentang hal itu di posting kami sebelumnya yang berbicara tentang menggunakan -webkit-marquee properti, tapi kali ini kami akan mengambil subjek ini sedikit lebih jauh.
Dalam posting ini, kita akan membuat seperti tenda efek menggunakan Animasi CSS3. Dengan begitu kita akan dapat menambahkan lebih banyak fungsi yang tidak dapat dicapai hanya dengan -webkit-marquee.
Kecuali Anda sudah terbiasa dengan modul Animasi CSS3, kami sarankan Anda melihat referensi berikut sebelum melanjutkan dengan dokumentasi ini:
- Animasi CSS3 - W3School
- Animasi CSS - Mozilla Dev. Jaringan
Juga perhatikan bahwa, saat ini, Animasi CSS3 hanya dapat berfungsi di Firefox 8+, Chrome 12+, dan Safari 5.0+ dengan versi awalan (-moz- dan -webkit-). Namun, kami hanya akan menggunakan versi resmi dari W3C tanpa awalan untuk menghindari terlalu banyak memuat artikel ini dengan kode berlebihan.
Mengatasi Masalah Marquee
Salah satu masalah dengan tenda adalah bahwa teks terus bergerak. Perilaku ini mengganggu membaca, dan teksnya juga sulit dibaca. Kali ini, kami akan mencoba membuat versi tenda kami sendiri dan menjadikannya lebih ramah pengguna. Sebagai contoh; alih-alih membuat teks bergerak terus menerus, kami akan menghentikannya ketika sepenuhnya terlihat, sehingga pengguna dapat membaca teks sejenak.
The Storyboard (semacam)
Setiap kreasi dan desain, seperti logo, ilustrasi, atau situs web, biasanya dimulai dengan sketsa. Di bidang produksi animasi, ini dilakukan dengan storyboard. Sebelum kita memulai pengkodean apa pun, pertama kita akan membuat a semacam storyboard, untuk membantu kami memvisualisasikan animasi kami.
Seperti yang dapat Anda lihat dari storyboard di atas, kami berencana untuk hanya menampilkan dua baris teks, yang keduanya akan bergerak berurutan dari kanan ke kiri..
Storyboard kami tidak serumit storyboard untuk film animasi nyata, tetapi intinya adalah: kami sekarang dapat memvisualisasikan bagaimana tenda kami akan terlihat seperti.
Markup HTML
Karena animasi kita akan menjadi sederhana, markup HTML juga akan sesederhana:
Bagaimana cara menambahkan Posting Terkait WordPress Tanpa Plugin
Otomatiskan File Dropbox Anda dengan Tindakan
Gaya Dasar
Sebelum mengerjakan hal-hal animasi, mari kita tambahkan beberapa gaya dasar. Mari kita mulai dengan menambahkan tekstur latar belakang untuk html elemen.
html background: url ('... /images/skewed_print.png'); Selanjutnya, kita akan menempatkan tenda di tengah jendela browser serta menambahkan beberapa detail seperti bayangan dalam, warna latar belakang dan perbatasan.
.marquee width: 500px; tinggi: 50px; margin: 25px otomatis; overflow: disembunyikan; posisi: relatif; perbatasan: 1px solid # 000; margin: 25px otomatis; warna latar: # 222; -webkit-border-radius: 5px; batas-radius: 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 memposisikan teks - yang dalam hal ini dibungkus dengan tag paragraf - sepenuhnya, dan karena mutlak Posisi akan menyebabkan elemen runtuh, kita harus mendefinisikan elemen lebar 100% untuk menutupi lebar induknya.
.marquee p position: absolute; font-family: Tahoma, Arial, sans-serif; lebar: 100%; tinggi: 100%; margin: 0; garis-tinggi: 50px; perataan teks: tengah; warna: #fff; text-shadow: 1px 1px 0px # 000000; filter: dropshadow (color = # 000000, offx = 1, offy = 1);
Mari kita lihat hasilnya sebentar.
Pada titik ini, kami telah melakukan semua gaya dasar yang kami butuhkan; Anda bebas menambahkan lebih banyak atau mempersonalisasi gaya. Namun, kami menyarankan Anda tetap dengan dimensi tenda yang ditentukan (tinggi dan lebar) hingga akhir tutorial.
Animasi
Singkatnya, animasi adalah presentasi objek bergerak. Setiap gerakan didefinisikan dalam kerangka waktu. Jadi, ketika kami mengerjakan animasi, kami lebih banyak berurusan dengan Waktu. Kami mempertimbangkan hal-hal seperti:
- Kapan objek mulai bergerak?
- Berapa lama untuk objek bergerak dari satu titik ke titik lainnya?
- Kapan dan berapa lama benda itu harus tetap pada titik tertentu?
Dalam Animasi CSS3, the waktu dapat didefinisikan dengan @keyframe sintaksis. Tapi, sebelum melompat ke bagian ini, mari kita tentukan posisi awal teks tenda.
Kami telah merencanakan bahwa teks akan mulai dari kanan kemudian pindah ke kanan. Jadi, di sini kita akan memposisikannya di sebelah kanan menggunakan properti Transformasi CSS3.
.marquee p transform: translateX (100%);
Ingat, itu 100% yang telah kami tetapkan untuk elemen paragraf kami sama dengan induknya lebar. Jadi, hal yang sama juga akan diterapkan di sini; elemen paragraf akan menjadi diterjemahkan ke kanan untuk 100% yang dalam contoh ini sama dengan 500px.
Bingkai kunci
Itu @keyframe sintaks mungkin agak membingungkan bagi sebagian orang, jadi di sini kami telah membuat panduan visual sederhana untuk membantu Anda dengan mudah memahami apa yang terjadi di @keyframe sintaksis.
Klik di sini untuk melihat versi yang lebih besar.
Seluruh animasi akan bertahan 20 detik dan dibagi menjadi dua urutan yang bertahan lama 10 detik setiap.
Di urutan pertama, teks pertama akan langsung meluncur dari kanan dan tetap terlihat sementara untuk membiarkan pengguna membaca teks, sementara teks kedua akan tetap tersembunyi. Pada urutan kedua, teks tenda pertama akan meluncur keluar ke kiri, dan teks kedua akan segera meluncur masuk dari kanan.
Dan berikut ini semua kode keyframe yang perlu kita terapkan untuk menjalankan animasi.
@keyframes kiri-satu 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes ke kiri-dua 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
Itu satu kiri keyframes akan menentukan urutan pertama animasi, sedangkan kiri-dua keyframes akan menentukan urutan kedua.
Menerapkan Animasi ke Elemen
Agar animasi berfungsi, jangan lupa menerapkan animasi ke elemen. Urutan pertama diterapkan untuk teks pertama atau dalam hal ini paragraf pertama dan urutan kedua diterapkan untuk paragraf kedua juga.
.marquee p: nth-child (1) animation: left-one 20s easy infinite; .marquee p: nth-child (2) animasi: left-two 20s easy infinite;
Kita semua selesai dengan animasi kita; mari kita lihat hasilnya di browser.
- Demo
- Sumber Unduhan
Bonus
Kami juga dapat mendefinisikan teks tenda untuk memindahkannya dari atas ke bawah atau sebaliknya, seperti yang kami lakukan di posting sebelumnya. Inilah cara melakukannya; ganti kode Animasi kami di atas dengan yang di bawah ini menjadi pindahkan 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 bahwa kami telah mengubah Sumbu X untuk Sumbu Y dan balik semua terjemahan nilai negatif ke positif dan sebaliknya.
Kami juga punya berganti nama menjadi Animasi untuk turun satu dan down-two, jadi kita perlu menerapkan kembali nama Animasi di elemen paragraf juga.
.marquee p: nth-child (1) animasi: down-one 20s easy infinite; .marquee p: nth-child (2) animasi: down-two 20s easy infinite;
Atau yang lain, jika Anda ingin memindahkannya sebaliknya; dari bawah ke atas. Berikut ini semua kode yang perlu Anda terapkan:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animasi: up-one 20s easy infinite; .marquee.up p: nth-child (2) animasi: up-two 20s easy infinite; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes ke atas dua 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- Demo
- Sumber Unduhan
Kesimpulan
Meskipun kurangnya dukungan browser saat ini, CSS3 Animation, jika dilakukan dengan benar, tidak diragukan lagi akan menyelesaikan banyak masalah kegunaan di masa depan, seperti yang telah kami lakukan dalam contoh ini. Jika kita hanya memerlukan animasi pendek yang ditujukan untuk browser modern, menggunakan Animasi CSS3 mungkin lebih baik daripada harus memuat skrip jQuery.
Terakhir, kami menyadari bahwa artikel ini mungkin sedikit membingungkan bagi sebagian orang, jadi jika Anda memiliki pertanyaan mengenai artikel ini, jangan ragu untuk mempostingnya di bagian komentar di bawah ini..
