Cara Membuat Animasi Warna Pelangi dengan Javascript

Pernahkah kalian melihat pelangi ? yah, perpaduan warna yang amat cantik membangun kita takjub bagi melihatnya, Nah bagaimana kalau sebuah teks diberikan animasi warna pelangi, apa kalian pernah melihat nya ? di artikel kali ini saya akan membahas bagaimana Cara Membuat Animasi Warna Pelangi dengan Javascript . biasanya pada warna pelangi pada situs dapat kita sebut dengan Rainbow.Pelangi ataupun Rainbow adalah sebuah susunan warna yang dipadukan sedemikian rupa sehingga terlihat menarik dan cantik bagi dilihaat, berikut yaitu strategi bagi membangun animasi warna pelangi.

Langkah pertama-tama bikin file dengan format .html kemudian kalian ketikan sintak HTML berikut.

<p class=warna>
Lorem ipsum dolor sit amet,
</p>

Di bagian paragraf kalian dapat isikan beberapa paragraf, semakin banyak karenanya akan semakin bagus bagi tampilan animasi pelangi nya. Setelah itu tambahkan sintak CSS3 berikut bagi mengatur paragraf diatas supaya terlihat rapih, berikut sintak CSS3.

.warna {
width: 600px;
margin: auto;
text-align: justify;
}

Sintak CSS3 diatas adalah sebuah pengaturan lebar dari paragraf dan kerapihan teks saja, silahkan kalian dapat menambahkan yang lain nya kalo diperlukan. Berikutnya bagi membangun animasi pelnagi nya kita akan gunakan sintak javascript, silahkan ketikan sintak javascript berikut.

var step = 4;
var $uni = $('.warna');
var txt = $uni.text();
var len = txt.length;
var lev = 360 / len;
var newCont = ;
var itv;

for (var i = 0; i < len; i++) {
newCont += <span style='color:hsl( + i * lev + , 100%, 50%)'> + txt.charAt(i) + </span>;
}

$uni.html(newCont);

itv = setInterval(function() {
$uni.find('span').each(function() {
var h = +$(this).attr('style').split(',')[0].split('(')[1] - step % 360;
$(this).attr({
style: color:hsl( + h + , 100%, 50%)
});
});
}, 50);

Supaya sintak diatas berjalan kalian wajib menambahkan library javascript berikut, ditempatkan sebelum tag body di HTML.

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

Setelah seluruh kode diatas diketikan pastikan file tersimpan kemudian coba jalankan di browser masing-masing dan lihat hasilnya. Kalau sintak diatas diketikan dengan benar karenanya nanti akan terlihat animasi pelangi di teks secara otomatis. Bagaimana lumayan gampang bukan ? Bagus begitulah tadi pembahasan artikel mengenai Cara Membuat Animasi Warna Pelangi dengan Javascript . sekiranya artikel ini bermanfaat silahkan share supaya bermanfaat untuk orang banyak, demikianlah terima kasih 🙂

DEMO

 

Sumber https://kursuswebsite.org