Advertisement
  1. Code
  2. Web Development

jQuery Animations: Program 7-Langkah

Scroll to top
Read Time: 13 min

Indonesian (Bahasa Indonesia) translation by Diangr (you can also view the original English article)

Sedikit animasi dapat merapikan antarmuka yang membosankan. Dalam tutorial ini, Anda akan belajar cara melakukannya dengan benar dengan jQuery.


Sepatah Kata Dari Penulis

Animasi: sebuah konsep yang sering membangkitkan reaksi memecah belah dari orang-orang. Beberapa bersumpah dengan kegunaannya, sementara yang lain marah karena terlalu banyak digunakan. Namun demikian, animasi, ketika digunakan dengan benar, seringkali merapikan antarmuka pengguna, dan membuatnya terasa jauh lebih tajam dan bersih. Dalam tutorial ini, kita akan mulai dengan sedikit dasar-dasar jQuery, kemudian belajar cara membuat animasi pertama kami, dan kemudian membangun efek dan akhirnya membuat sesuatu yang akan digunakan di dunia nyata.

Tertarik? Ayo segera mulai! Harap dicatat bahwa karena ini ditujukan untuk pemula, saya mungkin kecapi terlalu banyak pada beberapa bagian. Tetap bersamaku. Jika anda penasaran, lihat bagian pertama dari demo untuk efek sederhana yang akan kami buat hari ini.


Langkah 1: Dasar-Dasar jQuery

jQuery adalah pustaka JavaScript yang bermaksud untuk memudahkan anda, seorang pengembang, untuk membuat situs web interaktif dan kaya fitur yang lebih baik, kaya fitur, dan antarmuka pengguna dengan sesedikit mungkin baris kode.

Baris kode yang khas terlihat seperti:

Mari kita lihat setiap bagian:

  • $ - Singkatan untuk objek jquery. Gunakan jquery jika anda menggunakan kerangka lain di halaman yang sama, seperti di: jquery (Elemen DOM) .something();
  • (Elemen DOM) - Elemen yang ingin anda lakukan sesuatu. Ini adalah salah satu dari jQuery's ace di dalam hole. anda dapat menggunakan penyeleksi CSS untuk mendapatkan elemen. Deklarasi apa pun yang berfungsi dalam dokumen CSS dapat digunakan di sini. ID, kelas, kelas semu, apa pun.
  • something() - Hal yang ingin anda lakukan untuk elemen yang diperoleh. Ini bisa apa saja mulai dari menyembunyikan elemen hingga membuat panggilan AJAX ke pengendali event.

Di sini, kita akan tetap dengan animasi dan fungsionalitas terkait efek.


Langkah 2: Menggunakan Efek Baked-in

jQuery menyediakan banyak metode bawaan yang dapat anda gunakan langsung dari kotak. Ini termasuk metode untuk menunjukkan/menyembunyikan elemen dengan sejumlah variasi termasuk geser elemen dan memudar elemen masuk dan keluar. Anda juga bisa menggunakan sejumlah metode sakelar yang mengaktifkan visibilitas elemen yang dimaksud.

Sebelum kita melihat masing-masing metode ini, berikut adalah format umum untuk memanggil setiap metode:

Mengikuti paradigma jQuery umum, kami awalnya menargetkan elemen yang diperlukan menggunakan penyeleksi CSS. Selanjutnya, kita panggil saja salah satu metode bawaan.

Sementara, sebagian besar metode dapat disebut lewat tanpa parameter, sering kali anda ingin menyesuaikan fungsinya. Setiap metode setidaknya mengambil parameter kecepatan dan panggilan balik.

kecepatan menunjukkan durasi, dalam detik, dari animasi. anda dapat melewati string termasuk lambat, normal atau cepat atau anda bisa lebih tepat dan mengatur waktu dalam milidetik.

panggilan balik adalah fungsi yang dieksekusi setelah animasi selesai. Anda dapat menggunakannya untuk melakukan apa saja, membuat panggilan AJAX secara diam-diam di latar belakang, memperbarui bagian lain dari antarmuka pengguna dan sebagainya. Imajinasi anda adalah batasnya.

Berikut adalah daftar fungsi yang dibundel dengan jQuery:

  • show/hide - Metode untuk menampilkan atau menyembunyikan suatu elemen. Mengambil kecepatan dan panggilan balik sebagai parameter.
  • toggle - Metode yang memanipulasi tampilan elemen tergantung pada kondisi elemen saat ini, yaitu jika disembunyikan, itu akan ditampilkan dan sebaliknya. Menggunakan metode show atau hide.
  • slideDown/slideUp - Cukup jelas. Memvariasikan ketinggian elemen untuk membuat animasi geser untuk mengungkapkan atau menyembunyikan elemen.
  • slideToggle - Sama seperti metode beralih kecuali bahwa ia menggunakan metode slideDown/slideUp untuk mengungkapkan atau menyembunyikan elemen.
  • fadeIn/fadeOut - Bervariasi opacity dari elemen yang bersangkutan untuk membuat efek fade.
  • fadeTo - Mengubah opacity elemen agar cocok dengan nilai yang diteruskan. Jelas, dibutuhkan parameter opacity tambahan di mana 0 benar-benar transparan dan 1 benar-benar buram.

