Cara Membuat Animasi Scroll Teks dengan jQuery
Animasi scroll teks adalah sebuah sebuah tampilan dimana terjadi perubahan teks seolah-olah teks itu sendiri seperti di digulung. Efek scroll sendiri adalah sebuah sebuah kontrol penggulung bagi menggulung objek di layar. Ada dua tipe efek scroll yang biasanya kita temui yakni efek scroll secara horizontal dan efek scroll secara vertical. Nah berikut ini akan saya jelaskan mengenai bagaimana Cara Membuat Animasi Scroll Teks dengan jQuery. Di contoh kasus ini saya akan membangun scroll teks secara vertical, jadi teks yang berada di layar akan terlihat menggulung secara otomatis atau seolah-olah di scroll. Penasaran seperti apa cara membangun nya, simak langkah-langkahnya berikut ini.
1. Langkah pertama-tama yaitu bikin satu buah file dengan format HTML, kemudian kita akan isikan sintak HTML selaku 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. Berikutnya, setelah kode diatas diketikan kita akan membangun sintak CSS3 bagi 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. Di sintak diatas yaitu suatu manfaat dimana teks akan berubah secara bergantian. Bagi memastikan sintak nya berfungsi dan kalian tambahkan librari berikut.
<script src=https://code.jquery.com/jquery-3.2.0.min.js></script>
5. Setelah segala sintak diketikan, silahkan jalankan di browser masing-masing dan lihat hasilnya.
Bagus itu tadi strategi Cara Membuat Animasi Scroll Teks dengan jQuery. semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
