Herkese merhabalar. Eğer incelediyseniz bir çok portfoly temasında kendi kendine yazan yazı animasyonu olduğunu farketmişsinizdir. I am developer veya I am desinger gibi yazılarda developer ve desinger kısmı kendi kendine yazılıp silindiğini görmüşsünüzdür. Bu yazında da sizlere bu animasyon efektinin html,css ve javascript kullanarak nasıl yapacağınız konusunda bilgi vereceğim.
Önce yazı animasyonumuzun html kodlarını yazalım.
<!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>Text Animations</title>
</head>
<body>
<h5>
I am a
<span
class="txt-rotate"
data-period="2000"
data-rotate='[ "web designer.", "wannabe developer.", "Photoshop lover." ]'
></span>
</h5>
</body>
</html>
h5 içerisindeki I am a kısmı bizim yazı olarak sabit kalacak kısımdır. span etiketi içerisindeki kısın ise kendi kendine yazıp silinen yazı animasyonu kısmı olacaktır.
- data-period : Yazının yazılıp silineceği süreyi belirleyebileceğiniz attribute.
- data-rotate : Yazılıp silinecek yazıların listesini sağlayan attribute.
Html kısmı bu kadardı.
Şimdi ise css kısmına geçiş yapalım.
h5 {
font-weight: 200;
text-align: center;
font-family: Poppins, sans-serif;
font-size: 1.9em;
color: #000;
padding: 0;
line-height: 0.8em !important;
text-transform: none;
font-weight: 600;
}
h5 span {
color: red;
animation-delay: 2s;
font-weight: 600;
}
.txt-rotate > .wrap {
border-right: 0.08em solid #666;
}
Css kısmında ise küçük düzenleme yaptıktan sonra şimdi işin baba kısmı olan javascript kısmına geliyoruz.
JavaScript kodlamasını yapalım.
let TxtRotate = function (el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = "";
this.tick();
this.isDeleting = false;
};
TxtRotate.prototype.tick = function () {
let i = this.loopNum % this.toRotate.length;
let fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";
let that = this;
let delta = 300 - Math.random() * 100;
if (this.isDeleting) {
delta /= 2;
}
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === "") {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function () {
that.tick();
}, delta);
};
window.onload = function () {
let elements = document.getElementsByClassName("txt-rotate");
for (let i = 0; i < elements.length; i++) {
let toRotate = elements[i].getAttribute("data-rotate");
let period = elements[i].getAttribute("data-period");
if (toRotate) {
new TxtRotate(elements[i], JSON.parse(toRotate), period);
}
}
};
Evet , yukarıdaki javascrip kodunuda yazdıktan sonra index.html dosyamızı bir tarayıcıda çalıştırıp test edelim.
Animasyon test sonucu
Animasyonumuz istediğimiz şekilde çalışmakta. Artık sizler data-period ve data-rotate attribute’lerindeki verileri değiştirerek bu kendi kendine yazıp silen yazı animasyonunu özelleştirebilirsiniz. Bu yazımda sizlere nasıl kendi kendine yazıp silen yazı animasyonu nasıl yapılır onu anlatmış oldum bir sonraki blog yazımda görüşmek üzere. Yeni içeriklerden anında haber almak istiyor iseniz sol alt köşeden bildirim almak için onay verebilirsiniz.
