如何在 Next.js 中添加打字机效果?
在本文中,我们将学习如何在 NextJs 中添加打字机效果。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。
方法:要添加我们的打字机效果,我们将使用打字机效果包。 typewriter-effect 包帮助我们在应用程序的任何位置添加打字机效果。所以首先,我们将安装 typewriter-effect 包,然后我们将在我们的主页上添加效果。
创建 NextJS 应用程序:您可以使用以下命令创建一个新的 NextJs 项目:
npx create-next-app gfg
安装所需的包:现在我们将使用以下命令安装 typewriter-effect 包:
npm i typewriter-effect
项目结构:它看起来像这样。
添加效果:安装typewriter-effect包后,我们可以很容易地在我们的应用程序中添加打字机效果。对于这个例子,我们将把效果添加到我们的主页。
在index.js文件中添加以下内容:
Javascript
import React from "react";
import Typewriter from 'typewriter-effect';
export default function TypingEffect() {
return (
GeeksforGeeks Typing Animation
{
typewriter.typeString('Hello World!')
.callFunction(() => {
console.log('String typed out!');
})
.pauseFor(2500)
.deleteAll()
.callFunction(() => {
console.log('All strings were deleted');
})
.start();
}}
/>
);
}
说明:在上面的例子中,我们首先从安装的包中导入 Typewriter 组件。之后,我们在 Typewriter 组件中添加暂停时间、deleteAll函数和要添加文本的文本。
运行应用程序的步骤:在终端中运行以下命令来运行应用程序。
npm run dev