Membuat Berita Berjalan Dengan jQuery

jQuery adalah library javascript yang berisi kumpulan fungsi-fungsi javascript yang sudah jadi dan dapat kita gunakan dalam pembuatan aplikasi maupun web. Jquery tersebut dibuat untuk memudahkan pembuatan web dan penulisan kode javascript.

Pada tutorial ini saya akan membagikan sedikit ilmu yang saya dapat dari beberapa sumber yaitu mengenai bagaimana cara membuat berita atau menu berjalan menggunakan jQuery. Tentunya berita berjalan ini bukan seperti teks berjalan seperti yang sering kita lihat yaitu berjalan dari kiri ke kanan (horizontal) ataupun sebaliknya namun kita akan membuat berjalan secara vertikal. Untuk gambaran awalnya bisa dilihat pada gambar berikut ini.

Demo Live

Pada gambaran tersebut menu atau berita tersebut berjalan dari bawah ke atas. Pada tutor kali ini kita akan menggunakan jquery versi 1.11.3. mungkin jquery yang digunakan sudah termasuk versi yang lama namun saya mencoba menggunakan versi terbaru yaitu v3.1.1 namun hasil yang ditunjukkan tidak sesuai dengan yang saya inginkan.

Langsung saja untuk tutorial membuat berita atau menu berjalan secara horizontal ayoo kita simak langkah-langkah berikut ini :

Pertama

Kita siapkan bahan-bahannya, yaitu berupa gambar, javascript, dan css yang diperlukan. Bisa di download di sini. kemudian ekstrak file yang berisi assets tersebut.

Kedua

Kemudian buat file dengan nama index.html dan masukkan ke dalam folder yang sama dengan folder assets yang sudah di download. Masukkan script berikut pada file index.html.

Ketiga

Selanjutnya masukkan script berikut pada bagian <head>.
Pada bagian head tersebut kita menggunakan jquery secara online dengan script berikut.

Keempat

Kemudian pada bagian isi script <body> kita masukkan script berikut .
Jika kita jalankan maka akan menampilkan gambar seperti berikut

Kelima

Selanjutnya kita akan mengisi konten dari berita atau menunya. Masukkan script berikut pada bagian Isi konten.
Jika dijalankan akan menampilkan tampilan seperti berikut :

Keenam

Selanjutnya hal yang sangat penting yaitu bagian terakhir untuk membuat konten tersebut bisa berjalan secara horizontal dan membuat agar data berita atau menu yang ditampilkan hanya beberapa saja masukkan script berikut ini pada bagian sebelum tag </body>.

Nah tutor untuk membuat berita atau menu berjalannya sudah selesai, jika script diatas dijalankan maka akan menampilkan tampilan seperti pada gambar di awal postingan ini. Sekian tutorial dari saya, semoga bisa bermanfaat untuk kalian, selamat mencoba

Download Full Script Live Demo