当前位置: 首页 > article >正文

如何用 Typed.js 制作炫酷的打字效果?

前言

在前端开发的世界中,动态和交互性是用户体验的关键。

Typed.js 是一个轻量级的 JavaScript 库,它能够以编程方式模拟打字效果,为网页增添动态的文本展示。

这篇文章将带你深入了解 Typed.js 的魔力,探索它如何为前端开发带来新的活力。

github:https://github.com/mattboldt/typed.js/

官网:https://mattboldt.com/demos/typed-js/

介绍

Typed.js 是一个简单易用的库,它允许开发者在网页上实现打字机效果。

通过简单的配置,你可以让文本以设定的速度逐字显示,然后逐字删除,再开始下一句,如此循环。

这种效果不仅能够吸引用户的注意力,还能以一种新颖的方式展示信息。

特点

  1. 轻量级Typed.js 体积小巧,不会给网页加载带来负担。

  2. 高度可定制:支持多种参数设置,如打字速度、删除速度、循环次数等。

  3. 易于集成:可以轻松集成到任何 HTML 元素中。

  4. 响应式:能够适应不同设备和屏幕尺寸。

使用场景

  • 动态欢迎信息:在网站首页展示动态的欢迎语。

  • 特色功能介绍:动态展示产品或服务的特点。

  • 动态标语:用于营销活动,吸引用户注意。

  • 交互式教程:在教学网站中引导用户学习。

使用案例

Vue 项目中,你可以这样使用 Typed.js

  1. 安装 Typed.js
npm install typed.js
  1. 在 Vue 组件中使用
<template>
  <div id="typing-demo" class="typing-container">
    <span class="typing-text"></span>
  </div>
</template>

<script>
import Typed from 'typed.js';

export default {
  name: 'TypingDemo',
  mounted() {
    new Typed('.typing-text', {
      strings: ['你好,这里是我码玄黄', '欢迎来到我的公众号', '我将每日分享好玩的技术内容'],
      typeSpeed: 50,
      backSpeed: 25,
      loop: true,
      showCursor: true,
      cursorChar: "|",
      smartBackspace: true,
      attr: null,
      bindings: null,
      contentType: 'html',
      onComplete: function(self) {
        console.log('Typed.js finished typing');
      },
      onStringTyped: function(pos, self) {
        console.log('Typed.js typed:', pos);
      },
      onLastStringBackspaced: function(self) {
        console.log('Typed.js backspace complete');
      },
      onStart: function(self) {
        console.log('Typed.js started');
      },
      onDestroy: function(self) {
        console.log('Typed.js destroyed');
      }
    });
  }
}
</script>

<style>
.typing-container {
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  color: #333;
  padding: 10px;
  background-color: #f4f4f4;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  width: 80%;
  text-align: center;
}

.typing-text {
  font-weight: bold;
  color: #007BFF;
}

.typing-container .typed-cursor {
  opacity: 1;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}
</style>

这段代码将在页面上创建一个动态打字效果,展示三句欢迎语。

效果如下:

总结

Typed.js 是一个强大的工具,它通过简单的代码就能为网页添加动态和吸引力。

无论是用于商业网站还是个人博客,它都能有效地提升用户体验。

尝试在你的下一个项目中使用它,看看它如何为你的网页带来活力。

– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。


http://www.kler.cn/a/291651.html

相关文章:

  • 使用PyInstaller打包时出现的问题
  • 使用C语言编写UDP循环接收并打印消息的程序
  • 【1.排序】
  • [JavaScript] 我该怎么去写一个canvas游戏
  • 未来趋势系列 篇五:自主可控科技题材解析和股票梳理
  • docker springboot 运维部署详细实例
  • 【避坑指南】避免几个坑,OpenCV的轮廓分析速度也可以很快!
  • 【C-实践】一对一的远程通信(tcp+epoll)
  • 浅谈维度建模、数据分析模型,何为数据仓库,与数据库的区别
  • Shell脚本字符串处理(Linux篇)
  • 机器人笛卡尔空间轨迹规划原理与MATLAB实现
  • Java【操作符】
  • 如何在本地服务器部署SeaFile自托管文件共享服务结合内网穿透打造私有云盘?
  • python办公自动化:使用`Python-PPTX`创建和操作表格
  • 行测笔记_片段阅读1(中心理解)
  • Flink优化之--旁路缓存和异步IO
  • 图像数据处理23
  • git 常用命令合集
  • 为什么要有RPC
  • OpenIPC开源IPC之重要源码包
  • Redis八种数据结构简介
  • pytorch 自定义Dataset类
  • CAS单点登录说明文档
  • EdgeGallery:聚焦 5 大行业场景,MEC 开源平台将 5G 能力拓展到边缘_边缘mec平台
  • Redis 讲解运行模式:单机、主从、哨兵、集群使用场景和区别
  • OpenCV 100道面试题及参考答案(7万字长文)