Minggu, 12 Mei 2019

Kode HTML Tulisan Bergerak Lengkap (1)

Kode HTML Marquee Blogger | Cara Tulisan Berjalan di Blog | Halo, sahabat Madya. Pernahkah Anda melihat sebuah tulisan berjalan di sebuah situs atau blog? Entah itu berjalannya dari kanan ke kiri atau dari bawah ke atas? Anda bisa juga membuatnya dengan kode HTML

Membuat tulisan berjalan atau tulisan bergerak menggunakan kode HTML itu dinamakan "marquee". Anda bisa melihat berbagai metode atau kombinasi kode marquee di situs-situs yang fokus di kode-kode HTML.

Madya sendiri pernah menggunakan kode marquee ini untuk mensiasati luas ruang tulisan sehingga dibuatlah tulisan berjalan agar pembaca bisa membacanya. Selain itu, tulisan bergerak ini juga bisa menarik perhatian pengunjung.


Meskipun judulnya kode HTML Tulisan Bergerak, namun pada prakteknya bisa juga digunakan pada gambar. Jadi Anda juga bisa membuat gambar bergerak dengan kode HTML marquee. Apakah sama dengan CSS untuk gambar slide? Entahlah. Saya kurang paham,hehe

Tulisan mengenai kode HTML Tulisan bergerak ini akan dibagi menjadi 2 artikel karena cukup banyak atribut yang bisa dipasangkan di kode marquee. Yuk, dari pada penasaran, berikut kode-kode HTML tulisan berjalan/bergerak :

[Baca juga : Kode HTML Tulisan Bergerak Lengkap - Bag. 2]

1. Kode Dasar

Pertama adalah mengenal kode HTML dasar marquee atau original marquee tanpa embel-embel atribut dan sejenisnya. Cukup menempelkan kode <marquee> maka tulisannya akan bergerak. Kode HTML nya sebagai berikut :



Anda tinggal ubah "Teks bergerak di sini" dengan kata pilihan Anda. Kata tersebut juga bisa diganti dengan gambar juga, lho. Hasil dari kode di atas bisa Anda lihat di bawah ini :

Teks bergerak di sini

2. Atur Gerakan

Setelah mempelajari kode dasar dari marquee, selanjutnya Anda bisa menambahkan atribut lain sesuka hati Anda. Misalnya atribut untuk mengatur bagaimana cara gerak teks. Jika tidak diatur (kode dasar saja) maka default nya adalah scroll atau berjalan.
Kode atau atribut untuk mengatur gerakan tulisan bergerak adalah tambahkan "behavior" dan setelahnya bisa tambahkan value. Setidaknya ada 3 value yang bisa digunakan. Lengkapnya sebagai berikut ini :
  1. Value "scroll" : untuk teks berjalan sampai habis
  2. Value "slide" : untuk teks berjalan tidak sampai habis
  3. Value "alternate" : untuk teks berjalan maju mundur (bounce/memantul)
Ingat, jika Anda tidak mengatur atribut "behavior" maka secara default atau dasarnya menjadi scroll atau tulisan berjalan sampai habis. Berikut adalah kode HMTL marquee dengan tambahan atribut behavior :



Bisa Anda lihat di atas kode HTMLnya. Untuk mengatur atribut behavior nya tinggal Anda ubah value atau kata "alternate" ke value yang Anda inginkan. Hasil dari kode di atas, dapat Anda lihat berikut ini (karena kodenya menggunakan value alternate maka tulisannya akan memantul) :

teks di sini akan bergerak sesuai value

3. Atur Arah Begerak

Selanjutnya, Anda juga bisa mengatur arah gerakan dari tulisan bergerak tersebut. Arah gerakannya bisa dari kanan ke kiri, kiri ke kanan, atas ke bawah, dan bawah ke atas. Berarti total ada 4 arah gerakan teks bergerak.

Atribut untuk mengatur arah gerakan teks bergerak adalah atribut "direction". Sebagaimana halnya atribut "behavior" sebelumnya, atribut "direction" juga memiliki beberapa value. Berikut keempat value yang dimilikinya :
  1. Value "left" : untuk tulisan bergerak dari kiri ke kanan
  2. Value "right" : untuk tulisan bergerak dari kanan ke kiri
  3. Value "up" : untuk tulisan bergerak dari atas ke bawah
  4. Value "down" : untuk tulisan bergerak dari bawah ke atas
