Klasik daktilo efektini oluşturmak için JavaScript'e ihtiyacınız yok. steps() işlevini kullanarak bunu yalnızca CSS ile nasıl yapacağınızı öğrenin.

Basamaklı Stil Sayfaları (CSS), başlangıcından bu yana uzun bir yol kat etti. Dilin sürekli gelişimi ve geliştirilmesi sayesinde, yalnızca CSS ile mümkün olan ve sizin bilmediğiniz şeyler mümkündür.

CSS'deki en dikkate değer gelişmelerden biri, web içeriğini şekillendirme yeteneklerini ve gücünü önemli ölçüde artıran CSS işlevlerinin ortaya çıkması ve iyileştirilmesidir.

Daktilo Etkisi Nedir?

Daktilo efekti, içeriğin aşamalı olarak ortaya çıkma sürecini simüle eden, yazma eylemini izleyicinin gözleri önünde ortaya çıkarken taklit eden bir metin animasyon tekniğidir. Bu etki eski tarz daktiloları, ilk bilgisayar terminallerini veya Komut Satırı Arayüzleri (CLI'ler).

Metnin kademeli olarak ortaya çıkışı, izleyiciyi gelişen mesaja daha fazla dikkat etmeye teşvik ederek bir gerilim ve entrika unsuru katıyor.

CSSsteps() İşlevi Nasıl Çalışır?

CSS'deki işlevler, daha önce tek başına statik stilleri kullanarak elde edilmesi zor olan bir esneklik düzeyi sunar.

instagram viewer
adımlar() işlevi, CSS animasyonlarında kullanılan popüler bir işlevdir. Animasyonların düzgün bir şekilde geçiş yapmak yerine ayrı ayrı adımlarla ilerliyormuş gibi görünmesini sağlar.

adımlar() iki parametre alan bir animasyon zamanlama fonksiyonudur. İlk parametre, animasyonunuzun gerçekleştirmesini istediğiniz adım sayısını belirtir. İkinci parametre her adımın davranışını tanımlar. için sözdizimi adımlar() işlevler şuna benzer:

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

Yukarıdaki kod bloğunda, adımlar() fonksiyonun iki parametresi vardır: N Ve yön. yön parametre ya olabilir başlangıç veya son.

ayarlamak yön ile başlangıç Animasyon başlar başlamaz ilk adımın tamamlanmasını sağlar. Oysa, ayarlama yön ile son animasyon bittiğinde son adımı çalıştıracaktır. Önemini anlatmak için adımlar() işlevi için aşağıdaki HTML koduna bir göz atın:

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

Yukarıdaki kod bloğu bir tanımlar konteyner bir çocuk div ile div. Alt div'in ekranda kaymasını istiyorsanız aşağıdaki gibi CSS animasyonlarını kullanırsınız:

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

Yukarıdaki kod bloğu şunu kullanır: Bir animasyonu tanımlamak için @keyframes kuralı adlandırılmış hareket kutusu. Bu animasyon daha sonra alt div'e uygulanarak sonsuz bir döngüde ekran boyunca düzgün bir şekilde hareket etmesine neden olur.

GIPHY aracılığıyla

Düzgün animasyondan hoşlanmıyorsanız ve "dalgalı" bir etki elde etmek istiyorsanız, adımlar() şu şekilde işlev görür:

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

Aşağıdaki GIF'te görebileceğiniz gibi, adımlar() 10 parametre değerine sahip işlev, alt div'i düzgün animasyon yerine adım adım canlandıracaktır. Adım sayısı ne kadar yüksek olursa animasyonunuz o kadar az dalgalı görünür.

GIPHY aracılığıyla

Yukarıdaki örnekte, yön parametre sağlanır. Ancak şunu atlarsanız yöntarayıcının kullanacağı son için varsayılan değer olarak yön.

Daktilo Efekti Oluşturma

Artık nasıl olduğunu anladığınıza göre adımlar() İşlev işe yarıyorsa, öğrendiğiniz her şeyi uygulamaya koymanın zamanı geldi. Yeni bir klasör oluşturun ve ona uygun bir ad verin. Bu klasöre bir ekleyin index.htm işaretleme dosyası ve stil.css stil için dosya.

İçinde index.htm dosyasına aşağıdaki standart kodu ekleyin:

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>

Yukarıdaki kod bloğu bir için işaretlemeyi tanımlar. basit HTML web sitesi. Var konteyner sahte metin içeren başka bir div'i tutan div.

Metni Canlandırmak

Aç stiller.css dosyanın genişliğini ayarlayın konteyner div'i içeriğinin genişliğine göre ayarlayın.

.container{
width: fit-content;
}

Daha sonra, şunu kullanarak @ana kareler kuralı, animasyonun zaman içinde nasıl ilerlediğini kontrol eden bir animasyon tanımlayın. Genişliği "%0" olarak ayarlayın 0%. Şu tarihte: 100%genişliğini şu şekilde "%100" olarak ayarlayın:

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

Daha sonra sınıf adına sahip öğeyi seçin metin ve ayarlayın taşma mülkiyet gizlenmiş. Bunu yapmak, yazma efekti başlamadığı sürece metnin gizli kalmasını sağlayacaktır. Bunu yaptıktan sonra metnin tek satırda kalmasını sağlayın. Beyaz boşluk mülkiyet şimdi rap. Ver metin tek aralıklı bir yazı tipi sınıflandırın ve metnin sağına yeşil bir dikey kenarlık ekleyin.

Bu kenarlık bir imleç görünümü verecektir. Uygun olanı ayarlayın yazı Boyutu ve animasyon mülkiyet Metin yaz. Son olarak şunu ekleyin: adımlar() işlevi animasyon-zamanlama-fonksiyonu.

.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);
}

Kodu tarayıcıda çalıştırdığınızda şunu görmeniz gerekir:

GIPHY aracılığıyla

Daha uzun bir yazma efekti istiyorsanız animasyon süresini ve belirtilen adım sayısını ayarlayabilirsiniz. adımlar() işlev.

İmleci Hayata Geçirmek

Daktilo efekti neredeyse tamamlandı, ancak eksik bir özellik var, o da yanıp sönen imleç. Son kod bloğunda metnin üzerine imleç görevi görecek sağa doğru bir kenarlık ayarlandığını hatırlayın. Bu imlece, tuşunu kullanarak bir animasyon ekleyebilirsiniz. @ana kareler aynı zamanda kural.

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

Özel animasyonu tanımladıktan sonra animasyon adını animasyon üzerindeki mülk metin sınıfa gidin ve süreyi 0,6 saniyeye ayarlayın.

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

Şimdi kodu çalıştırdığınızda yanıp sönen bir imleç görmelisiniz.

GIPHY aracılığıyla

CSS İşlevlerinin Gücü

CSS işlevleri, bir geliştirici olarak size dikkate değer bir araç seti sunarak web sitelerinin oluşturulma biçiminde devrim yarattı. Bu çok yönlü işlevler, bir zamanlar karmaşık kodlama dilleri için ayrılmış olan dinamik stil ve etkileşimleri mümkün kılar.

Renk manipülasyonlarından duyarlı düzenlere, animasyonlara ve yaratıcı dönüşümlere kadar CSS işlevleri, web tasarımı olanaklarını genişletti. Esnek hesaplamalar için calc(), çarpıcı arka planlar için lineer-gradient() ve Büyüleyici animasyonlar için Translate() ile görsel olarak çekici ve ilgi çekici bir kullanıcı oluşturabilirsiniz. deneyimler.