Halo teman teman! Pada artikel ini, saya mengundang Anda untuk melihat pilihan perpustakaan CSS dan plugin JS hebat saya yang akan membantu Anda mengimplementasikan animasi paling kompatibel di situs Anda dalam hitungan menit.

Jika Anda ingin membuat animasi yang dipicu oleh suatu peristiwa atau tindakan, maka plugin animasi JavaScript akan sangat membantu Anda dalam hal ini. Namun perlu dicatat bahwa sebagian besar animasi ini ditulis dalam CSS3 dan dikontrol menggunakan JavaScript.

Dynamic.js adalah perpustakaan JavaScript untuk membuat animasi berbasis fisika.

mo.js adalah perpustakaan luar biasa untuk membuat grafik gerak. Anda sering melihat contoh grafik seperti itu ketika Google memasang logo tematik baru (doodle) yang akan dianimasikan saat diarahkan atau diklik.

cta.js - Plugin JavaScript untuk membuat animasi ajakan bertindak. Banyak dari mereka terlihat sangat mengesankan.

animo.js - alat yang ampuh untuk mengelola animasi CSS3.

html5tooltips.js - tooltips lama yang bagus dengan desain modern dan animasi tanpa ketergantungan, sambungkan dan gunakan.

Rocket adalah perpustakaan JS menarik yang memungkinkan Anda menganimasikan jalur elemen ke target.

scrollReveal.js adalah plugin yang memungkinkan Anda menganimasikan elemen saat menggulir halaman.

Wow.js adalah plugin javascript lain untuk mengontrol animasi saat menggulir halaman.

Transit adalah plugin jQuery untuk memperlancar transisi dan transformasi yang disediakan di jQuery.

parallax.js adalah plugin yang bereaksi terhadap posisi ponsel cerdas di ruang angkasa, berdasarkan ini, ia mengontrol indentasi, posisi, dan kedalaman lapisan. Jika perangkat tidak memiliki giroskop, maka perhitungan dilakukan berdasarkan posisi kursor mouse. Singkatnya - paralaks tingkat lanjut!

Sly - Pustaka JavaScript untuk membuat gulir searah dengan penerapan navigasi sepotong-sepotong. Ini mungkin tampak rumit dalam kata-kata, saya sarankan hanya melihat contohnya.

Move.js adalah perpustakaan JavaScript kecil untuk membuat animasi CSS3 khusus.

slider.js adalah pustaka JavaScript yang mudah digunakan dan ringan untuk membuat penggeser vertikal dan horizontal.

CreateJS adalah seperangkat perpustakaan dan alat modular yang dapat bekerja sama atau mandiri untuk memperkaya konten dengan interaktivitas. Fungsionalitas perpustakaan ini memungkinkan Anda membuat situs web dan aplikasi yang luar biasa, pastikan untuk memeriksa demonya.

Flippant.js - Plugin JavaScript untuk membuat elemen dengan efek rotasi pada porosnya.

jmpress.js adalah perpustakaan JavaScript dengan ide unik untuk membuat situs web di atas kanvas HTML5 yang tak ada habisnya. Ide tersebut patut untuk diperhatikan.

Pengembang berpengalaman telah lama mengurus pembuatan perpustakaan dengan animasi CSS3 untuk kami. Sekarang kami dapat mengambilnya dan menerapkannya dalam proyek kami, dan yakin akan keefektifannya.

Pada artikel ini, kami ingin memperkenalkan kepada Anda beberapa pustaka JavaScript paling berguna yang dapat digunakan untuk menganimasikan konten aplikasi web. Pustaka ini dirancang untuk membuat animasi untuk menu tarik-turun, elemen geser, animasi paralaks, dan bahkan font.

Dan yang penting semuanya 100% sumber daya gratis dengan terbuka kode sumber, sehingga Anda dapat menggunakannya di proyek mana pun.

Aktifkan saja dinamika.js di halaman dan setelah itu Anda akan dapat menganimasikannya Properti CSS untuk elemen DOM apa pun. Anda juga dapat menganimasikan properti SVG.

Dynamics.js berisi properti setTimeout sendiri. Alasannya adalah requestAnimationFrame dan setTimeout memiliki perilaku yang berbeda. Properti ini didukung oleh semua objek JavaScript. Perpustakaan telah diuji kompatibilitasnya dengan Safari 7+, Firefox, Chrome 35+ 34+, IE10+.

Pustaka JavaScript canggih yang membantu Anda menganimasikan properti CSS dan atribut SVG.

Animate Plus sangat bagus untuk mengatur interaksi cepat semua kontrol antarmuka, serta rangkaian animasi panjang untuk desktop dan perangkat seluler.

Pustaka JavaScript yang ringkas dan kuat untuk menganimasikan elemen apa pun (“aksi”) di dalam elemen lain (“efek”) pada laman.

