21 February 2022

Efek Marquee Superman Terbang dengan HTML dan CSS

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Efek Marquee Superman Terbang dengan HTML dan CSS

Teknik Marquee. Meski terbilang jadul. Trik ini sampai sekarang masih sering digunakan. Termasuk saya sendiri menggunakannya dan saya gunakan ke artikel di postingan. Karena disini saya ingin nostalgia.

Meski zaman semakin berkembang dan teknik HTML serta CSS semakin berkembang pesat. Tidak mengurungkan niat untuk menampilkan kreasi dari teknik marquee ini. Karena postingan kali ini membuat saya dejavu.

Baca Juga : Aneka Ragam Widget Animasi Melintasi Footer Blog

Kenapa saya bilang Dejavu. Karena 12 tahun silam saya juga berkegiatan ngeblog tiap harinya. Dan blog yang dulu memang tidak sehebat sekarang. Teknik sekarang sudah banyak yang mutakhir. Sedangkan dulu masih konvensional.

Meski begitu, dulu trik ini hampir ada di setiap blog yang bersliweran di google. Bak kacang goreng. Blog dengan tulisan berjalan menghiasi postingan yang beredar dan siap baca. Kangen waktu itu.

Baca Juga : Variasi Text Area dengan CSS di Postingan Blog

Setelah sekian waktu berlalu, saya masih menyempatkan membuka blog lama saya dulu terus saya buat kreasi seperti ini. Semoga berkenan. Walaupun belum terbilang mahir, tapi usaha tidak akan mengkhianati hasil bukan?

Marquee Superman Terbang dengan HTML dan CSS


SUPERMAN

Logo Superman Vector | lembarvektor











Standar penulisan Marquee


Teks Berjalan ke Kiri

Normal
Tulisan Berjalan Ke Kiri
<marquee direction="left" scrollamount="6">Tulisan Berjalan Ke Kiri</marquee>

Cepat
Tulisan Berjalan Ke Kiri
<marquee direction="left" scrollamount="12">Tulisan Berjalan Ke Kiri</marquee>

Lambat
Tulisan Berjalan Ke Kiri
<marquee direction="left" scrollamount="3">Tulisan Berjalan Ke Kiri</marquee>




Teks Berjalan ke Kanan

Normal
Tulisan Berjalan Ke Kanan
<marquee direction="right" scrollamount="6">Tulisan Berjalan Ke Kanan</marquee>

Cepat
Tulisan Berjalan Ke Kanan
<marquee direction="right" scrollamount="12">Tulisan Berjalan Ke Kanan</marquee>

Lambat
Tulisan Berjalan Ke Kanan
<marquee direction="right" scrollamount="3">Tulisan Berjalan Ke Kanan</marquee>




Teks bergerak Kebawah

Tulisan berjalan ke bawah

<marquee align="center" direction="down" height="100px" scrollamount="2"> Tulisan berjalan ke bawah </marquee>



Teks bergerak keatas

Tulisan berjalan ke atas
<marquee align="center" direction="up" height="100px" scrollamount="2"> Tulisan berjalan ke atas </marquee>



Teks bergerak Berlawanan Arah Kiri dan Kanan

Tulisan berjalan ke pusat Tulisan berjalan ke pusat Tulisan berjalan berlawanan arah Tulisan berjalan berlawanan arah
<marquee direction="right" width="50%"> Tulisan berjalan ke pusat</marquee><marquee direction="left" width="50%"> Tulisan berjalan ke pusat</marquee><marquee width = "50%"> Tulisan berjalan berlawanan arah </marquee><marquee direction="right" width="50%"> Tulisan berjalan berlawanan arah </marquee>



Teks bergerak Memantul ke Kiri dan Kanan

Tulisan berjalan Memantul
<marquee behavior="alternate" scrollamount="10"> Tulisan berjalan Memantul </marquee>



Teks bergerak Zig Zag

Tulisan berjalan zig-zag
<marquee behavior ="alternate" direction = "up" height="75px" scrollamount="6">
<marquee direction="right" scrollamount="3"> Tulisan berjalan zig-zag </marquee></marquee>



Teks bergerak Melayang

Tulisan berjalan melayang
<marquee behavior="alternate" direction="up" height="100" scrollamount="6" weight="460"><marquee behavior="alternate" direction="right"> Tulisan berjalan melayang </marquee> </marquee>



Tulisan berjalan dengan Link

Alifa Marquee Plus Link
Alifa Marquee Plus Link
Alifa Marquee Plus Link

<marquee align="center" direction="up" height="150" onmouseout ="this.start()" onmouseover = "this.stop()" scrollamount="2" width="100%"> 
<a href="https://alifacode.com/2022/02/efek-marquee-superman-terbang-dengan.html"> Alifa Marquee Plus Link </a><br />
<a href="https://alifacode.com/2022/02/efek-marquee-superman-terbang-dengan.html"> Alifa Marquee Plus Link </a><br /> 
<a href="https://alifacode.com/2022/02/efek-marquee-superman-terbang-dengan.html"> Alifa Marquee Plus Link </a><br /> 
</marquee>


Sekian saja artikel tentang tulisan berjalan yang sudah memudarkan rasa kangen saya. Semoga artikel Efek Marquee Superman Terbang dengan HTML dan CSS bisa bermanfaat. Terima kasih sudah bersedia mampir ke blog saya. Terima kasih sekali lagi. Wassalam.

Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Efek Marquee Superman Terbang dengan HTML dan CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon