Как вставить своё изображение при анимации печати теста?

Question

Игрался с настройками плагина typeIt.js для анимации печати теста, все было хорошо если вставлять смайлы текстом, но есть ли какой то способ вставить свою картинку(иконку смайлика) при анимации печати теста? Меня смайлы почти угодили, но есть одно но, в каждом браузере они отображаються по-разному и это ну такоеее.

Вот смайл котика в Apple: Текст

А вот в Microsoft: Текст

ВОПРОС: Как вставить свою иконку при анимации печати плагином typeIt.js и можно это воопше сделать? Если ответ: "неа", то есть плагин таким функционалом, чтобы смайлы отображались всегда одинаковыми (например Apple) на разных девайсах.

$(function(){
  'use strict';
  new TypeIt(".beauty__typetext", {
     speed: 175,
     deleteSpeed: 70,
     loop: true
  })
     .type("а погладь ?", { delay: 300 })
     .delete()
     .type("а попей ☕", { delay: 300 })
     .delete()
     .go();
});

// ==> section-beauty <==
.beauty__inner {
  margin: 0 auto;
}
.beauty__title {
  font-size: 22px;
  line-height: 30px;
  color: #000;
}
.beauty__typetext {
  color: #CEE7BA;
}
// ==X section-beauty X==

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typeit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Section-Beauty -->
<section class="beauty" id="beauty">
  <div class="beauty__inner">
     <h6 class="beauty__title title">
        Не сиди допоздна, <span class="beauty__typetext"></span>
     </h6>
  </div>
</section>
<!-- Section-Beauty END! -->

Документация скрипта typeIt: https://typeitjs.com/docs

Answer 1

В передаваемых опциях есть свойство html, по умолчанию оно равно true. Следовательно передавать можно не только обычную строку, но и html разметку.

Например:

вместо иконки используем span с фоновой картинкой. При первом запуске, картинка может не успеть загрузиться, но это в принципе решаемо размером картинки, и предварительной загрузкой.

$(function() {
  'use strict';

  new TypeIt(".beauty__typetext", {
      speed: 175,
      deleteSpeed: 70,
      loop: true
    })
    .type("а погладь <span class='cat'>&nbsp;</span>", {
      delay: 3000
    })
    .delete()
    .go();
});

.beauty__inner {
  margin: 0 auto;
}

.beauty__title {
  font-size: 22px;
  line-height: 30px;
  color: #000;
}

.beauty__typetext {
  color: #CEE7BA;
}

.cat {
  display: inline-block;
  background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/cat_1f408.png');
  background-size: cover;
  width: 30px;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typeit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Section-Beauty -->
<section class="beauty" id="beauty">
  <div class="beauty__inner">
    <h6 class="beauty__title title">
      Не сиди допоздна, <span class="beauty__typetext"></span>
    </h6>
  </div>
</section>
<!-- Section-Beauty END! -->

БЛОГ НА HUSL

Как вставить своё изображение при анимации печати теста?

Ответы (1 шт):