Sebagai fitur tambahan, metode sakelar yang disebutkan di atas memiliki implementasi alternatif di mana dibutuhkan ekspresi sebagai parameter untuk memutuskan apakah akan menampilkan atau menyembunyikan elemen.

Misalnya, jika anda ingin beralih hanya elemen daftar yang memiliki kelas efek, kode anda akan terlihat seperti:

Sederhananya, fungsi toggle memeriksa ekspresi yang diteruskan ke sana dan jika itu benar, itu toggle. Selain itu, dibiarkan sendiri. Ekspresi yang kami lewati di sini memeriksa apakah elemen memiliki kelas tertentu.


Langkah 3: Membangun Animasi Kustom

Seringkali, metode bawaan tidak cukup sesuai dengan kebutuhan anda dalam hal mana anda pasti ingin membangun efek khusus anda sendiri. jQuery memungkinkan anda melakukannya juga. Sebenarnya cukup mudah.

Untuk membuat efek animasi khusus, anda menggunakan metode animate. Mari ku tunjukkan.

Metode animasi sama seperti metode lain dalam hal itu dipanggil dengan cara yang sama. Kami memperoleh elemen dan meneruskan beberapa parameter ke sana. Parameter adalah di mana metode ini berbeda dari efek yang dibangun sebelumnya.

Parameter kecepatan dan panggilan balik memiliki fungsi yang sama seperti pada metode sebelumnya. Properti objek yang menyimpan sejumlah pasangan key/value adalah apa yang membuat metode ini unik. Anda melewati setiap properti yang ingin anda animasikan bersama dengan nilai akhir. Misalnya, jika anda ingin menghidupkan elemen hingga 90% dari lebar saat ini, anda harus melakukan sesuatu seperti:

Potongan di atas akan menghidupkan unsur 90% lebar dan kemudian mengingatkan pengguna menunjukkan bahwa telah selesai.

Perhatikan bahwa anda tidak terbatas pada dimensi. Anda dapat menghidupkan beragam properti termasuk opacity, margin, padding's, borders, ukuran font. Metode ini juga cukup fleksibel ketika datang ke unit. Piksel, em, persentase semua pekerjaan. Jadi sesuatu yang berbelit-belit seperti di bawah ini akan berfungsi. Itu tidak akan terlihat kohesif.

Saat mendefinisikan properti yang terdiri dari lebih dari satu kata, buat catatan untuk mendefinisikannya dalam case unta. Ini sangat kontras dengan sintaks CSS biasa jadi buat catatan khusus di sini. Ini borderTop, bukan border-top.

Catatan: jQuery memungkinkan hanya properti yang mengambil nilai numerik untuk dianimasikan. Ini berarti hanya menggunakan inti, semua properti terkait warna keluar. Jangan khawatir. Dengan bantuan dari jQuery UI, kami akan menjiwai warna dalam waktu singkat.


Langkah 4: Tweaking the Effect

Jika anda melihat efek sederhana dalam demo, anda mungkin memperhatikan itu sedikit rusak. Melayang-layang dan mematikan elemen berulang kali mengarah ke antrian panjang yang inturn mengarah ke animasi berulang itu sendiri.

Cara paling sederhana untuk menghindari masalah ini adalah dengan menggunakan metode berhenti segera sebelum memulai animasi. Ini secara efektif membersihkan antrian dan animasi dapat berjalan seperti biasa. Misalnya, ini akan menjadi kode normal anda.

Menggunakan berhenti untuk menghindari penumpukan animasi, kode baru anda akan terlihat seperti:

Cukup mudah, bukan? Tetapi metode ini memang memiliki masalah kecil. Interaksi yang cepat tidak akan mengarah pada penumpukan melainkan animasi yang tidak lengkap. Jika anda ingin sepenuhnya menghilangkan masalah ini, anda harus beralih ke plugin seperti hoverFlow.


Langkah 5: Menambahkan Sedikit Lebih Realisme - Mempermudah

Jika anda ingin menambahkan sedikit lebih banyak realisme, anda perlu lebih banyak kontrol atas laju perkembangan animasi. Di sinilah pelonggaran masuk. Pelonggaran pada dasarnya mengontrol akselerasi dan deselerasi animasi dari waktu ke waktu.