Jika Anda tidak mengaturnya atau tidak menambahkan atribut "direction" maka secara default atau gerakan otomatis nya adalah "left" atau tulisan akan bergerak dari kiri ke kanan. Anda juga bisa menambahkan atribut sesuka hati. Misalnya kode untuk arah dan cara bergerak sebagai berikut ini:



Anda bisa ubah value dalam atribut behavior dan direction. Jika menurut kode di atas, maka tulisannya akan bergerak sampai habis dan arahnya dari kanan ke kiri. Tidak percaya? Berikut hasil dari kode marquee di atas :

teks di sini akan bergerak sesuai value

4. Atur Berapa kali bergerak

Atribut selanjutnya yang juga bisa ditambahkan adalah atribut "loop". Atribut itu digunakan untuk mengatur jumlah berapa kali teks tersebut bergerak. Untuk value nya tentu menggunakan angka. Misalnya bisa bergerak 1, 2, 3, atau selamanya.

Jika Anda tidak mengatur atribut loop maka tulisan atau teks tersebut akan bergerak terus menerus atau selamanya. Sedangkan value loop untuk bergerak selamanya adalah -1 (minus 1). Selain itu, value nya dari angka 1 ke atas, bukan minus. Berikut kode marquee penggabungan antara atribut direction dan loop :



Bisa Anda lihat kode di atas. Anda bisa merubah atribut masing-masing. Untuk atribut loop bisa diganti angka value nya sesuai keinginan Anda. Bisa diganti 100, 200, dan sebagainya. Apakah bisa? Apakah bisa sampai jutaan? Harusnya sih bisa. Cuma belum coba hehe tapi mengapa loop sampai jutaan padahal bisa selamanya?

Hasil dari kode di atas sebagai berikut (kode di atas menunjukkan arah dari kanan ke kiri dan bergerak cuma 3 kali dan setelah 3 kali tulisannya akan hilang):

teks di sini akan bergerak sesuai value

5. Atur Kecepatan Teks Bergerak

Atribut terakhir dalam artikel ini adalah atribut untuk mengatur kecepatan gerakan teks tersebut. Atribut yang dimaksud adalah atribut "scrollamount". Value nya tinggal diubah ke angka yang sesuai dengan keinginan Anda.

Kecepatan scrollamount default dari marquee adalah 6. Bisa diubah menjadi lebih rendah, misalnya 1, maka teks bergerak lebih lambat. Atau bisa diubah menjadi lebih tinggi, misalnya 100, maka teksnya akan bergerak lebih cepat. Berikut kode HTML nya :



Bisa Anda lihat kode di atas, hanya penggabungan antara atribut direction dan scrollamount artinya tulisannya akan bergerak dari kanan ke kiri dan kecepatannya 10. Anda bisa membandingkan kecepatan teks bergerak nya, misalnya seperti di bawah ini :

Value=3
TEKS DI SINI BERGERAK SESUAI VALUE
Value deafult
TEKS DI SINI BERGERAK SESUAI VALUE
Value=10
TEKS DI SINI BERGERAK SESUAI VALUE

Apakah bisa lebih dari 100? Bisa, yang pernah Madya coba untuk kecepatan tertinggi dari scrollamount adalah 2000. Di atasnya tulisannya sudah hilang karena teksnya berjalan sangat cepat hingga mata kita tidak bisa melihatnya, hehe..

Value default
TEKS DI SINI BERGERAK SESUAI VALUE
Value=100
TEKS DI SINI BERGERAK SESUAI VALUE
Value=1000
TEKS DI SINI BERGERAK SESUAI VALUE


Demikian artikel singkat mengenai kode HTML tulisan bergerak lengkap bagian 1. Anda juga bisa melihat atribut selanjutnya di artikel bagian kedua. Semoga bermanfaat dan jangan lupa tinggalkan komentar positif ya!

Tidak ada komentar:

Posting Komentar