Sourcecode text animation berikut sangat mudah untuk dipelajari dan dimodifikasi. Anda dapat membuatnya kembali sesuai dengan tutorial tertulis mapun tutorial video di bawah.
Selain itu, anda juga dapat mendownload sourcecode text animation pada link yang sudah tersedia. Sourcecode dapat dengan mudah dimodifikasi dengan text editor kesayangan anda.
Anda dapat memanfaatkan text editor seperti Visual Studio Code, SublimeText, Notepad++, Atom atau editor keren lainnya. untuk membuat text animation seperti ini.
Walaupun text animation ini simpel, tetapi cukup menarik untuk dijadikan bahan belajar CSS dan HTML. Sehingga dengan simple nya sourcecode berikut, akan membuat kita lebih bersemangat dalam coding aplikasi.
Dasar-dasar html dan CSS yang digunakan untuk membuat text animasi seperti ini mudah dimengerti. Anda dapat dengan mudah mempelajari text animasi dengan html dan css.
Langkah-langkah untuk membuat text animasi dengan html adalah sebagai berikut:
Seperti biasa kita siapkan folder dan file index.html serta style.css terlebih dahulu. Sehingga nampak seperti gambar di bawah ini.
Untuk membuat file html berikut sebaiknya gunakan text editor kesayangan. Karena dengan text editor yang memiliki banyak fitur, tentunya akan lebih mempercepat dan mempermudah codingan.
Sourcecode untuk file index.html sangat sederhana, silahkan perhatikan code berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Salam With Animation Effects</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 data-text="Salam...">Salam...</h2>
</body>
</html>Nah, pada file style.css yang sudah kita buat, butuh beberapa pengaturan atau code CSS seperti pada penjelasan berikut ini.
Agar dapat memiliki font yang sesuai, sudah barang tentu kita ambil font. Cara mengambil font yang saat ini paling mudah adalah dengan memanfaatkan google font.
Untuk mengambil google font pada CSS silahkan perhatikan contoh code berikut ini.
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:[email protected]&display=swap');Pada pengaturan margin, padding dan jenis font dapat diatur dengan code seperti di bawah ini.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}Mengatur body html secara flex agar html ketika diload atau dibaca di berbagai macam browser dan perangkat komputer, tablet maupun HP akan menyesuaikan.
Selain itu, kita juga akan mengatur background pada body HTML. Semua settingan berikut adalah contoh, jadi anda tetap dapat mengkreasikan sendiri bentuk, warna dan jenis yang lebih anda sukai.
Sourcecode pengaturan body dengan CSS adalah sebagai berikut:
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #392525;
}Text yang akan kita berikan aninasi terletak pada tag H2, jadi kita akan mengatur komponen H2 seperti pada code berikut ini.
h2{
position: relative;
font-size: 14vw;
color: #4b0101;
-webkit-text-stroke: 0.3vw #fcf005;
text-transform: uppercase;
}Ukuran font, posisi dan warna kita atur pada CSS ini. Selain itu, huruf yang kita animasikan juga kita setel menjadi semuanya menjadi huruf kapital/ huruf besar.
Kalau anda tidak menginginkan merubah menjadi huruf besar, tinggal jadikan code text-transform menjadi comment atau hapus saja.
Selanjutnya kita perlu memberikan pra efek animasi pada tag H2. Lebih jelasnya silahkan lihat pada sourcecode berikut ini.
h2::before{
content:attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: #03e37b;
-webkit-text-stroke: 0vw #fcf005;
border-right: 2px solid #03e37b;
overflow: hidden;
animation: animate 6s linear infinite;
}Nah, langkah terakhir adalah CSS kita atur untuk menjalankan animasi. Sourcecodenya adalah sebagai berikut.
@keyframes animate{
0%,10%,100%{
width: 0;
}
70%,90%{
width: 100%;
}
}Agar anda lebih mudah mempelajari langkah-langkah membuat animasi tulisan dengan HTML dan CSS. Berikut ini kami sertakan video tutorial. Pada deskripsi video tutorial juga kami semetkan password sourcecodenya.
Silahkan disimak dengan seksama langkah-langkah pembuatan animasi text berikut.
Jika anda ingin langsung memodifikasi file yang sudah ada, silahkan unduh sourcecode berikut ini. Akan tetapi, lebih baik anda mengikuti langkah demi langkah pembuatan text animasi agar lebih faham dan mengerti penggunaan HTML dan CSS untuk membuat animasi text.
Demikianlah cara dan sourcecode text animation, semoga dapat mempermudah pemahaman kita betapa mudah dan indahnya HTML dan CSS.
Membuat navbar keren tidak begitu sulit. Hanya dengan html dan css kita sudah dapat membuat navbar yang keren tanpa harus menggunakan plugin. Untuk membuatnya ikuti langkah-langkah sebagai berikut: Daftar Isi−Pertama - Siapkan Folder dan FileKedua - Buatlah Coding di index.htmlKetiga - Membuat File CSSMengimport Google FontMengatur BackgroundMengatur tag li, a dan buttonPengaturan HeaderPosisi LogoMengatur Interaksi […]
Membuat login page keren dengan menggunakan teknologi HTML dan CSS. Pada tutorial kali ini kita akan membahas cara membuat login page yang keren. Anda dapat memanfaatkan desain login page ini untuk login page mikrotik, aplikasi php, aplikasi berbasis angular, atau login page berbasis aplikasi online lainnya. Karena dibuat dengan menggunakan html dan css, maka login […]
Rumus terbilang sangat kita butuhkan untuk membuat aplikasi yang berkaitan dengan penulisan nominal angka atau uang. Untuk aplikasi berbasis spreadsheet excel, rumus terbilang dapat anda unduh pada tautan berikut ini. Sedangkan pada kesempatan kali ini, kita akan membagikan rumus atau script terbilang dengan menggunakan bahasa pemrograman. Bahasa pemrograman yang kita gunakan javascript dan html, dengan […]
