Cara Membuat Animasi Warna Pelangi dengan Javascript

Pernahkah kalian melihat pelangi ? yah, perpaduan warna yang sangat cantik membuat kita takjub untuk melihatnya, Nah bagaimana kalau sebuah teks diberikan animasi warna pelangi, apa kalian pernah melihat nya ? pada artikel kali ini saya akan membahas bagaimana Cara Membuat Animasi Warna Pelangi dengan Javascript . biasanya dalam warna pelangi dalam website bisa kita sebut dengan Rainbow.Pelangi ataupun Rainbow merupakan susunan warna yang dipadukan sedemikian rupa sehingga terlihat menarik dan cantik untuk dilihaat, berikut adalah langkah-langkah untuk membuat animasi warna pelangi.

Langkah pertama buat file dengan format .html kemudian kalian ketikan sintak HTML berikut.

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

Pada bagian paragraf kalian bisa isikan beberapa paragraf, semakin banyak maka akan semakin bagus untuk tampilan animasi pelangi nya. Setelah itu tambahkan sintak CSS3 berikut untuk mengatur paragraf diatas supaya terlihat rapih, berikut sintak CSS3.

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

Sintak CSS3 diatas merupakan pengaturan lebar dari paragraf dan kerapihan teks saja, silahkan kalian bisa menambahkan yang lain nya kalo diperlukan. Selanjutnya untuk membuat 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 pada HTML.

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

Setelah semua kode diatas diketikan pastikan file tersimpan kemudian coba jalankan pada browser masing-masing dan lihat hasilnya. Kalau sintak diatas diketikan dengan benar maka nanti akan terlihat animasi pelangi pada teks secara otomatis. Bagaimana cukup mudah bukan ? Baik itulah tadi pembahasan artikel mengenai Cara Membuat Animasi Warna Pelangi dengan Javascript . jika artikel ini bermanfaat silahkan share supaya bermanfaat bagi orang banyak, sekian terima kasih 🙂

DEMO

Cara Membuat Animasi Warna Pelangi dengan Javascript

Kategori