JJavascript

Yazıya Silme ve Yazma Animasyonu (Typewriter)

  • 19 Ekim 2020
  • 1,1K görüntüleme
  • 2 yorum
  • 2 dk okuma süresi
Bu yazımda Javascript ile yapılan ve bir çok creative sitede gözüme çarpan bir animasyondan bahsettim. Javascript ile ilgili silinip tekrar yazılabilen bir animasyon içermektedir.
0
Shares
0
0
0
0
0
0
0

Merhabalar,

Bu yazımda Javascript ile yapılan ve bir çok creative sitede gözüme çarpan bir animasyondan bahsedeceğim.

 

Öncelikle yeterli seviyede javascript bilginizin olduğunu varsayıyorum. Eğer yok ise birazdan paylaşacağım javascript kodunu sitenize ekledikten sonra html içinde belirteceğim alandaki kelimeleri değiştirerek rahatlıkla kullanabilirsiniz.

Bu animasyonu codepen hesabımda paylaştım. Dilerseniz oradan kaynak kodlarının hepsine bir arada ulaşıp göz atabilirsiniz. Canlı gösterimi kaynak kodları paylaştıktan sonra codepen üzerinden göstereceğim.

Html Kodumuz;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript ile Yazıya Silme ve Yazma Animasyonu</title>
</head>
<body>
    
<div class="animation_text">
         <h1>Ben web
             <span class="typewrite"
                   data-period="2000"
                   data-words='[" Geliştiricisiyim.", " Tasarımcısıyım.", " Uzmanıyım."]'>
             </span>
         </h1>
     </div>
</body>
</html>

Gördüğünüz gibi klasik HTML taglarımızı yerleştirdik. Kapsayıcı bir div‘imiz, cümlenin tamamını oluşturan h1 başlık etiketimiz ve değişecek kısım ve başrolümüz olan span etiketlerimiz html sayfamızda bulunuyor. Burada önemli olan birazdan ekleyeceğimiz Javascript koduyla birlikte değer kazanacak data- nitelikleridir.

Hemen açıklayalım;

Data-period niteliği kelime yazıldıktan sonra kaç saniye ekranda kalmasını istediğimiz süreyi ayarlayacak.

Data-words niteliği ise sırayla göstereceğimiz kelimeleri dizi şeklinde sakladığımız alan olacak. Tırnak içine göstermek istediğimiz kelimeleri listeliyoruz.

Data- “-” işaretinden sonraki kelimeleri ve class isimlerini dilediğiniz gibi değiştirebileceğinizi hatırlatayım. Codepen hesabım üzerinde de paylaştığım için global isimler kullanmaya çalışıyorum. Değiştirirseniz, değiştirdiğiniz kelimeleri css ve javascript dosyalarından da değiştirmeyi unutmayalım

Tasarım kısmını da unutmamak lazım. Font ve renk ayarlamalarımız için kısa bir css kodu ekleyelim.

@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap";

.animation_text h1 {
font-family:"Poppins",Sans-serif;
text-align:center;
color:#373150;
font-size:60px;
font-weight:500;
line-height:70px;
}

.animation_text h1 span {
color:#56A274
}

@media(max-width:768px) {
.animation_text h1 {
font-size:30px
}
}

Biraz css bilginiz varsa yukarıdaki kısa kodun ne işe yaradığını kolaylıkla anlayabilirsiniz. Söylediğim gibi yazı ile ilgili stil verildi sadece. @media kısmında ise küçük ekranlarda yazı boyutunu küçülttüm.

Sıra javascript kodumuzda. Bunu hazır bir yapı olarak görebilirsiniz. Üzerinde çok düzenleme yapmanıza gerek yoktur. Data- niteliklerini değiştirirseniz bu dosya üzerinden de değiştirmeniz gerekmektedir sadece. Eğer html nitelik isimlerinde değişiklik yapmazsanız javascript dosyasında bir düzenleme yapmanız gerekmez.

var Text = 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;
};

Text.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var 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>';

  var that = this;
  var delta = 200 - 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() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-words');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new Text(elements[i], JSON.parse(toRotate), period);
    }
  }
};

İşte bu kadar. Html dosyasına css ve js dosyalarınızı bağlayıp kullanabilirsiniz. Şimdi size codepen üzerinden paylaştığım örnek ile birlikte nasıl bir şey yaptığımızı göstereyim. Kodlara direkt olarak buradan da ulaşabilirsiniz.

 
Mutlu Kodlamalar 🙂

0 Shares:
0
0
0
0
0
0
2 comments

  1. Selamünaleykum kardeşim saatlerdir bu kodları arıyorum herkes başka bir telden çalıyor ama çok şükür ki senin sayfana rastladım çok şükür buldum,anlatımın sunumun çok başarılı yürüdüğün yolda Rabbim yoldaşın olsun Başın öne eğilmesin ,çok teşekkür ederim saygılar sevgiler kardeşim 🙂 :)…

    Yanıtla

Benimle yorumunu paylaş;

— Önceki Yazı

furkangiray.com Hakkında

Sonraki Yazı —

Sabit Konumlandırma

Bunlara da göz atabilirsin