Metode pelonggaran default adalah ayunan yang dibangun ke jQuery. Plugin pelonggaran Robert Penner memungkinkan anda menggunakan sejumlah efek pelonggaran. Lihat bagian pelonggaran dalam demo untuk melihat setiap efek pelonggaran.

Hanya ada peringatan ketika menggunakan efek pelonggaran khusus: anda hanya dapat menggunakannya dengan efek animasi khusus yaitu dengan metode animate. Setelah anda memasukkan plugin pelonggaran, memanfaatkan metode pelonggaran kustom semudah mengirimkannya sebagai parameter seperti:

Periksa bagian pelonggaran demo untuk melihat setiap metode dalam aksi. Meskipun beberapa efek pelonggaran mungkin tidak cocok untuk semua situasi, animasi anda tentu akan terlihat jauh lebih menarik dengan penggunaan metode pelonggaran tertentu yang tepat.


Langkah 6: Menendang Notch - jQuery UI

Memutakhirkan ke jQuery UI memberi kami sejumlah fitur yang sangat dibutuhkan. Anda, pada kenyataannya, tidak perlu seluruh perpustakaan untuk menggunakan fitur tambahan. Anda hanya perlu file efek inti untuk mendapatkan fungsionalitas. Bukan inti UI, hanya efek file inti yang memiliki berat 10 kilobyte yang relatif kecil.

Fitur penting yang dibawa oleh perpustakaan efek jQuery UI ke meja adalah dukungan untuk menganimasi warna, pelonggaran dan transisi kelas.

Jika Anda ingat, saya sebutkan sebelumnya bahwa dengan pustaka jQuery inti, anda dibatasi hanya untuk menganimasi properti yang mengambil angka. Anda menyingkirkan batasan ini dengan jQ UI. Anda sekarang dapat dengan mudah menghidupkan warna latar belakang elemen, warna pembatasnya, dan sebagainya. Selain itu, alih-alih membuat fungsi terpisah untuk fitur-fitur yang diperluas ini, ini hanya memperluas fungsi dasar animasi. Ini berarti bahwa jika anda memiliki pustaka inti yang disertakan dalam file anda, anda dapat menggunakan metode animasi biasa untuk melakukan semua pekerjaan kotor untuk anda.

Misalnya, jika anda ingin menganimasikan warna batas elemen saat melayang, kode anda akan terlihat seperti ini:

Transisi kelas bertanggung jawab untuk menjiwai antar kelas. Dengan pustaka dasar, jika anda menghapus dan kemudian menambahkan kelas yang mengubah tampilan elemen, itu akan terjadi secara instan. Ketika anda memiliki perpustakaan UI di papan, anda mendapatkan opsi melewati parameter tambahan untuk menjaga kecepatan animasi, metode pelonggaran dan panggilan balik. Seperti halnya fitur sebelumnya, fungsi ini dibangun di atas API jQuery yang ada yang memudahkan proses transisi.

Fitur terakhir yang dibawa jQuery ke tabel adalah persamaan pelonggaran terintegrasi. Sebelumnya anda harus menggunakan plugin tambahan untuk menangani hal ini, tetapi sekarang sudah dibundel sehingga anda tidak perlu khawatir lagi.


Langkah 7: Membangun Efek Dunia Nyata Pertama kami

Semua contoh di atas dimaksudkan hanya sebagai demo dari fungsionalitas yang dimaksud. Bukankah lebih baik untuk benar-benar membangun sesuatu yang digunakan dunia nyata? Itulah tepatnya yang akan kita lakukan hari ini. Ini bukan sesuatu yang benar-benar baru atau inovatif, tetapi demo ini akan memungkinkan anda menggunakan apa yang telah kami pelajari hari ini untuk digunakan dalam skenario dunia nyata.

Bayangkan ini: Anda ingin menampilkan gambar dan ketika mouse pengguna membesar-besarkannya, anda menampilkan 2 bagian di dalam gambar. Satu menunjukkan judul dan yang lainnya menunjukkan deskripsi kecil dari gambar. Saya yakin anda akan menemukan plugin trilyun yang melakukan hal yang sama tetapi hari ini kita akan membangunnya dari awal. Saya berjanji kepada anda itu tidak sesulit kedengarannya. Sebenarnya, ini sebenarnya cukup mudah dan dapat dibangun dengan sangat cepat. Mari kita mulai.


HTML

Pertama, kita perlu dasar markup yang kuat untuk membangun.

Untuk efek ini, pertama-tama kita harus memutuskan struktur untuk setiap item. Setiap item dibungkus oleh div dengan kelas item. Di dalam div ada 3 elemen: gambar itu sendiri dan 2 elemen div memegang judul dan deskripsi.

