Cara Membuat Animasi GIF dan Menambahkannya ke HTML
Terakhir Diperbarui pada 22 November 2023 by Peter Wood
Dalam dunia desain web dan pembuatan konten yang terus berkembang, kemampuan untuk menggabungkan visual dan animasi yang menarik ke dalam halaman web adalah keterampilan yang berharga. GIF adalah salah satu bentuk animasi yang paling menarik dan banyak digunakan di Internet. Baik Anda ingin menambahkan humor, membuat elemen interaktif, atau sekadar meningkatkan daya tarik visual situs web Anda, mengetahui cara menambahkan GIF ke HTML adalah keterampilan penting bagi pengembang web atau pembuat konten mana pun. Dalam contoh panduan ini, Anda akan dipandu melalui langkah-langkah dengan lancar mengintegrasikan GIF ke dalam kode HTML sehingga Anda dapat menghidupkan konten web Anda.
Bagian 1: Cara Membuat Animasi GIF untuk Menambahkannya ke HTML
Sebelum menambahkan animasi GIF ke HTML, Anda memerlukan animasi GIF terlebih dahulu. Jika Anda menemukan animasi GIF yang sangat cocok di website, maka Anda bisa langsung menyimpan linknya untuk digunakan selanjutnya, namun jika Anda tidak menemukan animasi GIF yang cocok, maka Anda bisa membuat sendiri animasi GIF tersebut untuk ditambahkan ke website. WidsMob GIF adalah pembuat dan editor animasi GIF yang memungkinkan Anda membuat animasi GIF apa pun yang Anda inginkan melalui file video dan gambar.
1. Impor file video MP4, MKV, WEBM, MPEG, dan banyak jenis lainnya.
2. Sesuaikan konten animasi GIF dan pratinjau secara instan.
3. Sesuaikan pengaturan HSL animasi GIF untuk mendapatkan pengalaman menonton terbaik.
4. Tambahkan teks ke animasi GIF untuk penjelasan tambahan.
Langkah 1: Download dan menginstal WidsMob GIF di komputer Anda. Setelah instalasi berhasil, mulai perangkat lunak. Klik Video ke GIF tombol di beranda perangkat lunak, pilih file video di kotak dialog pop-up, dan impor ke perangkat lunak. Setelah video berhasil diimpor, animasi GIF akan otomatis dibuat dan mulai diputar.
Langkah 2: Konten video akan semakin rumit, sehingga Anda dapat mempertimbangkan untuk memilih kembali konten animasi GIF. Ada garis waktu di bawah kotak pratinjau animasi GIF. Anda dapat menentukan konten animasi GIF melalui kotak pilihan di kedua ujung timeline, atau memasukkan waktu mulai dan waktu pemutaran animasi GIF di kedua ujungnya. Klik Bermain ikon untuk melihat pratinjau pemutaran animasi GIF.
Langkah 3: klik Penyesuaian Video tombol. Di area pengeditan sebelah kanan, akan muncul 3 opsi bagi Anda untuk mengatur HSL animasi GIF. Sesuaikan penggeser Kontras dan amati perubahan animasi GIF secara real-time di sebelah kiri. Jika ingin mendapatkan pengalaman menonton terbaik, Anda perlu langsung bekerja sama dengan dua opsi lainnya.
Langkah 4: Untuk animasi GIF yang ditambahkan dalam HTML, Anda mungkin perlu menambahkan teks untuk membantu penjelasannya. Klik Tambahkan Teks tombol di sudut kanan atas kotak pratinjau, masukkan teks di kotak dialog pop-up, dan atur warna teks, font, ukuran, dll. Klik tombol OK tombol, dan teks secara resmi ditambahkan ke animasi GIF.
Langkah 5: Pilih langsung teks pada animasi GIF dan seret untuk mengubah posisi teks pada animasi GIF. Untuk animasi GIF dalam HTML, Anda dapat menyesuaikan penggesernya Kualitas in Pengaturan GIF untuk mendapatkan animasi GIF berkualitas tinggi. Setelah mengedit, klik Ekspor GIF tombol untuk mengekspor animasi GIF dan memasukkannya ke dalam HTML.
Bagian 2: Cara Menambahkan GIF Animasi dalam HTML
Sekarang Anda memiliki animasi GIF, hal berikutnya yang harus dilakukan adalah menambahkan animasi GIF ke file HTML untuk memastikan animasi tersebut dapat diputar dengan lancar di Web. Namun, pengaturan tampilan browser web yang berbeda mungkin berbeda, dan Anda harus terus berusaha memastikan pengalaman menonton terbaik.
Langkah 1: Pastikan file animasi GIF Anda ditempatkan di file direktori yang sama dengan kode HTML. Untuk membuka file HTML, Anda dapat memilih editor teks atau lingkungan pengembangan terintegrasi. Temukan kode dalam kode Anda yang perlu memasukkan animasi GIF. Umumnya, Anda menggunakan tag untuk menyisipkan animasi GIF.
Langkah 2: Tambahkan src ke img untuk menentukan jalur penyimpanan file animasi GIF. Jalur relatif adalah alamat file yang disimpan dalam direktori yang sama dengan HTML. Jangan lupa tulis nama dan format animasi GIFnya. Jalur absolut memungkinkan Anda menambahkan GIF animasi yang diunggah ke situs web.
Langkah 3: Pada atribut img, Anda dapat mengatur atribut alt yang dapat memberikan gambaran singkat tentang animasi GIF. Ketika animasi GIF gagal dimuat, teks akan ditampilkan untuk bantuan.
Langkah 4: Tergantung pada pengaturan tampilan Web, Anda mungkin perlu menyesuaikan lebar dan tinggi. HTML berisi fungsi atribut ini.
Langkah 5: Simpan file HTML dengan tambahan animasi GIF, dan Anda dapat membukanya di browser web sehingga Anda dapat melihat pratinjau animasi GIF yang diputar di halaman web. GIF animasi akan diputar secara otomatis di sebagian besar browser tanpa memerlukan kode tambahan.
Bagian 3. FAQ GIF ke HTML
Kesimpulan
Sekarang Anda telah mempelajari cara menambahkan GIF ke HTML, dan kami berharap panduan ini membantu Anda menyempurnakan konten web dan melibatkan pemirsa dengan animasi yang menarik. Web adalah ruang yang dinamis, dan kemampuan untuk menyertakan GIF membuka banyak kemungkinan kreatif. Baik Anda menggunakan GIF untuk hiburan, pendidikan, atau untuk meningkatkan pengalaman pengguna, ingatlah untuk menjaga animasi Anda tetap relevan, kinerjanya optimal, dan konsisten dengan desain situs Anda secara keseluruhan.