Membuat efek animasi teks keren menggunakan HTML5

Labkom99.Com – Membuat efek animasi teks keren menggunakan HTML5. Efek teks ini menghasilkan efek animasi magis saat mouse digerakkan atau diklik pada teks. Karena efek animasi teks HTML5 ini menggunakan fitur seperti CSS Grid dan variabel CSS, tidak semua browser mendukung efek teks ini.

Berikut adalah beberapa tangkapan layar dari efek animasi teks keren HTML5. Setelah teks dibuat dan di tampilkan di web browser, Anda juga dapat berinteraksi dengan teks tersebut dengan mouse. Pada saat mouse di arahkan ke tesk efek animasi akan muncul dan membuat gelembung pada huruf tesk tulisan tersebut.

Animasi teks keren ini dapat dipergunakan untuk mempercantik tampilan website anda. Dengan hanya menggunakan source code HTML dan CSS yang simple, anda sudah dapat membuat efek animasi teks keren.

Alat / Bahan Baku

Notepad

Bisa menggunakan Tools web programming Lain

Perhatian

Sebelum belajar membuat animasi teks keren pada bagian ini sabaiknya memahami terlebih dahulu tentang Tutorial Belajar Dasar – Dasar HTML: Hypertext Markup Language. Dan bagi yang belum mengetahui cara membuat template, cara menyimpan dan cara membuka file HTML dapat mempelajarinya pada artikel Bagaimana Cara Membuat Template HTML

Metode / Langkah

Dalam membuat animasi teks keren hanya membetuhkan beberapa trik HTML5 yang sangat sederhana. Membuat efek animasi teks keren menggunakan HTML5 dengan sedikit memberikan sentuhan JQuery untuk membuat efek teks supaya lebih keren.

Langkah Pertama adalah membuat style font yang akan digunakan pada teks. pada kesempatan kali ini menggunakan google font. Kodenya seperti dibawah ini :

<link href="https://fonts.googleapis.com/css?family=Nunito:400,700|Cabin+Sketch" rel="stylesheet">

Kemudian untuk mendesain tampilan di perlukan kode CSS berikut ini :

.word--trail {
	font-size: 12vw;
	font-family: 'Cabin Sketch', sans-serif;
	font-weight: 400;
	color: #c6f70a;
	line-height: 0.8;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0.15em;
}

.word--trail span {
	display: block;
	position: relative;
	z-index: 100;
}

.word--trail span span {
	pointer-events: none;
}

.word--trail span span:not(:last-child) {
	position: absolute;
	color: #cc8065;
}

Kode HTML yang digunakan untuk membuat dan menulis font dalam Membuat efek animasi teks keren berikut ini :

<section class="content content--layout">
    <h2 class="word word--trail">Labkom99- Membuat efek animasi teks keren menggunakan HTML5</h2>
</section>

Untuk efek animasi teksnya menggunakan JQuery dibawah ini :

<script src="js/charming.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/demo.js"></script>
<script src="js/demo6.js"></script>

Dan demonya kira-kira seperti gambar yang ditampilkan dibawah ini :