js ile animasyonlu text banner yapımı

 <style>
.word {
  color: red;
  font-size: 20px;
  font-family:'tahoma';
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var words = ['paylaşın', 'sabitleyin', 'puan verin', 'yorum yapın', 'Üyeleri takip edin'],
    part,
    i = 0,
    offset = 0,
    len = words.length,
    forwards = true,
    skip_count = 0,
    skip_delay = 15,
    speed = 75;
var wordflick = function () {
  setInterval(function () {
    if (forwards) {
      if (offset >= words[i].length) {
        ++skip_count;
        if (skip_count == skip_delay) {
          forwards = false;
          skip_count = 0;
        }
      }
    }
    else {
      if (offset == 0) {
        forwards = true;
        i++;
        offset = 0;
        if (i >= len) {
          i = 0;
        }
      }
    }
    part = words[i].substr(0, offset);
    if (skip_count == 0) {
      if (forwards) {
        offset++;
      }
      else {
        offset--;
      }
    }
    $('.word').text(part);
  },speed);
};
$(document).ready(function () {
  wordflick();
});
</script>
<a href="https://pirepin.com" target="_blank" style="text-decoration: none;">
<div style=" border: 1px solid; height: 60px; width: 468px;     background-color: #d9ffe3;">
<div style="float: left; text-align: center; color: rgb(0, 0, 0); font-size: 20px; font-family:'tahoma'; padding: 5px;"><img src="icon.png" style="width: 30px;"><br>Pirepin.com</div>
<div style="text-align: center;">
<div style="color: rgb(0, 0, 0); font-size: 20px; font-family:'tahoma'; padding: 3px;">Site Tanıtımı, Bookmark ve Dizin Sitesi</div>
<div class="word"></div>
</div>
</div>
</a>