Cara Membuat Teks Berjalan / Marquee

-

MARQUEE DI HTML

Untuk artikel ini, Firman akan menjelaskan cara membuat beberapa Teks Berjalan atau bergulir baik secara Horizontal, Vertikal, ke kanan atau ke kiri tergantung pada pengaturan nya. Dari beberapa jenis tersebut, intinya kita harus menggunakan sebuah Tag HTML untuk penggunaannya. Tag yang harus digunakan yaitu marquee. Langsung saja kita bahas satu persatu jenis-jenis marquee atau Teks berjalan di HTML berikut ini.

  1. Simple Marquee / Marquee Sederhana
    Untuk Marquee jenis ini, adalah marquee default atau marquee yang tanpa penggunaan atribut lain. Marquee Sederhana, Teks yang dibuat akan berjalan dari arah kanan ke kiri tanpa berhenti.
    Contoh :

    <marquee>Marquee Sederhana</marquee>

    Hasil Output :
    Marquee Sederhana
  2. Marquee Right / Marquee ke Kanan
    Marquee Right kebalikan dari  Marquee Sederhana, seperti artinya Marquee Right berarti Teks yang dibuat akan berjalan dari arah kiri ke kanan tanpa berhenti.
    Contoh :

    <marquee direction="right">Marquee Right</marquee>

    Hasil Output :
    Marquee Right
  3. Marquee Up atau Marquee Down
    Marquee Up berarti Teks yang dibuat akan bergerak/bergulir dari arah bawah ke atas. Sedangkan Marquee Down berarti Teks yang dibuat akan bergerak dari arah atas ke bawah.
    • Contoh Marquee Up :

      <marquee direction="up">Marquee Up</marquee>

      Hasil Output :
      Marquee Up
    • Contoh Marquee Down :

      <marquee direction="down">Marquee Down</marquee>

      Hasil Output :
      Marquee Down
  4. Marquee Slide
    Marquee Slide digunakan untuk menggerakkan/menggulir terus menerus Teks yang dibuat dari ujung ke ujung, dan pada ujungnya bergerak ke arah yang berlawanan.
    Contoh :

    <marquee behavior="alternate">Marquee Slide</marquee>

    Hasil Output :
    Marquee Slide
  5. Marquee Scroll Amount
    Marquee Scroll Amount menggunakan atribut yang berfungsi untuk mengatur kecepatan gerak/gulir Teks yang dibuat.
    Contoh :

    <marquee scrollamount="50">Marquee Scroll Amount</marquee>

    Hasil Output :
    Marquee Scroll Amount
  6. Marquee Stop Start
    Marquee Stop Start adalah Tag Marquee yang menggunakan beberapa properti CSS. Dan untuk Contoh kali ini, Jika Teks Marquee yang dibuat ditekan maka akan berhenti, begitu juga saat ditekan lagi diluar teks maka akan bergerak kembali.
    Contoh :

    <marquee onmouseover="this.stop();" onmouseout="this.start();">Marquee Stop Start</marquee>

    Hasil Output :
    Marquee Stop Start
  7. Cool Effects with Marquees
    Cool Effects with Marquees adalah Kumpulan Marquee dengan efek-efek yang keren, dengan menggunakan banyak atribut yang dapat diubah nilainya sesuai keinginan.
    Contoh :

    <div class="example-display" style="position:relative;height:600px;">

      <marquee style="z-index:2;position:absolute;left:18%;top:47%;font-family:Cursive;font-size:14pt;color:red;height:100px;" scrollamount="3" direction="down">Cool Effects with Marquees</marquee>

      <marquee style="z-index:2;position:absolute;left:1%;top:39%;font-family:Cursive;font-size:14pt;color:yellow;height:50%;" scrollamount="7" direction="down">Firman's Blog</marquee>

      <marquee style="z-index:2;position:absolute;left:11%;top:7%;font-family:Cursive;font-size:14pt;color:lime;height:302px;" scrollamount="4" direction="down">https://17416255201077-azizfirmansaputra.blogspot.com</marquee>

      <marquee style="z-index:2;position:absolute;left:25%;top:33%;font-family:Cursive;font-size:14pt;color:blue;height:435px;" scrollamount="3" direction="down">17416255201077</marquee>

      <marquee style="z-index:2;position:absolute;left:15%;top:13%;font-family:Cursive;font-size:14pt;color:black;height:432px;" scrollamount="2" direction="down">aziz</marquee>

      <marquee style="z-index:2;position:absolute;left:8%;top:29%;font-family:Cursive;font-size:14pt;color:white;height:369px;" scrollamount="1" direction="down">firman</marquee>

      <marquee style="z-index:2;position:absolute;left:30%;top:17%;font-family:Cursive;font-size:14pt;color:green;height:289px;" scrollamount="7" direction="down">saputra</marquee>

      <marquee style="z-index:2;position:absolute;left:46%;top:27%;font-family:Cursive;font-size:14pt;color:grey;height:78px;" scrollamount="7" direction="down">blogspot.com</marquee>

      <marquee style="z-index:2;position:absolute;left:16%;top:17%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:56px;" scrollamount="5" direction="down">allinworld99</marquee>

      <marquee style="z-index:2;position:absolute;left:30%;top:46%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:194px;" scrollamount="2" direction="down">blogspot.com...</marquee>

      <marquee style="z-index:2;position:absolute;left:2%;top:10%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:251px;" scrollamount="6" direction="down">Firman</marquee>

      <marquee style="z-index:2;position:absolute;left:48%;top:24%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:154px;" direction="down">">Marquees...</marquee>

      <marquee style="z-index:2;position:absolute;left:41%;top:22%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:82px;" direction="down">https://17416255201077-azizfirmansaputra.blogspot.com</marquee>

      <marquee style="z-index:2;position:absolute;left:46%;top:2%;font-family:Cursive;font-size:14pt;color:Fuchsia;height:70px;" scrollamount="3" direction="down">...effects...</marquee>

      <marquee style="z-index:2;position:absolute;left:42%;top:15%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:334px;" direction="down">Cool Effects</marquee>

      <marquee style="z-index:2;position:absolute;left:40%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:167px;" scrollamount="7" direction="down">Firman's Blog</marquee>

      <marquee style="z-index:2;position:absolute;left:45%;top:18%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:420px;" scrollamount="7" direction="down">Firman's Blog</marquee>

      <marquee style="z-index:2;position:absolute;left:22%;top:26%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:12px;" scrollamount="7" direction="down">Firman's Blog</marquee>

      <marquee style="z-index:2;position:absolute;left:49%;top:4%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:366px;" scrollamount="2" direction="down">Firman's Blog</marquee>

      <marquee style="z-index:2;position:absolute;left:26%;top:32%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:358px;" scrollamount="1" direction="down">Firman's Blog</marquee>

      <marquee style="z-index:2;position:absolute;left:3%;top:14%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:130px;" scrollamount="3" direction="down">Firman's Blog</marquee>

     </div>

    Hasil Output :

    Cool Effects with Marquees

    Firman's Blog

    https://17416255201077-azizfirmansaputra.blogspot.com

    17416255201077

    aziz

    firman

    saputra

    blogspot.com

    allinworld99

    blogspot.com...

    Firman

    ">Marquees...

    https://17416255201077-azizfirmansaputra.blogspot.com

    ...effects...

    Cool Effects

    Firman's Blog

    Firman's Blog

    Firman's Blog

    Firman's Blog

    Firman's Blog

    Firman's Blog

Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih.

