Tema WordPress dengan animasi flash. Cara Menambahkan GIF Animasi ke Postingan WordPress

Definisi dan Aplikasi Metode jQuery DOM

Metode jQuery .wrapAll() membungkus semua elemen (elemen) di set dengan elemen HTML yang dipilih.

Jika Anda perlu menggabungkan setiap elemen yang cocok, atau elemen dalam satu set, dengan elemen HTML yang dipilih, Anda dapat menggunakan metode .wrap().

Sintaks jQuery: Sintaks 1.2: $(selector).wrapAll( elemen pembungkus) Sintaks 1.4: $(selector).wrapAll(function ) Sebelum jQuery 3.0, fungsi dipanggil secara salah untuk setiap elemen dalam kumpulan, ia menerima indeks elemen dalam kumpulan sebagai parameter (mirip dengan .wrap( ) metode).

Ditambahkan di jQuery 1.2 (sintaks diperbarui di 1.4) Nilai parameter Contoh penggunaan Menggunakan metode jQuery .wrapAll() (membungkus elemen HTML)

.violetBorder /* menyetel batas ungu solid dengan ukuran 1 piksel */ )

$("p ").wrapAll(" "); // bungkus semua elemen

Di set ) );

) );

Menangis

Paragraf biasa

Paragraf reguler kedua Paragraf reguler ketiga.

.bungkusSemua()

dalam satu set elemen dengan kelas .violetBorder Hasil serupa dapat dicapai saat membuat elemen DOM:

$("p").bungkusSemua(

dokumen.createElement

("div"));

Hasil dari contoh kita:

Perhatikan bahwa Anda dapat membuat struktur bersarang yang kompleks dengan menggabungkan elemen yang diperlukan dengan beberapa elemen HTML: Menggunakan metode .wrapAll() jQuery (membungkus beberapa elemen HTML)

div ( batas : 1px solid violet ; )

$(document).ready(function ()( $("button ").click(function ()( // mengatur fungsi ketika elemen diklik $("span ").wrapAll("

Dalam contoh ini, menggunakan metode .wrapAll() jQuery, ketika sebuah tombol diklik, kita membungkus semua elemen dalam dokumen dengan beberapa elemen HTML. Perhatikan bagaimana elemen dikelompokkan dan bagaimana alur dokumen berubah.

$("p").bungkusSemua(

Perhatikan contoh berikut di mana kita meneruskan fungsi sebagai parameter ke metode .wrapAll().

Menggunakan metode .wrapAll() jQuery (berfungsi sebagai parameter)

div ( batas : 1 piksel oranye solid ; /* menetapkan batas oranye solid 1 piksel */ )

$(document).ready(function ()( $("button").click(function ()( // mengatur fungsi ketika elemen diklik $("span ").wrapAll(function ()( // wrap semua elemen dalam himpunan $(this).css("color ", "red "); // mengatur warna teks ke elemen pertama dalam himpunan return " "; // mengembalikan nilai fungsi ) ) );

Klik Rentang normal Rentang normal kedua Rentang normal ketiga

Dalam contoh ini, menggunakan metode .wrapAll() jQuery, kita membungkus semua elemen ketika sebuah tombol diklik

Pembaruan terakhir: 11/1/2015

Pada paragraf sebelumnya, kita menyisipkan elemen anak ke dalam elemen yang sudah ada. Tapi kita juga bisa membuat elemen baru dan membungkus elemen yang sudah ada di dalamnya. Metode wrap() dan metode wrapAll() dan wrapInner() serupa digunakan untuk ini. Misalnya, kita mungkin perlu menggabungkan beberapa elemen dalam elemen div baru. Untuk melakukan ini, kami menggunakan metode di atas.

metode bungkus Metode wrap membungkus elemen pilihan dengan elemen yang diteruskan sebagai argumen metode ini

. Ini memiliki kasus penggunaan berikut:

wrap("html markup") : membungkus elemen pilihan dalam elemen yang dibuat dari markup html

wrap(element) : membungkus elemen pilihan dalam elemen html yang diteruskan sebagai parameter

wrap("selector") : membungkus elemen pilihan dalam elemen dokumen yang cocok dengan pemilih

wrap(jQuery) : Membungkus elemen pilihan dalam objek jQuery

wrap(function) : membungkus elemen pilihan dalam objek yang dikembalikan oleh fungsi

• Katakanlah kita memiliki markup berikut:
• Jawa

C/C++

Mari kita bungkus daftarnya menggunakan metode bungkus:

• Katakanlah kita memiliki markup berikut:
• Jawa

$(".langs").wrap("");

Dengan cara serupa, kita dapat menggunakan metode wrap dengan cara lain:

Var header = dokumen.getElementById("header");

$(".langs").wrap(tajuk);

Untuk menggabungkan semua elemen seleksi secara keseluruhan menjadi satu elemen, gunakan metode wrapAll. Ini memiliki kasus penggunaan serupa:

wrapAll("html markup") : Membungkus semua elemen pilihan menjadi satu elemen yang dihasilkan dari markup html

wrapAll(element) : membungkus semua elemen pilihan menjadi satu elemen html yang diteruskan sebagai parameter

wrapAll("selector") : membungkus semua elemen pilihan menjadi satu elemen yang cocok dengan pemilih

wrapAll(jQuery) : Membungkus semua elemen pilihan menjadi satu objek jQuery

Misalnya, kami memiliki markup berikut:

Java C/C++ PHP

Mari kita gabungkan semua elemen ini menjadi satu elemen div:

$(".lang").wrapAll("");

Setelah itu, markupnya akan terlihat seperti ini:

Java C/C++ PHP

metode wrapInner

Untuk menggabungkan isi elemen menjadi elemen baru, gunakan metode wrapInner. Ini memiliki kasus penggunaan berikut:

wrapInner("html markup") : Membungkus konten elemen pilihan dalam elemen yang dibuat dari markup html

wrapInner(element) : membungkus konten elemen pilihan dalam elemen html yang diteruskan sebagai parameter

wrapInner("selector") : Membungkus konten elemen pilihan ke dalam elemen dokumen yang cocok dengan pemilih

wrapInner(jQuery) : membungkus konten elemen pilihan dalam objek jQuery

wrapInner(function) : membungkus konten elemen pilihan dalam objek yang dikembalikan oleh fungsi

Markup awal akan terlihat seperti ini:

• Katakanlah kita memiliki markup berikut:
• Jawa

Bungkus konten elemen daftar dalam tag

$("li.lang").wrapInner("");

Markup terakhir akan terlihat seperti ini:

Di manakah web saat ini jika bukan karena terobosan teknologi besar yang dihadirkan jQuery? Saat kami perlahan-lahan beralih ke lingkungan JS yang lebih asli, dengan dirilisnya ES6 dan sejenisnya, kami juga belajar cara menggunakan teknik jQuery baru dan lama sehubungan dengan yang baru kerangka kerja yang kami gunakan dalam alur kerja kami. Dengan lebih dari satu dekade tertinggal sekarang, jQuery tetap menjadi perpustakaan JavaScript paling konsisten yang pernah dibuat. Ini berfungsi dengan baik dalam membuat pengalaman web menjadi dinamis. Surat cinta ini adalah contoh bagus dari dedikasi pengembang front-end terhadap perpustakaan ini. Ini menunjukkan betapa besarnya kegembiraan yang telah diberikan kepada masyarakat.

Sama seperti JavaScript, jQuery selalu berkembang. Ada jQuery 3, versi perpustakaan yang lebih modern dan dioptimalkan. Ini memberikan peningkatan kinerja, fitur baru, dan lebih banyak cara untuk membangun web dinamis. Yang berikut ini memiliki akar hingga ke jQuery asli: , .

Sekarang, mari beralih ke tema postingan sebenarnya: animasi jQuery. Web animasi semakin populer dengan cepat. Animasi membuat web dinamis dan interaktif. Dalam banyak hal, mereka menambah rentang perhatian pengguna saat berinteraksi dengan konten web Anda. Membuat elemen animasi dan antarmuka terkait desain web lainnya dari awal terbukti sulit, bahkan menyakitkan. Yang membantu di sini adalah rekap apa yang dilakukan orang lain dengan animasi jQuery mereka dan apa yang mereka bagikan tentang proses menjadikan UI Anda pengalaman interaktif. Tentu saja, ini membutuhkan banyak usaha, tetapi seiring kemajuan jQuery, tugas menciptakan sesuatu menjadi jauh lebih efisien dan efektif.

Dalam desain web, struktur bangunan hal baru dibagi menjadi dua bagian berbeda. Yang pertama adalah pengembang bawah tanah yang fokus mempelajari bahasa tertentu dan melampaui batasnya. Yang kedua adalah perusahaan dan bisnis besar yang memiliki sumber daya yang diperlukan untuk membuat konten unik dan mengubah permainan, seperti animasi unik. Misalnya, Twitter menggunakan ikon hati animasi. Ini adalah masalah besar karena jutaan orang menggunakan Twitter. Karena banyak sekali orang yang melihat animasi ini, Anda mendapat gambaran bahwa menggunakan konten visual dinamis dalam situs web menjadi lebih aman dan membuat pengguna menghargainya. Di sini, di demo ini, Tympanus menggambarkan cara menggunakan perpustakaan mo.js (selanjutnya) untuk membuat animasi interaktif yang memiliki efek kejutan.

Unduh

mo.js (motion) adalah perpustakaan JS yang ingin mengubah cara desainer membuat animasi untuk web. Sejujurnya, hanya beberapa demo yang tersedia, namun demo itu sendiri mencerminkan kemiripan yang sangat besar, dengan konten yang lebih terlihat seperti di kotak TV daripada di situs web. Dengan mo.js, konten web Anda tiba-tiba menjadi sangat dapat disesuaikan. Hal ini juga lebih kaya melalui penggunaan animasi dan lebih rapi untuk audiens modern. Perpustakaan ini menonjol dengan kinerja yang cepat dan lancar, dengan API fleksibel yang membuat pengembangan animasi menjadi proses yang mudah. Ini mendukung pengembangan modular, memungkinkan Anda untuk hanya menggunakan bagian perpustakaan yang Anda perlukan. Proyek ini bersifat open-source dan mendorong masukan dari komunitas. Hal ini menyebabkan rilis versi baru dan lebih kuat dari perpustakaan animasi ini lebih cepat.

Unduh

Startup dan usaha kecil maju dengan kemampuan pengembangan modern. Jadi, kami terus-menerus dihadapkan pada cara-cara baru dalam menampilkan konten situs web. Ketika paralaks pertama kali muncul, itu adalah hal yang sangat besar. Sekarang, pengembang sedang mencari cara untuk membuat semua halaman menjadi interaktif dan mengalir satu sama lain. Efeknya disebut tumpukan Polaroid, yaitu kisi-kisi gambar yang bergerak di sepanjang halaman saat Anda menggulir ke atas dan ke bawah. Misalnya, tumpukan Polaroid dapat berpindah dari satu elemen ke elemen berikutnya tanpa kehilangan fokus. Cukup banyak situs web yang sudah menggunakan teknik ini. Tim Tympanus melihat satu startup tertentu yang menggunakan metode ini dan menjelaskan secara rinci bagaimana mencapai efek yang sama pada situs web/proyek Anda.

Unduh

Eksposur desain material meningkat dari menit ke menit. Ini menyediakan banyak cara untuk bermain-main dengan konten. Dengan kombinasi JS dan CSS yang bagus, hasilnya benar-benar dapat mengubah keadaan. Ini sangat menarik bagi pengembang modern. Bhakti Al Akbar telah mengkodekan “Animasi Gulir Material,” sebuah efek gulir yang dibuat dengan desain material yang pertama-tama menampilkan tajuk konten yang akan Anda lihat dan kemudian menawarkan tombol geser sederhana yang akan mengungkap konten sebenarnya dari tajuk tersebut. Hal ini menciptakan pengalaman menarik dalam menjelajahi konten baru. jQuery adalah “bahasa.

Unduh

Semakin cepat semakin baik, atau setidaknya, semakin lancar semakin baik! Smooth adalah nama lain dari properti CSS3 modern, juga HTML5. Kelancaran itulah yang membuat situs web menonjol. Inilah yang terus diupayakan oleh para pengembang front-end. Tayangan slide Lingkaran Elastis bisa menjadi tayangan slide paling halus hingga saat ini. Ini menggeser item dengan cepat tanpa menyebabkan kehilangan perhatian atau ketidaknyamanan lainnya bagi pengguna. Kami melihat tayangan slide khusus ini sebagai alternatif yang bagus untuk situs desktop dan seluler. Untuk menjelajahi efek animasi jQuery yang hebat ini sepenuhnya, Anda perlu mengunduh kode sumber lengkap.

Unduh

jQuery sangat dihargai oleh mereka yang bekerja dengan segala sesuatu yang berhubungan dengan statistik, analitik, dan analisis. jQuery benar-benar bisa bersinar di area tersebut. Ini dapat membantu untuk membuat elemen tertentu dalam versi yang lebih fleksibel. Potongan kode khusus ini benar-benar membuat kami penasaran. Ettrics adalah pengguna PRO di CodePen, berbagi hal-hal hebat, khususnya Grafik Batang Interaktif, cara baru menggunakan animasi untuk memperkuat bagan dan grafik Anda. Grafik Batang Interaktif memungkinkan Anda menyusun garis waktu data yang berbeda. Dengan tindakan interaktif (seperti klik mouse), temukan data tertentu tentang grafik batang tertentu. Ini adalah cara yang bagus untuk membicarakan permainan olahraga dan permainan lain di mana pemain mengandalkan statistik hasil.

Unduh

Pustaka ini adalah pendekatan unik untuk berpindah dan membalik konten web Anda. Menu tarik-turun di demo menyediakan lebih dari 50+ pilihan unik cara menganimasikan konten Anda. Pengkodean yang hati-hati diperlukan di sini karena sangat kecil kemungkinannya halaman besar dan dinamis akan dimuat secepat itu melalui animasi sederhana. Namun, bagi mereka yang ingin menggunakan ini dengan kisi-kisi gambar dan galeri, silakan saja. Ini adalah salah satu solusi interaktif terbaik yang ada.

Unduh

Segmen adalah kelas JavaScript yang memungkinkan pengembang menggambar dan menganimasikan jalur SVG. Hal ini, pada gilirannya, memungkinkan mereka membuat konten visual animasi SVG. Ini telah menjadi perpustakaan yang sangat dimanfaatkan dalam perkembangan modern, berkat fleksibilitas dan kemudahan penggunaannya. Tutorial di sini menunjukkan cara menggunakan Segmen secara langsung untuk membuat ikon SVG animasi pada menu navigasi situs Anda. Ini adalah bagian terpenting dari situs web mana pun. Setelah Anda mempelajari tutorial ini dan memahami cara kerja Segmen + SVG, Anda akan lebih mampu mengatasi situasi lain yang memerlukan konten animasi. Selain itu, jQuery membuat proses ini lancar.

Unduh Popmotion-Mesin Gerak JavaScript

Popmotion menghadirkan fisika rumit ke alur kerja desain web Anda. Namun, tidak sulit untuk memahami cara kerjanya. Animasi, gerakan fisika, dan pelacakan input adalah tiga contoh utama yang dapat dilihat di halaman web Popmotion. Popmotion digunakan untuk menggerakkan gerakan antarmuka pengguna. Ini memiliki dukungan asli untuk CSS, atribut DOM, dan jalur SVG dan SVG. Ini dapat digunakan dengan API apa pun yang menerima nilai numerik. Ini adalah salah satu perpustakaan paling menyenangkan yang bisa Anda gunakan untuk menangani masalah-masalah khusus ini.

Unduh

jQuery memiliki mesin animasinya sendiri untuk transformasi dan hal keren lainnya. Jadi, tidak mengherankan jika DrawSVG ada. Ini adalah perpustakaan jQuery untuk menganimasikan jalur konten SVG. Ini ringan dan meminta Anda menentukan jalur dan membiarkan perpustakaan melakukan sisanya.

Unduh Dynamics.js – Pustaka JavaScript untuk membuat animasi berbasis fisika

Dynamics.js adalah perpustakaan yang berkembang untuk ilmuwan data, dan kelompok penambang data, tetapi semua orang yang tertarik dengan mesin animasi yang didasarkan pada fisika sebenarnya. Michaël Villar, penulis perpustakaan, telah membangun proyek sampingan menarik yang ternyata menjadi perpustakaan jQuery superstar untuk membuat animasi terkait fisika di web. Apapun itu, perpustakaan ini bisa mengurusnya. Dynamics.js memungkinkan Anda menganimasikan properti CSS, elemen DOM, properti SVG, dan objek JavaScript jenis apa pun. Perpustakaan dinamis seperti itu sulit didapat.

Unduh

Kami menyukai pendekatan Iconate.js, ini adalah cara unik untuk menggabungkan ikon font yang ada, menambahkan efek JS yang ada, dan menggabungkan alat/platform unik. Iconate.js memungkinkan Anda memilih dua ikon berbeda, ikon pertama, dan ikon kedua, memberi Anda opsi untuk memilih di antara berbagai jenis efek pudar, lalu menguji seperti apa tampilannya. Jadi, begitu Anda mengklik ikon pertama, akan muncul efek fade, sambil berpindah dari ikon #1 ke ikon #2. Ini bisa sangat berguna untuk membuat transisi panah dan tombol di situs web Anda.

Unduh D3.js – Dokumen Berbasis Data

Apa yang awalnya merupakan proyek dengan harapan besar, ternyata menjadi salah satu proyek JS paling sukses sepanjang masa. D3 adalah perpustakaan JS untuk web, yang memungkinkan untuk memanipulasi berbagai jenis dokumen berdasarkan data aktual. Apapun jenis data yang Anda miliki, dengan D3.js Anda dapat menggabungkan kekuatan HTML5, CSS3, dan SVG untuk menciptakan paparan data yang menakjubkan untuk browser Anda. D3 menyediakan komponen visual kompleks yang dapat Anda gunakan untuk menampilkan data dalam berbagai cara, namun setiap pengguna D3 berpengalaman akan mengetahui bahwa perpustakaan ini juga sangat berfokus pada animasi, mencari transisi animasi saat membaca dokumentasi dan artikel online.

Unduh

Ingin menganimasikan beberapa peristiwa sekaligus, tidak yakin bagaimana caranya? Animatic.js memungkinkan Anda menganimasikan seluruh situs web Anda, sambil memberikan pengaturan dan pendekatan animasi unik pada setiap elemen.

Unduh

Spinner dan loader adalah cara mudah untuk membuat situs web Anda terasa lebih hidup, sedikit lebih cerah. FakeLoader.js ingin setiap orang memiliki akses ke loader dan spinner sederhana yang dapat mereka tambahkan sebagai transisi dari halaman ke halaman. Asyiknya, mengintegrasikan perpustakaan ini sangat mudah bahkan pengguna WordPress pun bisa melakukannya, perpustakaan yang begitu indah, sayang sekali jika tidak memanfaatkannya.

Unduh

Kami senang ketika pengembang menyebut produk mereka 'ajaib', dalam banyak hal hal ini benar-benar ajaib, terutama bagi mereka yang belum berpengalaman dengan pengembangan web. Pustaka ScrollMagic memungkinkan Anda melakukan animasi tertentu, berdasarkan posisi penempatan gulir pengguna saat ini. Anda dapat menggunakan ScrollMagic untuk memicu, atau meluncurkan animasi tertentu, setelah pengguna mencapai bagian tertentu dari situs web; berdasarkan bilah gulirnya. Gabungkan elemen situs web tertentu ke lokasi tertentu dan biarkan di sana berdasarkan pergerakan pengguna, atau pindahkan ke samping pengguna. ScrollMagic juga membantu menambahkan Parallax ke situs web Anda, dan melakukan hal keren lainnya.

Unduh Perpustakaan Animasi Premium untuk jQuery

Tidak mudah menjadi pengembang gratis, namun pujian yang diterima dari komunitas sering kali lebih besar daripada waktu berjam-jam yang dihabiskan untuk membangun sesuatu yang benar-benar menakjubkan, dan tentu saja — perpustakaan dan contoh terkait animasi memakan waktu lama, dan banyak hal. pengujian untuk membuatnya benar. Jadi, ini merupakan dukungan besar bagi para pengembang dan desainer yang karyanya telah dibagikan dalam pengumpulan ini sejauh ini, sekarang saatnya untuk beralih ke alat dan perpustakaan premium, dan lihat apa lagi yang dapat kita temukan yang secara aktif dibuat dan dipersiapkan oleh orang-orang. penjualan. Silakan nikmati perpustakaan berikut ini sama seperti Anda menikmati perpustakaan gratis.

Penggeser Transisi

Jika Anda mencari cara untuk meningkatkan pengalaman situs web Anda, Anda mungkin ingin menambahkan penggeser yang rapi dan modern. Letakkan di halaman pertama, di paro atas, dan Anda dapat menciptakan kesan pertama yang kuat yang akan mendorong semua pengunjung Anda untuk terus menjelajah dan mempelajari lebih lanjut tentang keberadaan online Anda. Alat tersebut dulunya adalah Transition Slider. Ini menawarkan banyak efek transisi berbeda yang akan membuat semua orang terpesona. Plugin ini bekerja sangat baik dengan konten gambar dan video, memastikan dampak yang kuat.

Sekilas, Transition Slider sama seperti slider klasik lainnya. Namun, begitu Anda tersadar dengan fitur dan fungsi canggih yang dimilikinya, segalanya akan menjadi sejarah. Ini juga sepenuhnya dapat disesuaikan untuk menyempurnakan dan membuatnya mengikuti kebutuhan web Anda. Ini juga berfungsi di semua perangkat seluler dan browser web modern. Tambahkan tayangan slide dan buat perbedaan.

Unduh Pave

Daripada membuat latar belakang Anda kusam dan membosankan, lakukan perubahan dengan Pave. Ini adalah alat sederhana untuk digunakan yang akan membuat latar belakang isometrik interaktif. Pave menciptakan pengalaman menyenangkan yang akan membuat tamu Anda bertahan lebih lama. Mereka bahkan mungkin bermain-main dengan efek tersebut selama beberapa waktu sebelum mereka menggali lebih dalam konten Anda. Percayalah, itu terjadi pada saya ketika saya membuka halaman pratinjau langsung Pave. Cobalah dan lihat sendiri.

Beberapa fitur Pave adalah efek 3D, animasi luar biasa, kesiapan seluler 100%, dan kompatibilitas lintas-browser penuh. Proses instalasi, serta pengelolaan dan pemeliharaannya, sangatlah mudah. Tentu saja, Anda dapat mengubah tata letak sesuai keinginan Anda dan paling sesuai dengan kebutuhan Anda. Dengan kata lain, tingkatkan branding Anda ke tingkat yang benar-benar baru dengan Pave dan tingkatkan pengalaman pengguna Anda.

Unduh

Efek hover adalah saat Anda menyeret kursor ke ikon atau objek dan melakukan semacam animasi. Dan beberapa lebih keren dari yang lain. Untuk mendapatkan efek hover terbaik di situs web Anda, Magic Hover JS adalah plugin spektakuler yang akan membantu Anda.

Magic Hover JS menghadirkan banyak opsi berbeda yang dapat Anda manfaatkan. Dengan Magic Hover JS, Anda akan menarik perhatian semua orang dan bahkan meningkatkan perasaan banyak orang (baca senyuman). Nah, jika hati pecinta ayam dan pizza yang menggemaskan itu tidak membuat Anda tersenyum, teruslah melihat contoh lainnya, sesuatu yang pasti akan membuat Anda bersemangat. Singkatnya, Magic Hover JS adalah plugin jQuery, dengan instalasi yang mudah dan banyak pilihan untuk dipilih. Terkadang, detaillah yang akan membantu Anda membedakan diri Anda dari orang lain.

Unduh Miniatur Bumi

Yang berikutnya ini pasti akan menarik minat Anda. Dan ini akan bekerja paling baik jika Anda terlibat dalam beberapa jenis proyek yang berhubungan dengan perjalanan, bahkan pendidikan, permainan, cuaca, dan berita. Faktanya, imajinasi Andalah yang akan menentukan untuk apa Anda ingin menggunakan Miniatur Bumi. Dan nama pluginnya cukup jelas. Ini tidak lain adalah globe 3D interaktif untuk JavaScript. Apa yang sangat keren tentang plugin ini adalah kenyataan bahwa hanya ada satu file untuk dimuat – tidak ada kekacauan.

Anda dapat menggunakan banyak variasi globe interaktif berbeda yang akan meningkatkan pengalaman. Misalnya, Anda dapat menulis tentang petualangan perjalanan Anda dan saat pengguna menggulir dan membaca konten, Miniatur Bumi berkomunikasi, memutar, dan menampilkan properti animasi. Miniatur Bumi juga memiliki penanda bawaan, namun Anda dapat menyesuaikan desainnya hingga sesuai dengan peraturan merek Anda.

Unduh

Sungguh kumpulan perpustakaan, skrip, dan plugin yang luar biasa yang mendukung animasi dengan jQuery. Tentu saja, kami tidak bisa hanya mengambil pendekatan dengan membuat postingan sederhana yang menampilkan 'contoh' animasi jQuery, kami ingin pengguna kami merasa nyaman saat membuat animasi jQuery Anda sendiri, dan menggunakannya di dalamnya. UI dan UX Anda.

Terima kasih telah mengunjungi Colorlib dan membaca artikel ini! Kami sangat menghargainya! Sekarang Anda mungkin ingin mempelajari cara menggunakan gratis kami.

Alex adalah seorang penulis lepas dengan pengalaman lebih dari 10 tahun di bidang desain, pengembangan, dan bisnis kecil. Karyanya telah ditampilkan dalam publikasi seperti Entrepreneur, Huffington Post, TheNextWeb, dan lainnya. Anda dapat menemukan tulisan pribadinya di The Divine Indigo.

Pengungkapan: Halaman ini berisi tautan afiliasi eksternal yang dapat mengakibatkan kami menerima komisi jika Anda memilih untuk membeli produk yang disebutkan. Pendapat di halaman ini adalah milik kami sendiri dan kami tidak menerima bonus tambahan untuk ulasan positif.

Animasi untuk situs web menarik perhatian pengguna ke berbagai bagian halaman. Anda dapat menggunakannya untuk produk atau menyorot tombol ajakan bertindak. Animasi « menjadi hidup” saat menggulir halaman, yang membuat penyajian konten menjadi lebih menarik, bersemangat, catchy, dan progresif.

Animasi CSS jauh lebih ringan dibandingkan elemen video dan flash; itu dimuat dengan sangat cepat dan didukung oleh sebagian besar browser modern.

Anda dapat memasukkan animasi secara manual ke dalamnya Tema WordPress. Mari kita lihat bagaimana Anda dapat dengan mudah menambahkan animasi CSS ke situs WordPress Anda.

Menyiapkan plugin CSS Animate IT

Kami akan menggunakan plugin khusus. Ini memungkinkan Anda membuat animasi CSS untuk situs HTML melalui editor visual.

Instal dan aktifkan plugin di situs resmi Animate it.

Setelah itu, buat entri baru dan Anda akan melihatnya di panel editor visual tombol baru dengan tulisan “Animasi! ":

Ketika Anda mengkliknya, jendela pop-up akan muncul di mana Anda dapat mengaturnya gaya CSS animasi. Plugin ini mendukung banyak efek, jadi Anda memiliki banyak pilihan:

Sebelum Anda menambahkan animasi ke situs Anda, Anda harus memilih gayanya. Setelah ini, Anda perlu memilih waktu tunda animasi dan durasinya. Dan terakhir, Anda perlu memilih tindakan yang akan memicu animasi.

Plugin ini menawarkan tiga opsi: saat klik mouse, arahkan mouse, atau gulir halaman:

Klik tombol "Animate it" untuk menerapkannya pratinjau animasi.

Kemudian klik tombol Sisipkan untuk menambahkan animasi ke postingan atau halaman Anda. Anda akan melihat bahwa plugin telah menambahkan kode pendek dengan contoh teks di editor posting:

Anda perlu menghapus konten di dalam kode pendek, dan menggantinya dengan teks, gambar, atau apa pun yang ingin Anda animasikan:

Kami harap artikel ini membantu Anda mempelajari betapa mudahnya membuat animasi untuk situs WordPress Anda.

Jangan lupa untuk menulis komentar Anda jika Anda menyukai artikel tersebut. Beberapa kata darimu, dan pengakuan dariku mesin pencari bahwa saya menulis artikel manusia biasa. Terima kasih sebelumnya!

(English Graphics Interchange Format - format untuk bertukar gambar) adalah format gambar grafik raster populer yang mampu menyimpan data terkompresi tanpa kehilangan kualitas dalam format tidak lebih dari 256 warna.

Format GIF didukung gambar animasi. Mereka mewakili urutan beberapa frame statis, serta informasi tentang berapa lama setiap frame harus ditampilkan di layar.

GIF animasi menjadi sangat populer di Internet akhir-akhir ini; format ini memungkinkan Anda memasukkan fragmen video pendek kecil dalam satu lingkaran. Namun jika Anda mencoba menambahkan GIF animasi ke situs WordPress Anda, sering kali gambar tersebut dapat berubah menjadi gambar statis biasa.

Dalam tutorial ini, kita akan melihat kapan GIF animasi berubah menjadi gambar biasa, cara menghindarinya, dan cara memasukkan GIF Animasi dengan benar ke dalam postingan WordPress Anda.

Mengapa GIF Animasi menjadi gambar statis di WordPress?

WordPress memiliki Perpustakaan File Media bawaan yang nyaman, yang melaluinya Anda dapat mengunggah dan menambahkan gambar baru ke situs. Saat Anda mengunggah gambar baru, WordPress secara otomatis membuat banyak salinan gambar tersebut dalam ukuran berbeda.

WordPress membuat 3 salinan gambar:

• Gambar kecil (Gambar kecil)
• Sedang
• Besar

Selain itu tentunya gambar aslinya tetap dalam ukuran penuh.

Jadi, inilah masalahnya Animasi GIF adalah WordPress, saat mengunduh dan membuat salinan file semacam itu, hanya menyimpan frame pertama dari animasi ini sebagai salinan untuk ukuran thumbnail, sedang dan besar.

Dan jika Anda memasukkan GIF ini ke dalam postingan Anda dalam salah satu ukuran ini, Anda akan mendapatkan gambar statis dengan frame pertama, bukan animasi.

Cara Menambahkan GIF Animasi di WordPress dengan Benar

Dalam mode pengeditan postingan, unggah GIF Anda dengan mengklik tombol Tambahkan media:

Setelah mengunduh file, pilih ukurannya dari menu drop-down di kanan bawah di blok Pengaturan tampilan file.

Satu-satunya pilihan animasi gambar yang dapat digunakan adalah ukuran penuh.

Cukup pilih "Penuh" dan masukkan gambar ke postingan WordPress Anda.

Ukuran penuh adalah file GIF asli asli, yang tidak dimodifikasi oleh WordPress saat membuat salinan yang lebih kecil, dan sayangnya, ini adalah satu-satunya opsi yang tetap berfungsi.

Ketidaknyamanan dengan GIF Animasi di WordPress

Ketidaknyamanan yang paling penting dalam situasi ini adalah resolusi (ukuran dalam px) dari file GIF asli.

Jika, katakanlah, GIF Anda memiliki lebar 700 px, dan lebar kolom postingan utama untuk topik Anda adalah 650 px, maka GIF yang dimasukkan ke dalam postingan akan melampaui kolom tersebut, dan akan terlihat sangat jelek.

Dalam hal ini, Anda harus mengedit dan mengurangi resolusi file GIF di komputer Anda ke ukuran yang diinginkan sebelum mengunggahnya ke WordPress.

Gambar GIF animasi cenderung memakan lebih banyak ruang. Ini karena mereka pada dasarnya terdiri dari serangkaian gambar statis yang digabungkan menjadi satu. Semakin banyak frame dalam animasi, semakin besar ukuran file akhirnya.

Oleh karena itu, tidak disarankan untuk terlalu terbawa oleh GIF Animasi dan menambahkan banyak file seperti itu dalam satu halaman. Ini hanya akan menambah bobot halaman tersebut ke ukuran yang tidak wajar, dan juga akan menambah waktu pemuatan. Tidak ada yang menyukai ini: baik pengunjung, mesin pencari, maupun Anda sendiri.

Jika Anda menggunakan Giphy untuk mencari gambar animasi, cobalah plugin Giphypress gratis. Dengan bantuannya, Anda dapat mencari gambar GIF apa pun di database Giphy dan memasukkannya ke situs WordPress Anda tanpa meninggalkan area admin.

Kami harap kami telah membantu Anda mengetahui cara menambahkan GIF Animasi dengan benar ke postingan WordPress.