如何在 ReactJS 中旋转特定的字符串onScroll？

在本文中，我们将看到如何通过使用 npm 包react-scroll-rotate在滚动时旋转文本以提供良好的用户体验。

先决条件：

• reactJs的介绍和安装

句法：

我们将文本包裹在我们想要显示效果的这些标签中。

创建 React 应用程序和模块安装：

第 1 步：创建 react 项目文件夹，为此打开终端，如果您已经全局安装了 create-react-app，则编写命令 npm create-react-app 文件夹名称。如果您还没有，则使用命令 npm -g create-react-app 全局安装 create-react-app ，或者可以通过以下方式在本地安装 npm 我创建反应应用程序。

npm create-react-app project

第2步：创建项目文件夹（即项目）后，使用以下命令移动到该文件夹。

cd project

第 3 步：现在使用以下命令安装依赖项 react-scroll-rotate：

npm i react-scroll-rotate

项目结构：它看起来像这样：

示例：在 App.js 文件中，我们正在创建一个简单的欢迎消息，我们将在 ScrollRotate 标签中包装单词 geek，首先使用它，我们从 react-scroll-rotate 导入它并使用 inline-styling 给文本的红色。在文本上方和下方创建了两个带有一些边距的 div 标签，以便我们可以滚动查看效果。

App.js

import { ScrollRotate } from 'react-scroll-rotate';
  
function App() {
  
    return (
        

            

                
Hey!
                    
                         Geek 
                     Welcome To Geekforgeeks
                
            
            

  
        
    );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：

当我们滚动时，我们可以看到特定的单词“Geek”正在旋转。

参考： https://www.npmjs.com/package/react-scroll-rotate