Hallo sahabat kursus website private online, berjumpa lagi dalam pembahasan artikel kali ini mengenai Cara Membuat Animasi Text Dengan Splitting JS. Animasi Text bisa dibuat tentu tidak hanya dengan CSS tapi bisa juga dengan library splitting JS atau library Javascript. Animasi dengan Splitting sendiri merupakan cara memisahkan antar bagian atau setiap karakter seperti huruf.

Baiklah langsung saja kita mulai membuatnya, yuk sahabat ketikkan code dibawah ini:

Pertama buat struktur html yang berisi berikut :

<h1 data-splitting>Typing Text</h1>

pada pembuka tag h1 terdapat atribute yang dipakai untuk memanggil fungsi dari splitting js.

Jika sudah sahabat kursus website private online bisa ssisipkan plugin atau library splitting dan script nya berikut ini:

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
	<script>Splitting();</script>

Kemudian tambahkan CSS untuk mempercantik tampilan dari animasinya berikut code CSS:

*{box-sizing: border-box;}
body{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	text-align: center;
	background-color: #000000;	
}
h1{
	font-weight: 900;
	font-size: 5vw;
	line-height: 5vw;
}
h1 span{
	animation: glowtext 3000ms infinite both;
	animation-delay: calc((var(--char-index) + 1 ) * 400ms);
	text-transform: uppercase;
	text-shadow: 0 0 10px rgba(255,255,255,1),
				0 0 20px rgba(255,255,255,1),
				0 0 30px rgba(255,255,255,1),
				0 0 40px #0af4ff,
				0 0 60px #0af4ff,
				0 0 80px #0af4ff,
				0 0 100px #0af4ff;
}

@keyframes glowtext{
	0%{
		font-size: 7vw;
	}
	60%{
		font-size: 13vw;
	}
	100%{
		font-size: 7vw;
	}
}

Baiklah selanjutnya simpan dan lihatnya pada browser masing-masing maka akan seperti ini:

cara membuat animasi-teks-dengan-splitting-js-edi-170420

Saya kira cukup dalam pembahasan kali ini Cara Membuat Animasi Teks Dengan Splitting JS kawan kawan kursus privat website online. Semoga bermanfaat dan sampai jumpa lagi.

terima kasih