Anda tidak memerlukan JavaScript untuk membuat efek mesin tik klasik. Pelajari cara melakukannya hanya dengan CSS menggunakan fungsi langkah ().

Cascading Style Sheets (CSS) telah berkembang pesat sejak awal. Ada hal-hal yang dapat dilakukan hanya dengan CSS yang mungkin tidak Anda ketahui, berkat evolusi berkelanjutan dan peningkatan bahasa.

Salah satu kemajuan paling menonjol dalam CSS adalah kemunculan dan penyempurnaan fungsi CSS, yang telah memperluas kemampuan dan kekuatan penataan konten web secara signifikan.

Apa Efek Mesin Ketik?

Efek mesin tik adalah teknik animasi teks yang menyimulasikan proses pengungkapan konten secara progresif, meniru tindakan mengetik saat konten dibuka di depan mata pemirsa. Efek ini mengingatkan pada mesin ketik jadul, terminal komputer awal, atau Antarmuka Baris Perintah (CLI).

Kemunculan teks secara bertahap menambah unsur ketegangan dan intrik, mendorong penonton untuk memberikan perhatian yang cermat terhadap pesan yang terungkap.

Cara Kerja Fungsi Steps() CSS

instagram viewer

Fungsi dalam CSS memperkenalkan tingkat fleksibilitas yang sebelumnya sulit dicapai hanya dengan menggunakan gaya statis. Itu Langkah() fungsi adalah fungsi populer yang digunakan dalam animasi CSS. Hal ini membuat animasi tampak seperti bergerak dalam langkah-langkah yang berbeda dan terpisah, bukannya bertransisi dengan mulus.

Langkah() adalah fungsi pengaturan waktu animasi yang menggunakan dua parameter. Parameter pertama menunjukkan jumlah langkah yang Anda inginkan untuk dilakukan animasi Anda. Parameter kedua mendefinisikan perilaku setiap langkah. Sintaks untuk Langkah() fungsinya terlihat seperti ini:

animation-timing-function: steps(n, direction)

Pada blok kode di atas, Langkah() fungsi memiliki dua parameter yaitu: N Dan arah. Itu arah parameter bisa awal atau akhir.

Mengatur arah ke awal memastikan bahwa langkah pertama selesai segera setelah animasi dimulai. Padahal, pengaturan arah ke akhir akan menjalankan langkah terakhir saat animasi selesai. Untuk menggambarkan pentingnya Langkah() fungsinya, perhatikan kode HTML berikut:

<divclass="container">
<div>div>
div>

Blok kode di atas mendefinisikan a wadah div dengan div anak. Jika Anda ingin div anak meluncur melintasi layar, gunakan animasi CSS seperti ini:

.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
 100% {
transform: translateX(100vw);
 }
}

Blok kode di atas menggunakan @keyframes aturan untuk mendefinisikan animasi bernama kotak bergerak. Animasi ini kemudian diterapkan ke div anak, menyebabkannya bergerak mulus melintasi layar dalam putaran tak terbatas.

melalui GIPHY

Jika Anda tidak menyukai animasi yang halus dan ingin mendapatkan efek "berombak", Anda dapat menggunakan Langkah() berfungsi seperti ini:

div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}

Seperti yang Anda lihat pada GIF di bawah, menggabungkan Langkah() fungsi dengan nilai parameter 10 akan menganimasikan div anak secara bertahap, bukan animasi halus. Semakin tinggi jumlah langkahnya, animasi Anda akan terlihat semakin tidak berombak.

melalui GIPHY

Dalam contoh di atas, arah parameter disediakan. Namun, jika Anda menghilangkannya arah, browser akan menggunakan akhir sebagai nilai default untuk arah.

Menciptakan Efek Mesin Ketik

Sekarang setelah Anda memahami cara kerjanya Langkah() berfungsi, sekarang saatnya mempraktikkan semua yang Anda pelajari. Buat folder baru, dan beri nama yang sesuai. Di folder itu, tambahkan indeks.htm file untuk markup dan a gaya.css file untuk penataan.

Dalam indeks.htm file, tambahkan kode boilerplate berikut:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="text">
 Lorem ipsum dolor sit amet consectetur 
 adipisicing elit. Reiciendis, tempore! 
div>
div>
body>
html>

Blok kode di atas mendefinisikan markup untuk a situs web HTML sederhana. Ada sebuah wadah div yang menampung div lain dengan beberapa teks tiruan.

Menganimasikan Teks

Buka gaya.css file dan atur lebarnya wadah div dengan lebar isinya.

.container{
width: fit-content;
}

Selanjutnya, menggunakan @keyframe aturannya, tentukan animasi yang mengontrol bagaimana animasi berkembang seiring waktu. Atur lebarnya menjadi "0%" pada 0%. Pada 100%, atur lebarnya menjadi "100%" seperti ini:

@keyframes type-text {
 0% {
width: 0%;
 }
 100% {
width: 100%;
 }
}

Selanjutnya, pilih elemen dengan nama kelas teks dan atur meluap properti ke tersembunyi. Melakukan hal ini akan memastikan bahwa teks tetap tersembunyi selama efek pengetikan belum dimulai. Setelah melakukan itu, pastikan teks tetap pada satu baris dengan mengatur spasi properti ke sekarangrap. Berikan teks kelas font monospace dan tambahkan batas vertikal hijau di sebelah kanan teks.

Perbatasan ini akan memberikan tampilan kursor. Tetapkan yang sesuai ukuran huruf dan itu animasi properti ke ketik-teks. Terakhir, tambahkan Langkah() berfungsi ke fungsi pengaturan waktu animasi.

.text {
overflow: hidden;
white-space: nowrap;
font-family: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}

Saat Anda menjalankan kode di browser, inilah yang akan Anda lihat:

melalui GIPHY

Jika menginginkan efek pengetikan yang lebih lama, Anda dapat mengatur durasi animasi dan jumlah langkah yang ditentukan di Langkah() fungsi.

Menghidupkan Kursor

Efek mesin tiknya hampir selesai, meski ada satu fitur yang hilang yaitu kursor berkedip. Ingatlah bahwa di blok kode terakhir, batas kanan ditetapkan pada teks untuk dijadikan kursor. Anda dapat menambahkan animasi ke kursor ini menggunakan @keyframe memerintah juga.

@keyframes cursor-blink {
 0% {
border-color: transparent;
 }
 100% {
border-color: green;
 }
}

Setelah menentukan animasi khusus, tambahkan nama animasi ke animasi properti di teks kelas dan atur durasinya menjadi 0,6 detik.

.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}

Sekarang ketika Anda menjalankan kode, Anda akan melihat kursor berkedip.

melalui GIPHY

Kekuatan Fungsi CSS

Fungsi CSS telah merevolusi cara situs web dibangun, menawarkan perangkat yang luar biasa bagi Anda sebagai pengembang. Fungsi serbaguna ini memungkinkan penataan gaya dan interaksi dinamis yang dulunya disediakan untuk bahasa skrip yang kompleks.

Dari manipulasi warna hingga tata letak responsif, animasi, dan transformasi kreatif, fungsi CSS telah memperluas kemungkinan desain web. Dengan fungsi seperti calc() untuk penghitungan fleksibel, linear-gradient() untuk latar belakang menakjubkan, dan Translate() untuk animasi yang menawan, Anda dapat membuat pengguna yang menarik dan memikat secara visual pengalaman.