Cara Membuat Animasi Scroll Teks dengan jQuery

Animasi scroll teks merupakan sebuah tampilan dimana terjadi perubahan teks seolah-olah teks itu sendiri seperti di digulung. Efek scroll sendiri merupakan sebuah kontrol penggulung untuk menggulung objek pada layar. Ada dua tipe efek scroll yang biasa kita temui yakni efek scroll secara horizontal dan efek scroll secara vertical. Nah berikut ini akan saya jelaskan tentang bagaimana Cara Membuat Animasi Scroll Teks dengan jQuery. Pada contoh kasus ini saya akan membuat scroll teks secara vertical, jadi teks yang berada pada layar akan terlihat menggulung secara otomatis atau seolah-olah di scroll. Penasaran seperti apa cara membuat nya, simak langkah-langkahnya berikut ini.

1. Langkah pertama adalah buat satu buah file dengan format HTML, kemudian kita akan isikan sintak HTML sebagai struktur awal dari animasi scroll teks. Berikut sintak HTML nya.

<body>
	<div class="container">
	  <div class="text">
	      <div>Saya suka Apel</div>
	      <div>Saya suka Anggur</div>
	      <div>Saya suka Jeruk</div>
	      <div>Saya suka Apel, Anggur dan Jeruk</div>
	  </div>
	</div>
</body>

2. Selanjutnya, setelah kode diatas diketikan kita akan membuat sintak CSS3 untuk mengatur layout atau tampilan dari teks nya. berikut sintak CSS3.

body {
  background: #f1f1f1;
  color: #222;
}

.container {
  padding: 100px;
  width: 500px;
  display: block;
  text-align: center;
  margin: 0 auto;
}

.text {
    font-size: 30px;
    height: 50px;
    vertical-align: middle;
    overflow: hidden;
}

.text div {
    height: 50px;
    transition: margin-top 1s ease-in-out;
}

3. Langkah berikut nya, kita akan memberikan efek animasi scroll teks nya dengan sintak javascript berikut.

<script type="text/javascript">
	var current = 1;
	var height = $('.text').height(); 
	var numberDivs = $('.text').children().length; 
	var first = $('.text div:nth-child(1)'); 
	setInterval(function() {
	    var number = current * -height;
	    first.css('margin-top', number + 'px');
	    if (current === numberDivs) {
	        first.css('margin-top', '0px');
	        current = 1;
	    } else current++;
	}, 2000);
</script>

4. Pada sintak diatas adalah suatu fungsi dimana teks akan berubah secara bergantian. Untuk memastikan sintak nya berfungsi dan kalian tambahkan librari berikut.

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

5. Setelah semua sintak diketikan, silahkan jalankan pada browser masing-masing dan lihat hasilnya.

Baik itu tadi langkah-langkah Cara Membuat Animasi Scroll Teks dengan jQuery. semoga bermanfaat 🙂

DEMO

Cara Membuat Animasi Scroll Teks dengan jQuery

Kategori