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.

 

Baca Juga : Membuat Efek Animasi Tesk Kartun Dengan HTML CSS3 Dan Google Font

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

 

Baca Juga : 30 Efek Animasi Mouse Hover Tombol Button Keren Dengan HTML Dan CSS3

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 :

Baca Juga : Membuat Animasi Teks Dengan HTML5 Dan Canvas

<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 :

Baca Juga : Membuat Animasi Kursor Mouse Dengan HTML Dan Canvas

<section class="content content--layout">
    <h2 class="word word--trail">Labkom99</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 :

Baca Juga : Membuat Animasi Teks Dengan HTML5 Dan Canvas

Afek animasi teks muncul ketika mouse diarahkan pada huruf.

Untuk source code lengkapnya Lisa di Download di link tartera