Comments

Post a Comment

Popular posts from this blog

Pengertian dan Contoh Sederhana tentang Stack dan Queue

-
Image
STACK (Tumpukan) dan Queue (Antrian) Pada kesempatan kali ini, kita akan belajar bersama tentang Stack atau Tumpukan dan Queue atau Antrian. Stack dan Queue ini, berkaitan dengan Struktur Data  dalam sebuah aplikasi namun bisa juga dalam kehidupan sehari-hari kita. Stack dan Queue merupakan fungsi yang biasanya diimplementasikan pada program, tidak terkecuali Pemrograman Java. Untuk itu, sebelum membahas program sederhana Stack dan Queue menggunakan Pemrograman Java, kita simak terlebih dahulu pengertian dan penjelasan dari kedua fungsi tersebut dibawah ini.  STACK/Tumpukkan Stack adalah kumpulan suatu elemen dimana hanya elemen yang baru dimasukkan yang dapat diakses atau dilihat. Stack merupakan perintah pengumpulan data secara linear yang menyusun data seperti tumpukan dan bersifat Last In First Out(LIFO) yang berarti data yang terakhir masuk adalah data yang pertama keluar. Contoh dalam Kehidupan sehari-hari : Setumpuk koran, dimana koran yang paling terakhir ditamb
Read more

Permainan Logika tentang Algoritma

-
Image
3 Permainan Logika Tes IQ Pada kesempatan waktu ini, saya akan memberikan atau membahas tentang sebuah Game atau Permainan yang berkaitan dengan Tes IQ, karena Permainan ini harus dilakukan menggunakan akal, nalar dan logika kita. Karena Permainan ini berkaitan Algoritma, yang menyelesaikan masalah dengan logika, maka dalam postingan ini saya bahas bagaimana Algoritma dalam Game tersebut. Baik, langsung saja kita bahas dibawah bagaimana penyelesaiannya. Game Wolf, Sheep & Cabbage (Petani, Domba, Serigala dan Sayuran)  Pada permainan ini, terdapat Seorang Petani dengan membawa seekor Serigala, seekor kambing, dan rumput yang terkira beratnya tidak jauh berbeda. Untuk pergi ke kota di tengah perjalanan, Petani tersebut harus meyeberangi sungai dengan perahu. Namun kapasitas perahu, tidak memungkinkan untuk Petani tersebut membawa semuanya. Ia harus membawa satu persatu bawaannya. Tetapi ketika Petani tersebut menyeberangkan, sisa bawaannya harus tidak saling berhu
Read more

Cara Menyisipkan Tanggal (JCalender) di Java NetBeans dan di Simpan dalam Database

-
Image
JCalender di Java Netbeans Artikel ini adalah kelanjutan dari artikel sebelumnya tentang database yaitu Contoh Database dengan XAMPP dan Java Netbeans yang tidak menyisipkan komponen tanggal. Maka untuk kali ini, Firman akan memberikan Contoh Program Database dari Java yang dapat memasukkan data tanggal. Biasanya digunakan saat kita membuat program untuk memasukkan tanggal lahir, tanggal saat kita melakukan penjualan pada aplikasi atau lainnya. Lalu bagaimana cara membuat program yang dapat memasukkan data tanggal dan disimpan didalam Database. Baiklah langsung saja kita simak berikut dibawah ini. Saat kita ingin memasukkan tanggal di JFrame Form, kita harus mempunyai sebuah komponen yang dapat menampilkan data tanggal. Oleh karena itu, kita membutuhkan sebuah library (pustaka) untuk mengolah data tanggal tersebut. Library tersebut adalah JCalender   yang mempunyai format .jar . Secara default Library tersebut tidak ada di dalam Palette bawaan Netbeans. Jadi, kita bisa menamb
Read more