In, this article, we will see how we can rotate a text while Scrolling to give a nice user experience by using an npm package react-scroll-rotate.
Prerequisite:
- Introduction and installation reactJs
Syntax:
<ScrollRotate> </ScrollRotate>
We wrap the text within these tags which we want to show effects.
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency react-scroll-rotate by using the following command:
npm i react-scroll-rotate
Project Structure: It will look like this:
Example: In the App.js file, we are creating a simple welcome message where we will wrap the word geek within the ScrollRotate tags, to use it first we have imported it from react-scroll-rotate and have used inline-styling to give red color to the text. created two div tags above and below the text with some margins so that we can scroll to see the effect.
App.js
import { ScrollRotate } from 'react-scroll-rotate'; function App() { return ( <div className="App"> <div style={{ marginTop: 400 }} > <h1 align="center">Hey! <ScrollRotate> <span style={{ color: "red" }}> Geek </span> </ScrollRotate> Welcome To Geekforneveropen </h1> </div> <div style={{ marginTop: 800 }} /> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:
When we are scrolling, we can see that the particular word “Geek” is rotating.
Reference: https://www.npmjs.com/package/react-scroll-rotate