Beep.js adalah seperangkat alat untuk membuat synthesizer JavaScript berbasis browser menggunakan WebAudio API.

Pustaka JavaScript yang kuat untuk animasi dan transformasi ikon lintas browser. iconate.js juga mendukung templat modular AMD dan CommonJS.

Pustaka JavaScript untuk menampilkan elemen animasi ASCII kecil di komentar DOM. Ini adalah perpustakaan mandiri yang hanya menggunakan JavaScript (animasi dilakukan di node komentar, hanya di DOM).

Rainyday.js memungkinkan Anda membuat efek tetesan hujan yang tampak realistis pada kaca menggunakan kanvas HTML5 dan JavaScript. Pustaka ini menyertakan API yang dapat diperluas dan deteksi kesalahan bawaan.

Rainyday.js menggunakan kekuatan HTML5, sehingga didukung oleh sebagian besar browser modern.

Anima.js memungkinkan Anda menggunakan penundaan dan durasi, bahkan untuk animasi CSS. Perpustakaan menggunakan transformasi CSS dan transformasi 3D dengan penyertaan Javascript untuk membuat animasi. Anda dapat memulai, menghentikan, membatalkan animasi, dan bahkan membuat efek berdasarkan peristiwa.

BlinkTitle.js dapat membuat judul HTML berkedip, peringatan atau pemberitahuan dalam judul.

Pustaka Javascript dirancang untuk memindahkan elemen, mengimbangi, memutar, menskalakan, memiringkan, dan mengubah ukuran. Berkat operasi perkalian matriks, transformasi dapat digabungkan dalam kombinasi apa pun yang Anda inginkan. Hasil akhirnya kemudian ditentukan menggunakan matriks transformasi CSS3.

Vivus adalah kelas JavaScript ringkas (tanpa ketergantungan) untuk animasi SVG dengan menggambar. Vivus berisi banyak berbagai efek animasi, kemampuan untuk membuat skrip khusus telah diterapkan.

Pustaka JavaScript untuk membangun interaksi dinamis berdasarkan fisika nyata, dengan penekanan pada perangkat seluler. Alih-alih properti animasi yang menentukan periode waktu, Impuls mengubah posisi dan kecepatan. Itu tidak mengandung jumlah besar ketergantungan. Tidak memerlukan jQuery, tetapi dapat berinteraksi dengan baik dengannya.

AniJS adalah perpustakaan JavaScript deklaratif untuk menangani animasi CSS. Ini sepenuhnya didokumentasikan dan mudah digunakan.

Alat untuk membuat animasi keyframe yang indah berdasarkan CSS3. Tambahkan komponen, pilih opsi dan dapatkan URL pendek atau ekspor kode ke CSS.

Sticker.js adalah perpustakaan JavaScript yang memungkinkan Anda membuat efek stiker yang dapat dikupas. Perpustakaan berfungsi sebagian besar waktu browser populer, yang mendukung CSS3 (termasuk IE10+). Didistribusikan di bawah Lisensi MIT.

WOW.js menampilkan animasi CSS saat Anda menggulir halaman ke bawah. Secara default, Anda harus menggunakan tindakan ini untuk menjalankan animate.css, namun Anda dapat dengan mudah mengubah pengaturan ini.

Parallax.js adalah solusi ringkas untuk menciptakan efek paralaks. Perpustakaan juga berfungsi pada ponsel pintar dan tablet (dengan giroskop atau detektor gerakan perangkat keras). Parallax.js memiliki beberapa opsi untuk menyesuaikan efek menggunakan "atribut data" atau melalui JavaScript. Perpustakaan dapat bekerja secara mandiri atau sebagai Plugin JQuery dan Zepto (ada dua versi).

Perpustakaan kecil untuk membuat animasi Berbasis JavaScript. Ini dapat digunakan untuk menganimasikan properti CSS, gambar SVG, atau atribut pohon DOM pada halaman web. Pustaka memungkinkan Anda mengontrol semua aspek animasi dan menyediakan banyak cara untuk menentukan elemen yang perlu digerakkan.

Anda memiliki kendali penuh atas urutan pemutaran animasi dan mengontrol bagaimana animasi berbagai elemen disinkronkan satu sama lain. Perpustakaan mendukung segalanya browser modern, termasuk IE10 dan yang lebih baru.

Dalam rangkaian tutorial ini, Anda akan mempelajari semua fitur Anime.js dan akan dapat menggunakan perpustakaan dalam proyek Anda.

Catatan Jika Anda benar-benar baru mengenal JavaScript, kami sarankan Anda membiasakan diri dengan bahasa pemrograman ini.

Untuk menginstal, Anda dapat menggunakan perintah npm atau bower:

Npm instal animejs bower instal animejs

Anda juga dapat mengunduh perpustakaan dan menyertakan atau menautkannya ke dalam proyek Anda versi terbaru melalui CDN.

Setelah instalasi berhasil, Anda akan dapat menggunakan Anime.js untuk menambahkan animasi yang menarik ke elemen Anda. Mari kita mulai dengan kemampuan dasar perpustakaan.

Untuk membuat animasi menggunakan Anime.js, panggil fungsi anime() dan berikan objek dengan pasangan nilai kunci yang menentukan elemen dan properti target yang ingin Anda animasikan. Anda dapat menggunakan kata kunci target untuk memberi tahu perpustakaan apa yang Anda perlukan untuk dianimasikan. Kata kunci ini dapat mengambil nilai dalam format berbeda.

Pemilih CSS: Anda dapat meneruskan satu atau lebih penyeleksi sebagai nilai kata kunci target.

Var biru = anime(( target: ".biru", terjemahanY: 200 )); var redBlue = anime(( target: ".red, .blue", TranslateY: 200 )); var even = anime(( target: ".square:nth-child(even)", TranslateY: 200 )); var notRed = anime(( target: ".square:not(.red)", TranslateY: 200 ));

Dalam kasus pertama, Anime.js akan menganimasikan semua elemen dengan kelas biru. Yang kedua - biru atau merah. Dalam kasus ketiga, Anime.js akan menganimasikan semua elemen anak genap dengan class square . Dan masuk kasus terakhir perpustakaan akan berinteraksi dengan semua elemen dengan kelas persegi yang tidak memiliki kelas merah.

Node DOM atau NodeList: Anda juga dapat menggunakan node DOM atau NodeList sebagai nilai untuk kata kunci target. Lihat contoh penggunaan node DOM untuk target.

Var spesial = anime(( target: document.getElementById("khusus"), TranslateY: 200 )); var blue = anime(( target: document.querySelector(".blue"), TranslateY: 200 )); var redBlue = anime(( target: document.querySelectorAll(".red, .blue"), TranslateY: 200 )); var even = anime(( target: document.querySelectorAll(".square:nth-child(even)"), TranslateY: 200 )); var notRed = anime(( target: document.querySelectorAll(".square:not(.red)"), TranslateY: 200 ));

Dalam kasus pertama, fungsi getElementById() digunakan untuk mengakses elemen tertentu. Fungsi querySelector() digunakan untuk mengakses elemen dengan kelas blue . Dan fungsi querySelectorAll() digunakan untuk mengakses semua elemen dalam dokumen yang cocok dengan sekelompok penyeleksi tertentu atau, sebaliknya, tidak termasuk di dalamnya.

Ada banyak fungsi yang juga bisa Anda gunakan untuk memilih elemen target. Misalnya, Anda bisa mengakses elemen dengan kelas tertentu menggunakan fungsi getElementsByClassName(). Atau ke elemen dengan tag tertentu menggunakan fungsi getElementsByTagName().

Fungsi apa pun yang mengembalikan node DOM atau NodeList dapat digunakan untuk menetapkan nilai target di Anime.js.

Objek: Anda dapat menggunakan objek JavaScript sebagai nilai untuktargets . Kunci objek ini digunakan sebagai pengidentifikasi, dan nilainya digunakan sebagai nomor untuk dianimasikan.

Anda kemudian dapat menampilkan animasi di dalam elemen HTML lain menggunakan kode JavaScript tambahan. Di bawah ini adalah contoh menganimasikan nilai dua kunci yang berbeda satu objek.

