图像上超棒的打字效果叠加（CSS+JS）部分：

2025-06-04

图像上超棒的打字效果叠加（CSS+JS）

章节：

这是一个关于如何在图片上创建文字效果叠加层的教程。它只用 CSS 和 JS 实现，没有使用任何额外的库。效果如下：

这里，打字效果被添加到了英雄图片上。英雄图片是放置在网页显著位置的大型图片（来源：维基百科）。它的作用是立即吸引访客的注意力。

章节：

  1. 步骤 1 - 查找图像
  2. 第 2 步 - 使用 CSS 进行美化
  3. 步骤 3 - 使用 JS 创建打字效果
    1. JS代码解释
  4. 完整代码（codepen）

步骤 1 - 查找图像

  • 首先，我们先找到一张最符合我们需求的英雄图片。我获取免费图片的网站是https://www.pexels.com/。找到图片后，创建一个新的 HTML 文件，并在 body 标签内添加以下脚本。将 hero_image.jpg 替换为你自己的图片的路径和名称。
<div class="container">
        <img src="hero_image.jpg" alt="Hero Image">
        <div class='console-container'>
            <span id='text'></span>
            <div class='console-underscore' id='cursor'>|</div>
        </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

现在你的页面应该如下所示：

第 2 步 - 使用 CSS 进行美化

  • 现在我们将添加一些 CSS，使我们的图片看起来像英雄图片，从而吸引更多注意力。在 CSS 文件或 HTML 中的样式选项卡中添加以下代码。
        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');

        .console-container {
            font-family: 'Open Sans', sans-serif;
            font-size: 4vw;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .console-underscore {
            display: inline-block;
            position: relative;
            color: white;
        }

        .container {
            position: relative;
            text-align: center;
        }
        img {
            width:100%;
        }
Enter fullscreen mode Exit fullscreen mode

现在你的页面应该如下所示：

别介意竖线。下一步我们会给它添加动画效果，并将其用作光标。

步骤 3 - 使用 JS 创建打字效果

  • 最后一步是添加我们想要动画的文本，并使用 JavaScript 来实现动画效果。为此，添加以下代码块，它是一个我们可以调用的函数：

重要提示：请将此脚本放置在包含图片的 div 标签下方。否则打字效果将无法实现。

function typing_effect(words, colors) {

      var cursor = document.getElementById('cursor'); //cursor
      var text = document.getElementById('text') //text

      var blink = true;
      var wait = false;
      var letters_count = 1;
      var temp = 1;

      text.style.color = colors[0]
      window.setInterval(function () { //wait between words when it starts writting
        if (letters_count === 0 && wait === false) {
          wait = true;

          text.innerHTML = '' // leave a blank
          window.setTimeout(function () {
            var usedColor = colors.splice(0, 1)[0] //remove first element and get it as str
            colors.push(usedColor);
            var usedWord = words.splice(0, 1)[0]
            words.push(usedWord);
            temp = 1;
            text.style.color = colors[0]
            letters_count += temp;
            wait = false;
          }, 1000)
        } else if (letters_count === words[0].length + 1 && wait === false) {
          wait = true;
          window.setTimeout(function () { //wait a bit until words finished and start deleting
            temp = -1;
            letters_count += temp;
            wait = false;
          }, 1000)
        } else if (wait === false) { //write words                    
          text.innerHTML = words[0].substr(0, letters_count)
          letters_count += temp;
        }
      }, 120)
      window.setInterval(function () {
        if (blink) {
          cursor.style.opacity = "0";
          blink = false;
        } else {
          cursor.style.opacity = "1";
          blink = true;
        }
      }, 400)
    }
Enter fullscreen mode Exit fullscreen mode
  • 函数调用如下：typing_effect(words , colors)。这些参数是列表。第一个参数是一个字符串列表，包含所有将显示的短语。第二个参数是一个字符串列表，包含每个短语将具有的颜色。注意：这两个列表的长度不必相同。在我的示例中，调用方式如下： 
typing_effect(['Hello World', 'My name is Harry', 'I am a programmer', 'This is a JS+CSS example'],
            ['#FFFFFF', 'orange', 'blue', 'yellow']);
Enter fullscreen mode Exit fullscreen mode

JS代码解释

如果您想跳过代码的解释，只需单击此处转到下一部分。

参数

该代码是一个接受两个输入参数的函数。它们已在上一节中解释过。

函数调用如下：typing_effect(words , colors)。这些参数是列表。第一个参数是一个字符串列表，包含所有要显示的短语。第二个参数是一个字符串列表，包含每个短语将具有的颜色。注意：这两个列表的长度不必相同。

变量

var cursor= document.getElementById('cursor');- 获取光标
var text= document.getElementById('text');- 获取将添加文本的区域
var blink= true;- 显示/隐藏光标的标志
var wait= false;- 等待短语之间的标志
var letters_count= 1;- 计数字母的 int
var temp= 1;- 用于递增/递减的 intletters_count

功能

setTimeout该函数由两个函数组成setInterval。第一个函数setInterval用于输入短语，删除它们，然后输入下一个短语。
这段代码在短语之间等待一段时间，然后开始输入下一个短语。

  if (letters_count === 0 && wait === false) {
          wait = true;

          text.innerHTML = '' // leave a blank
          window.setTimeout(function () {
            var usedColor = colors.splice(0, 1)[0] 
            colors.push(usedColor);
            var usedWord = words.splice(0, 1)[0]
            words.push(usedWord);
            temp = 1;
            text.style.color = colors[0]
            letters_count += temp;
            wait = false;
          }, 1000)
}
Enter fullscreen mode Exit fullscreen mode

这段代码在短语输入后等待 1 秒，然后开始删除它。

 else if (letters_count === words[0].length + 1 && wait === false) {
          wait = true;
          window.setTimeout(function () {
            temp = -1;
            letters_count += temp;
            wait = false;
          }, 1000)
        }
Enter fullscreen mode Exit fullscreen mode

这段代码只是输入单词

else if (wait === false) {                    
          text.innerHTML = words[0].substr(0, letters_count)
          letters_count += temp;
        }
Enter fullscreen mode Exit fullscreen mode

最后，这段代码使光标闪烁，以模拟打字时的光标。

window.setInterval(function () {
        if (blink) {
          cursor.style.opacity = "0";
          blink = false;
        } else {
          cursor.style.opacity = "1";
          blink = true;
        }
      }, 400)
Enter fullscreen mode Exit fullscreen mode

完整代码

  • codepen 中的完整代码如下：

就是这样！
希望你觉得这很简单而且有用。

希望你喜欢它😄。

探索愉快！！

文章来源：https://dev.to/charalambosianonnou/awesome-typing-effect-overlay-on-images-css-js-2nof
Devto 翻译
PREV
初学者指南 - 面向对象编程
NEXT
使用纯 HTML、CSS 和 JavaScript 创建响应式作品集网站（第二部分）