Bagian lain yang agak biasa dan diri jelas. Kita mulai dengan termasuk Perpustakaan jQuery, jQuery UI Perpustakaan dan kami file yang memegang kode JS kustom kami. Perhatikan bahwa saya hanya membutuhkan bagian inti efek dari jQuery UI, jadi saya hanya mengunduh itu. Jika anda ingin lebih banyak efek bawaan, anda memerlukan bangunan kustom. Anda dapat mengunduh bangunan yang disesuaikan di sini.

Berikut adalah tampilan halaman kami dengan fase ini lengkap.

Tutorial ImageTutorial ImageTutorial Image

CSS

Beberapa hal yang perlu anda catat di sini. Setiap elemen item memiliki properti posisinya diatur ke relatif sehingga elemen di dalamnya dapat diposisikan dengan mudah. Selain itu, properti overflow diatur ke tersembunyi sehingga kami dapat menyembunyikan judul dan deskripsi di luar saat tidak diperlukan.

Judul dan deskripsi mengatur properti posisi mereka ke absolut sehingga mereka dapat diposisikan secara tepat di dalam elemen item. Judul memiliki nilai top 0 sehingga di bagian atas dan deskripsi memiliki nilai bottom diatur ke 0 sehingga tepat di bagian bawah.

Selain itu, CSS sangat sederhana dan terutama menyangkut tipografi, sedikit posisi dan gaya. Tidak ada yang terlalu radikal.

Inilah tampilan halaman kami dengan fase ini selesai.

Tutorial ImageTutorial ImageTutorial Image

Magic JavaScript yang Diaktifkan jQuery

Ini mungkin terlihat sedikit mengesankan tetapi tidak. Biarkan saya jelaskan masing-masing bagian.

Logika dari efek ini sangat sederhana. Karena elemen ditempatkan secara absolut, kami awalnya menempatkan elemen di luar viewport. Ketika gambar berada di atas, kita hanya perlu memindahkannya kembali ke posisi semula yaitu di bagian atas dan bawah gambar.

Pertama, kami memindahkan judul dan deskripsi dari pandangan. Kami melakukan ini dengan JavaScript alih-alih dengan CSS untuk alasan yang sangat spesifik. Bahkan jika JS dinonaktifkan, itu menurunkan cukup anggun. Judul dan deskripsi masih di-overlay atas gambar dan itu terlihat seperti keadaan hover. Jika kita menggunakan CSS untuk menyembunyikan judul dan deskripsi dan jika JS dinonaktifkan, mereka akan sepenuhnya tersembunyi dan karenanya tidak berguna. Saya memilih menggunakan JS untuk pekerjaan kotor demi peningkatan progresif.

 Kami awalnya mengikat kode khusus kami ke fungsi hover setiap elemen item. Ini memungkinkan penggunaan membuat penangan ini cukup umum dan dapat digunakan kembali. Menambahkan fungsi ini ke orang lain adalah semudah memberikan kelas item. Fungsi pertama adalah untuk acara hover dan yang kedua adalah untuk acara unhover.

Dalam ruang lingkup fungsi, ini mengacu pada elemen yang memicu acara. Kami menggunakan metode animasi untuk mengubah nilai yang sesuai. Kami juga menggunakan sedikit pelonggaran untuk membuatnya sedikit lebih menarik. Pada mouseout atau unhover, kami hanya mengubah nilai kembali ke default.

Sebagai sedikit tambahan, ketika wadah untuk judul dan deskripsi melayang-layang, mereka perlahan berubah warna, berkat jQuery UI.

Dan kita benar-benar selesai. Tidak butuh banyak waktu, kan? Tidak buruk untuk skrip kecil yang bahkan lebih kecil mengingat berapa banyak baris yang dialokasikan hanya untuk kurung kurawal.


Kesimpulan


Dan begitulah. Cara membuat animasi dengan jQuery bersama dengan contoh dunia nyata menempatkan apa yang telah anda pelajari untuk digunakan dengan baik. Semoga tutorial ini menarik dan bermanfaat. Jangan ragu untuk menggunakan kembali kode ini di tempat lain di proyek anda dan berpadu di sini jika anda mengalami kesulitan.

Pertanyaan? Hal-hal baik untuk dikatakan? Kritik? Tekan bagian komentar dan beri saya komentar. Selamat coding!


Tulis Tutorial Plus

Tahukah anda bahwa anda bisa mendapatkan hingga $600 untuk menulis tutorial PLUS and/or screencast untuk kami? Kami mencari tutorial mendalam dan ditulis dengan baik tentang HTML, CSS, PHP, dan JavaScript. Jika anda mampu, silakan hubungi Jeffrey di nettuts@tutsplus.com.

Harap dicatat bahwa kompensasi aktual akan tergantung pada kualitas tutorial dan screencast akhir.

Write a PLUS tutorial
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.