¿Cómo rotar una string en particular onScroll en ReactJS?

En este artículo, veremos cómo podemos rotar un texto mientras nos desplazamos para brindar una experiencia de usuario agradable mediante el uso de un paquete npm react-scroll- rotate .

Requisito previo:

• Introducción e instalación de reactJs

Sintaxis:

<ScrollRotate> </ScrollRotate>

Envolvemos el texto dentro de estas etiquetas que queremos mostrar efectos.

Creación de la aplicación React y la instalación del módulo:

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalar localmente bynpm i create-react-app.

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia react-scroll-rotate usando el siguiente comando:

npm i react-scroll-rotate

Estructura del proyecto: Se verá así:

Ejemplo: en el archivo App.js, estamos creando un mensaje de bienvenida simple donde envolveremos la palabra geek dentro de las etiquetas ScrollRotate, para usarlo primero lo hemos importado de react-scroll-rotate y hemos usado el estilo en línea para dar color rojo al texto. creó dos etiquetas div encima y debajo del texto con algunos márgenes para que podamos desplazarnos para ver el efecto.

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 Geekforgeeks
                </h1>
            </div>
            <div style={{ marginTop: 800 }} />
  
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

Cuando nos desplazamos, podemos ver que la palabra particular «Geek» está girando.

Referencia: https://www.npmjs.com/package/react-scroll-rotate