CSS ile Daktilo Efekti Nasıl Yapılır?
Bu makalede, CSS ile daktilo efekti nasıl yapılır anlatılmaktadır. HTML ve CSS kullanarak harflerin sırayla ekrana gelmesi sağlanabilir. Animasyonlar ve CSS özellikleri ile özelleştirilebilir.
5 ay önce
Merhaba arkadaşlar, bu yazımızda CSS ile daktilo efekti nasıl yapılır, bunu anlatacağız.
Daktilo efekti, özellikle yazı animasyonları konusunda sıkça kullanılan bir tekniktir. Bu efekt, bir yazının her bir harfinin sırayla ekrana gelmesini sağlar. Yani, kullanıcılar metni yazılıyormuş gibi görür. CSS ile bu efekti oluşturmak oldukça kolaydır ve web tasarımında dikkat çekici bir etki yaratabilir. Şimdi, adım adım CSS ile daktilo efekti nasıl oluşturulacağına bakalım.
CSS ile Daktilo Efekti Nasıl Yapılır?
İlk olarak, HTML ve CSS kullanarak bu etkileyici daktilo efektini oluşturmak için temel bir yapıyı hazırlamalıyız. HTML kısmında bir metin öğesi (örneğin bir <div> veya <span>) kullanarak metni belirleriz. CSS ile ise harflerin ekrana sırayla gelmesini sağlayacak animasyonu tanımlarız.
HTML Yapısı
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Daktilo Efekti</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="typewriter">
Merhaba! Bu yazıda CSS ile daktilo efekti yapmayı öğreneceğiz.
</div>
</body>
</html>Yukarıdaki HTML yapısında, <div class="typewriter"> etiketine sahip bir metin öğesi bulunuyor. Bu metin öğesi, daktilo efekti uygulanacak alandır.
CSS ile Animasyonu Oluşturma
CSS tarafında, @keyframes özelliği kullanarak bir animasyon tanımlarız. Bu animasyon, metnin her harfini belirli bir zaman aralığıyla ekrana getirecektir.
body {
font-family: 'Courier New', Courier, monospace;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.typewriter {
font-size: 24px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid #000;
width: 0;
animation: typing 4s steps(40) 1s forwards, blink 0.75s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}Bu CSS kodunda, .typewriter sınıfına sahip öğeye typing ve blink animasyonları uygulanıyor. typing animasyonu, harflerin sırayla görünmesini sağlar. blink animasyonu ise daktilo efektinin sonundaki imlecin yanıp sönmesini simüle eder. steps(40) ifadesi, metnin toplam 40 adımda yazılmasını sağlar, bu da metnin uzunluğuna göre ayarlanabilir.
Daktilo Efektinin Özelleştirilmesi
Daktilo efekti, tamamen özelleştirilebilir. Harfler arasındaki bekleme süresi, animasyonun hızını ve yazı tipini değiştirebilirsiniz. Örneğin, yazı tipi olarak daha farklı fontlar seçebilir, yazının rengini değiştirebilir ve animasyon hızını daha hızlı ya da daha yavaş yapabilirsiniz. Ayrıca, imlecin stilini de özelleştirerek daktilo efektini daha da gerçeğe yakın hale getirebilirsiniz.
CSS ile daktilo efekti, web tasarımında oldukça etkileyici ve dikkat çekici bir animasyon seçeneğidir. Kullanımı son derece basit olan bu efekt, CSS’nin güçlü özellikleriyle kolayca uygulanabilir. Farklı hız ve yazı stilleriyle bu efekti kişiselleştirebilir ve web sitenizde dinamik bir hava yaratabilirsiniz.
Oluşturulan dosyaları aşağıya ekliyorum, kolay gelsin. Bir sonraki yazımızda görüşmek üzere!
İndir “Daktilo Efekti” Daktilo_Efekti.zip – 57 defa indirildi – 2,72 KB
Henüz yorum yapılmadı, ilk yorumu sen yapmak ister misin?