Advertisement
  1. Web Design
  2. Animation
Webdesign

11 Kursus Animasi Web Praktikal

by
Length:ShortLanguages:

Malay (Melayu) translation by Sulistiyono (you can also view the original English article)

Animasi berperikemanusiaan yang bermakna dan boleh benar-benar meningkatkan pengalaman pengguna dalam laman web dan aplikasi anda. Ia boleh menceritakan kisah, bantuan navigasi, dan banyak lagi.

Sekiranya anda ingin tahu cara menggunakan animasi dalam reka bentuk dan projek pembangunan web anda, jangan lagi melihatnya. Kami telah menyusun senarai lengkap 11 kursus yang akan mengajar anda cara membuat animasi yang indah dengan CSS, JavaScript, dan rangka kerja khusus seperti GreenSock and Sequence.js.

1. Animasi Web Praktikal

Kursus pertama ini adalah titik permulaan yang bagus untuk belajar mengenai animasi. Dalam 30 video yang berlangsung lebih daripada empat jam, anda akan mempelajari banyak cara praktikal untuk membuat animasi untuk butang, jadual harga dan elemen web berguna lain, menggunakan CSS ringkas dan jQuery.

2. 6 Projek Animasi CSS3 yang berguna

Kadang-kadang, cara terbaik untuk mempelajari kemahiran baru adalah dengan melancarkan lengan baju anda dan melengkapkan projek kehidupan sebenar. Dalam kursus pendek ini, anda akan membina enam projek kecil tetapi bermanfaat yang menggunakan animasi CSS.

3. Panduan Visual untuk Animasi CSS

Walaupun JavaScript dan jQuery berguna untuk membina animasi, ia juga mungkin untuk membuat kesan animasi yang hebat menggunakan CSS tulen. Dalam kursus ini, anda akan belajar bagaimana untuk membuat animasi CSS yang dikuasakan oleh peralihan dan mengubah sifat. Dan dengan menggunakan alat reka bentuk web visual popular Webflow (melalui akaun percuma), anda akan dapat melihat animasi anda bermain dalam masa nyata, semasa anda membuatnya.

4. Pengenalan kepada Anime.js

Anime.js adalah enjin animasi JavaScript kecil tetapi berkuasa. Dalam kursus ini, anda akan mempelajari asas-asas pustaka ini, dan anda juga akan membina UI "perlumbaan Formula 1" mudah menggunakannya.

5. Memudahkan ke Fungsi Bezier Cubic

Apakah pelonggaran? Mengapa ia berguna dalam dunia animasi web? Bagaimanakah anda dapat mengawalnya dan menggunakannya dalam konteks CSS? Dalam kursus super cepat ini, anda akan mempelajari jawapan kepada semua soalan ini.

6. Animasi 3D Dengan Three.js

Rangka kerja Three.js adalah cara terbaik untuk mencipta grafik 3D dalam penyemak imbas. Dalam kursus ini, anda akan belajar untuk membuat beberapa animasi 3D kompleks menggunakan rangka kerja JavaScript ini. Juga pastikan untuk memeriksa kursus terdahulu, 3D di Web Dengan Three.js dan Three.js: Beyond the Basics. Ketiga-tiga kursus bersama-sama akan memberikan pengenalan menyeluruh kepada Three.js dari bawah ke atas.

7. Platform Animasi GreenSock: Langkah Pertama

GreenSock adalah rangka kerja JavaScript yang menjadikannya mudah untuk menghidupkan elemen HTML. Semasa kursus ini, anda akan mengambil langkah pertama anda dalam mempelajari cara menggunakan rangka kerja yang kuat ini. Selagi anda mempunyai pemahaman tentang HTML dan CSS, bersama dengan pengetahuan asas mengenai JavaScript, anda akan dilengkapi dengan semua yang anda perlukan untuk mengikuti.

8. 3 Projek GreenSock: Animasi Praktikal Dengan GSAP

Kursus ini dibina pada satu sebelumnya dan membawa anda melalui tiga projek di mana anda akan belajar bagaimana untuk membuat animasi programatik, dalam senario dunia sebenar, menggunakan Platform Animasi GreenSock. Anda akan belajar cara membuat preloader animasi, animasi logo SVG, dan slider kandungan tersuai.

9. Up and Running Dengan Animasi Keyframe CSS

Bagaimanakah anda ingin belajar bagaimana membuat animasi menggunakan sifat utama kerangka utama dan animasi CSS, hanya dalam sepuluh minit? Kursus Kopi Break ini akan membolehkan anda melakukannya.

10. Meningkatkan Animasi Dengan UI jQuery

jQuery UI adalah lanjutan jQuery yang menjadikannya mudah untuk membuat elemen antara muka pengguna bersih untuk laman web anda. Ia juga menyediakan fungsi yang memanjangkan keupayaan jQuery untuk menghidupkan kandungan. Dalam kursus pendek ini, anda akan belajar cara menggunakannya untuk meningkatkan animasi jQuery anda.

11. Pengenalan kepada Sequence.js

Sequence.js adalah rangka kerja animasi CSS yang boleh anda gunakan untuk membuat slider, pembentangan, dan aplikasi berasaskan langkah lain. Ia mempunyai semua fungsi yang diperlukan dalam; Apa yang perlu anda lakukan ialah menambah kandungan dan gaya anda. Kursus pendek ini akan mengajar anda asas-asas menggunakan Sequence.js dan meletakkan asas untuk menerokai semua pilihan dan ciri-cirinya.

Tonton Sebarang Kursus Sekarang

Anda boleh mengambil mana-mana kursus kami secara terus dengan langganan Envato Elements. Untuk yuran bulanan tunggal yang rendah, anda mendapat akses bukan sahaja untuk kursus ini, tetapi juga untuk perpustakaan kami yang semakin meningkat dari lebih 1,000 kursus video dan eBak yang terkemuka di industri pada Envato Tuts +.

Tambahan lagi, anda kini mendapat muat turun tanpa had dari perpustakaan Envato Elements besar sebanyak 700,000 + aset kreatif. Buat dengan fon, foto, grafik dan templat yang unik, dan menyampaikan projek yang lebih baik dengan lebih cepat.

Advertisement
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.