Набрано. js анимированный текст со сменой изображения

Question

Я работаю над каруселью, где текст будет оставаться c, а изображения будут меняться в соответствии с ключевым словом из набранного. js списка. Я интегрировал набранный . js в stati c html. Что я хочу сделать сейчас, так это изменить изображения в соответствии со словами из списка typed. js, который анимируется в то время. Мой код:

    <div class="main hero-box">
        <div class="col-xl-7 col-lg-7 col-md-7 col-sm-7 col-xs-12">
           <span class="design">We Design</span>
           <span id="existing-text"></span>    
        </div>
        <div class="product-image col-xl-5 col-lg-5 col-md-5 col-sm-5 col-xs-12">
                   <!-- This image should change according to the keywords from typed.js strings: ["new Text First", "New Text Second"] -->
                    <img class="image-replacement hero-image fade-in" src="assets/images/hero-section/product-icon.png"/>
         </div>
    </div>

набран. js Скрипт:

    <script>
        var typed = new Typed('#existing-text', {
        strings: ["New Text First ", "New Text Second"],
        backSpeed: 80,
        typeSpeed: 80,
        loop: true,
        startDelay: 100,
        backDelay: 500,            
                     });
    </script>

Answer 1

Вы можете использовать javascript для замены image внутри <div>. Чтобы получить этот код изменения, как показано ниже:

Html

 <div class="main hero-box">
   <div class="col-xl-7 col-lg-7 col-md-7 col-sm-7 col-xs-12">
     <span class="design">We Design</span>
     <span id="existing-text"></span>    
   </div>
   <div class="product-image col-xl-5 col-lg-5 col-md-5 col-sm-5 col-xs-12">
      <!-- Images will be added here via JS -->
   </div>
 </div>

Javascript (чистый код)

// String array that you will pass in `Typed` 
const stringsArray = ["First", "Second", "Third"];

// Let's take the element where we need to render our images
const imgBox = document.querySelector(".product-image");

/** This function will tell which image we need to show 
 * inside `imgBox` according to which string name. 
 * (I used random images, you can pass "src" here in return)
**/
function getImageSrc(name) {
  switch (name) {
    case "First":
      return "https://homepages.cae.wisc.edu/~ece533/images/airplane.png";
    case "Second":
      return "https://homepages.cae.wisc.edu/~ece533/images/baboon.png";
    case "Third":
      return "https://homepages.cae.wisc.edu/~ece533/images/cat.png";
  }
}


/** 'onStringTyped' method will be used here to get 
* which string is typed. This function gets index of the array, 
* we use it to get the name of image.
**/ 
var typed = new Typed('#existing-text', {
  strings: stringsArray,
  backSpeed: 80,
  typeSpeed: 80,
  loop: true,
  startDelay: 100,
  backDelay: 500,
  onStringTyped: function(index) {
    const name = stringsArray[index];
    let img = document.createElement("img");
    img.width = "100";
    img.src = getImageSrc(name);
    imgBox.innerHTML = "";
    imgBox.appendChild(img);
  },
});

Вы можете найти рабочий пример здесь: Демо

Answer 2

Прежде всего, нам нужно где-то хранить изображения и текст. Это можно сделать с помощью двух массивов:

const images = [
  "image-src-here",
  "second-src-here"
]

const text = [
  "first-text-here",
  "second-text-here"
]

Затем мы можем использовать параметр onStringTyped Typed. js для обновления текста:

var typed = new Typed('#existing-text', {
        strings: text,
        backSpeed: 80,
        typeSpeed: 80,
        loop: true,
        startDelay: 100,
        backDelay: 500,
        
        onStringTyped: (pos) => {
            // Make sure your image tag has an id of "image"
            document.getElementById("image").src = images[pos]
        }
});

В качестве альтернативы вы также может хранить изображения / текст в объекте:

const messages = {
  "first-text-here": "image-src-here",
  "second-text-here": "second-src-here"
}

Затем создайте массив text и images, используя messages:

const text = messages.keys()
const messages = messages.values()