具有图像变化的Typed.js动画文本

Question

我正在做一个旋转木马，文本将保持静态，图像将根据typed.js列表中的关键字进行更改。我已经在静态html中集成了typed.js。我现在要做的是根据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>

Typed.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在<div>中更改image。要更改代码，如下所示：

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()