JavaScript atau yang juga populer dengan sebutan JS menjadi bahasa pemrograman yang sangat populer. Bahasa ini sering digunakan untuk mempercantik tampilan website maupun aplikasi lainnya. Salah satunya adalah untuk membuat teks bergaya animasi. Lalu sebenarnya bagaimana Cara Membuat Animasi Teks Dengan Splitting JS?
Secara umum, membuat teks bergaya animasi terkesan gampang-gampang susah. Jika Anda sebelumnya sudah mengenal dasar-dasar mengenai HTML ataupun CSS sepertinya tidak akan terlalu kesulitan untuk melakukannya. Sebab kedua bahasa tersebut merupakan bagian penting dalam pembuatan sebuah tampilan website.
Mengenal Apa Itu JavaScripst (JS)
Mungkin masih banyak diantara Anda yang belum terlalu familiar dengan apa itu JavaScript. Terlebih untuk orang-orang yang tidak berkecimpung dalam dunia pemrograman. Sehingga wajar jika masih asing dengan bahasa yang satu ini.
Bahkan mungkin banyak diantara Anda yang menganggap bahwa Java dan JavaScript adala dua bahasa yang sama. Namun sejatinya keduanya merupakan bahasa pemrograman yang berbeda dan penggunaannya pun sangat berlainan.
Ringkasnya, JavaScript adalah sebuah bahasa pemrograman berbasis teks yang bisa digunakan pada sisi klien ataupun server sehingga memungkinkan developer bisa mengembangkan website yang interaktif.
HTML dan CSS adalah kombinasi dua bahasa pemrograman yang memberikan struktur dan gaya pada sebuah website. Sementara itu, JavaScript akan memberikan tambahan elemen interaktif di dalam tampilan website.
Secara teknis JavaScript termasuk bahasa pemrograman jenis interpreter. Artinya, Anda tidak akan membutuhkan compiler untuk bisa menjalankan bahasa pemrograman yang satu ini. Fitur yang dimiliki pun terbilang sangat lengkap.
Mulai dari fitur yang berorientasi pada objek, client-side, high-level programming, dan lain sebagainya. Menambahkan kode JavaScript akan mengubah laman website statis menjadi halaman dengan tampilan yang interaktif.
Meskipun bisa membuat tampilan website menjadi lebih interaktif, namun sebenarnya JavaScript bukan elemen wajib dalam suatu website. Jadi Anda boleh saja memasang atau melepas kode JS dari website Anda. Meski demikian, mayoritas website sekarang ini menggunakan kode JavaScript untuk meningkatkan pengalaman pengguna.
Keunggulan Bahasa Pemrograman JavaScript (JS)
Hingga sekarang ini, JavaScript masih menjadi salah satu bahasa program yang sangat populer dan banyak digunakan oleh berbagai kalangan. Pasalnya, bahasa program ini memiliki sejumlah keunggulan yang cukup menjanjikan. Sebagai informasi, berikut adalah beberapa keunggulan utama dari JavaScript (JS).
1. Penggunaan JavaScript Sangat Luas
Salah satu keunggulan yang dimiliki oleh JavaScript adalah penggunaannya yang terbilang sangat luas. Hingga saat ini, JavaScript tidak hanya digunakan pada sisi client(browser) saja. Namun bahasa ini juga bisa digunakan di luar browser seiring dengan adanya perkembangan Node.js.
Maka dari itu, JavaScript tidak bisa digunakan dalam ranah penggunaan yang semakin luas. Misalnya saja mengembangkan sisi back-end (server), console, program desktop, IoT, game, dan lain sebagainya.
2. Penggunaan yang Stabil
Perlu Anda ketahui bahwa JavaScript termasuk bahasa pemrograman yang sudah cukup matang. Sehingga penggunaannya pun terbilang sangat stabil dalam berbagai bidang termasuk untuk pembuatan website yang interaktif.
Saat ini banyak browser modern yang memiliki sifat dinamis dan juga interaktif. Logika bahasa pemrograman yang sebelumnya harus di-handle oleh sisi server, kini sepenuhnya dapat ditangani oleh sisi browser. Sehingga para developer tidak perlu bingung lagi untuk menambahkan elemen interaktif pada tampilan website.
3. Dukungan Komunitas yang Luas
Keunggulan lain yang membuat JavaScript semakin banyak digandrungi adalah karena adanya dukungan komunitas yang begitu luas. Jumlah pengguna bahasa JS yang sangat banyak, menjadikan dukungan komunitas pengguna JS menjadi lebih maksimal.
Dengan adanya dukungan komunitas ini, Anda bisa mencari tahu solusi dari permasalahan yang dialami ketika menggunakan JavaScript. Berbekal dengan adanya dukungan komunitas yang luas ini Anda pun akan bisa lebih terbantu saat menangani sejumlah permasalahan saat coding.
4. Bahasa JavaScript Mudah Dipelajari
Secara umum setiap bahasa pemrograman akan memiliki tingkat kesulitan yang berbeda-beda antara satu dan yang lainnya. Tingkat kesulitan ini salah satunya disebabkan oleh faktor syntax atau penulisan instruksi.
JavaScript sendiri termasuk bahasa program yang relatif cukup mudah untuk dipelajari. Namun tentu saja Anda perlu tekun dan serius dalam mempelajarinya. Mudahnya mempelajari JavaScript ini sendiri sebenarnya lebih berkaitan dengan penulisan syntax yang cukup singkat.
Sebagai contoh, untuk menuliskan “Hello World” menggunakan bahasa JavaScript, Anda hanya perlu menuliskan :
console.log(.’Hello World’)
Dengan perintah tersebut maka Anda bisa langsung memunculkan tampilan tulisan Hello World pada browser.
Cara Membuat Animasi Teks Dengan Splitting JS
Setelah mengetahui secara sekilas tentang apa itu JavaScript, pembahasan kali ini pun akan berlanjut mengenai Cara Membuat Animasi Teks Dengan Splitting JS. Sebagai informasi, berikut adalah pembahasan terkait cara pembuatan teks bergaya animasi dengan menggunakan fitur JS Splitting.
1. Apa Itu JS Splitting?
JS Splitting adalah sebuah upaya untuk memecah suatu kode JavaScript utuh menjadi beberapa bagian. Nantinya, Anda perlu membagi setiap kode JavaScript sesuai dengan kebutuhan file tersebut.
Cara ini bisa dilakukan dengan cara menuliskannya secara langsung dalam satu file html langsung ataupun bisa juga menggunakan teknik @import pada JavaScript. Anda bisa memilih preferensi mana yang sesuai selera. Namun umumnya menggunakan fitur impor lebih disukai karena struktur kode bisa dipecah dan memudahkan dalam pencarian bug.
Fitur ini sangat berguna baik itu dari sisi server maupun bagi sisi klien. Bagi programmer, penggunaan fitur Splitting akan memudahkan proses penyusunan kode dan pencarian bug. Sedangkan pada sisi klien akan membuat akses web atau aplikasi menjadi lebih cepat karena hanya memuat kode yang dibutuhkan saja.
2. Cara Membuat Animasi Teks Dengan Splitting JS
Untuk membuat teks animasi, terlebih dahulu Anda perlu membuka Text Editor yang biasa digunakan untuk membuat kode. Anda bisa menggunakan NotePad ++, Atom, Sublime, ataupun bisa juga menggunakan VSCode.
Langkah pertama yang perlu Anda lakukan adlaah dengan membuat struktur HTML seperti berikut ini.
<h1 data-splitting>Typing Text </h1>
Pada bagian pembuka H1 tersebut terdapat atribut yang akan digunakan untuk memanggil fungsi splitting JS.
Kalau sudah, Anda bisa menambahkan library splitting JS dengan cara berikut ini :
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script> <script>Splitting();</script>
Kalau sudah maka Anda bisa menambahkan file CSS berikut ini untuk mempercantik tampilan teks Anda.
*{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;
}
}
Setelah itu Anda hanya perlu menyimpan dan kemudian mengecek hasilnya pada browser yang dimiliki.
Itulah ulasan mengenai Cara Membuat Animasi Teks Dengan Splitting JS yang perlu Anda ketahui. Semoga pembahasan di atas bisa memberikan manfaat.