Var filesScanned = (hitungan: 0, terinfeksi: 0); var scanning = anime(( target: filesScanned, hitungan: 1000, terinfeksi: 8, putaran: 1, update: function() ( var scanCount = document.querySelector(".scan-count"); scanCount.innerHTML = filesScanned.count ; var terinfeksiCount = document.querySelector(".infected-count");

Kode di atas akan mengarahkan penghitung file yang dipindai dari 0 hingga 1.000 dan penghitung file yang terinfeksi dari 0 hingga 8. Ingatlah bahwa Anda dapat menganimasikan nilai numerik hanya cara. Jika Anda mencoba menganimasikan kunci dari AAA ke BOY, pesan kesalahan akan ditampilkan.

Selain itu, kode tersebut menggunakan fungsi tersebut panggilan balik kunci pembaruan, yang dipanggil setiap frame selama animasi. Di sini digunakan untuk memperbarui jumlah file yang dipindai dan terinfeksi. Namun, Anda dapat melangkah lebih jauh dan menampilkan pesan kesalahan kepada pengguna ketika jumlah file yang terinfeksi melebihi ambang batas tertentu.

Array: kemampuan untuk menentukan susunan JavaScript target akan berguna jika Anda perlu menganimasikan banyak elemen yang berhubungan dengannya kategori yang berbeda. Misalnya, jika Anda ingin menganimasikan node DOM, objek, dan berbagai elemen lainnya berdasarkan pemilih CSS, Anda dapat melakukannya dengan menempatkannya dalam array, lalu mendefinisikan array tersebut sebagai nilai untuktargets . Contoh di bawah ini seharusnya memperjelas.

Var multipleAnimations = anime(( target: , TranslateY: 250 ));

Sekarang Anda tahu cara mengidentifikasi berbagai elemen yang perlu dianimasikan. Saatnya mencari tahu properti dan atribut mana yang bisa dianimasikan saat menggunakan perpustakaan.

Ini termasuk, misalnya, lebar, tinggi, dan warna untuk elemen target yang berbeda. Nilai akhir dari berbagai properti animasi seperti warna latar ditentukan menggunakan lowerCamelCase. Jadi background-color menjadi backgroundColor . Kode di bawah ini menggambarkan animasi posisi objek sebelah kiri dan warna latar belakang (backgroundColor) objek target.

Var animateLeft = anime(( target: ".square", kiri: "50%" )); var animateBackground = anime(( target: ".square", backgroundColor: "#f96" ));

Properti dapat mengambil jenis yang berbeda nilai-nilai yang akan mereka ambil menggunakan CSS biasa. Misalnya, properti left dapat memiliki nilai berikut: 50vh , 500px atau 25em . Anda juga dapat menghilangkan satuan pengukuran setelah angka, namun dalam hal ini akan menjadi px secara default. Tindakan serupa dapat dilakukan dengan background-color , menentukan warna sebagai nilai heksadesimal atau menggunakan kode RGB atau HSL.

Transformasi sepanjang sumbu X dan Y dicapai dengan menggunakan properti TranslateX dan TranslateY. Demikian pula, Anda dapat menskalakan, memiringkan, atau memutar elemen sepanjang sumbu tertentu menggunakan properti skala, miring, atau memutar yang sesuai dengan sumbu tertentu.

Hal ini dimungkinkan untuk menentukan sudut yang berbeda baik dalam derajat, atau menggunakan properti turn. Nilai putaran 1 sama dengan 360 derajat. Hal ini membuat penghitungan lebih mudah karena Anda mengetahui seberapa besar rotasi elemen relatif terhadap sumbunya. Contoh di bawah ini menunjukkan cara menganimasikan penskalaan, transisi, atau rotasi suatu properti atau semuanya sekaligus.

Var animateScaling = anime(( target: ".square", skala: 0.8 )); var animateTranslation = anime(( target: ".square", TranslateX: window.innerWidth*0.8 )); var animateRotation = anime(( target: ".square", putar: "1turn" )); var animateAll = anime(( target: ".square", skala: 0.8, TranslateX: window.innerWidth*0.8, putar: "1turn" ));

Satu-satunya syarat adalah nilai atribut harus berupa numerik. Kemampuan untuk menganimasikan berbagai atribut membuka kemungkinan untuk menciptakan beberapa efek keren. Karena artikel ini hanya untuk tujuan informasi, maka akan berisi contoh-contoh sederhana.

Materi ini dikhususkan untuk animasi pada halaman HTML, performa animasi, prospek penggunaan, serta animasi dalam HTML5 aplikasi seluler dan permainan.

Pertama-tama, mari kita mulai dengan melihat animasi JS halaman HTML. Animasi dalam JavaScript dapat dilakukan dengan setInterval, yang dengannya Anda dapat mengatur frame statis per detik, atau menggunakan fungsi reguler yang pada akhirnya memanggil dirinya sendiri atau dengan window.requestAnimationFrame.

Di Sini logika sederhana animasi berfungsi di JS:

var el=document.getElementById("elem");
mar=10; //data awal statis
//siklus dimulai
mar=mar+1;
el.style.marginLeft=mar+"px";
//perulangan berakhir

Keindahan JS adalah Anda bisa dengan cara yang nyaman perluas alat asli dan gunakan, misalnya, animasi jQuery atau gunakan Velocity. Hal ini secara signifikan mempercepat produktivitas. Namun, secara khusus, Velocity tidak menggunakan JS untuk animasinya, tetapi animasinya sendiri dilakukan dalam CSS, yang akan dibahas di bawah.

Tidak mungkin untuk tidak menyebutkannya Animasi SVG. Dia sendiri sangat baik, tapi browser seluler itu tidak berhasil. Atau lebih tepatnya, hanya SMIL yang berfungsi di Android 3.0-lebih tinggi. Meskipun tidak menyenangkan untuk dikatakan, SVG sendiri bekerja dalam metode WebView, tetapi segala sesuatu yang berhubungan dengan animasi ada di tag ini, sayangnya...

Di mana pun dia bekerja, dia menunjukkannya kinerja yang baik. Lihat sendiri.