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
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 :
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700|Cabin+Sketch" rel="stylesheet">
.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; }
<section class="content content--layout">
<h2 class="word word--trail">Labkom99</h2>
</section>
<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>

Posting Komentar