En este artículo, aprenderemos cómo podemos activar la animación en un componente en función de su posición de desplazamiento mediante un paquete npm react-animated-css-onscroll.
En muchos sitios web, vemos que cuando nos desplazamos, se activan algunas animaciones. Esto proporciona una experiencia de usuario muy agradable.
Usando el módulo react-animated-css-onscroll, podemos activar la animación cada vez que nos desplazamos hacia abajo hasta el componente.
Características de reaccionar-animado-css-onscroll:
- Módulo ligero.
- No es necesario crear funciones para conocer la posición actual del componente en la página web.
- Una amplia gama de animaciones está disponible.
- Muy fácil de trabajar.
Requisito previo:
Introducción e instalación react.js
Sintaxis:
<AnimatedOnScroll animationIn=""> </AnimatedOnScroll>
Envolvemos el componente dentro de estas etiquetas.
Aquí, en animación, pasamos nombres de animación que están disponibles. Algunos de los ejemplos son bounce, flash, pulse, rubberBand, shake y muchos más.
Creando la aplicación React:
Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app nombre de la carpeta, si ya ha instalado create-react-app globalmente. Si no lo ha hecho, instale create-react -aplicar globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm 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
Instalación y adición de módulos:
Paso 1: para instalar el paquete, vaya a la terminal y ejecute el comando
npm i react-animate-on-scroll
Paso 2: Agregue el archivo Animated.css in index.html en la carpeta pública dentro de la etiqueta principal.
índice.html
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
Estructura del proyecto:
Ejemplo 1: – En este ejemplo, estamos envolviendo un texto de encabezado simple dentro de AnimationOnScroll y pasando props animationIn como bounceInRight, lo que hará que el texto flote desde la derecha. Para usar AnimationOnScroll, lo estamos importando desde «react-animated-css-onScroll».
Además, estamos usando algunos estilos en línea para las etiquetas de encabezado y le agregamos márgenes para que podamos desplazarnos entre estos textos.
App.js
import {AnimatedOnScroll} from "react-animated-css-onscroll";
function App() {
return (
<div className="App">
<h1 style={{marginTop:"500px"}}>Hey Geek!</h1>
<AnimatedOnScroll animationIn="bounceInRight"
style={{marginTop:"80px",color:"green"}}>
<h2>Welcome to Geeksforgeeks</h2>
</AnimatedOnScroll>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Aquí, podemos ver que cuando nos desplazamos hacia abajo, el texto «Bienvenido a Geeksforgeeks» se desliza desde el lado derecho.
Entendamos mejor con otro ejemplo.
Ejemplo 2: en App.js vamos a crear una página de componentes que muestre el nombre de la animación que estamos usando. Agreguemos algunas de las animaciones que están disponibles y veamos cómo se ve el componente mientras se desplaza.
App.js
const Page = (props) => { // creating Component Page
const {children,...rest} =props;
return (
<div {...rest} className="page">
{children}
</div>
)
}
function App() {
return (
<div className="App">
</div>
);
}
export default App;
Ahora importaremos AnimatedOnScroll desde «react-animated-css-onscroll» en nuestro archivo App.js.
Aquí, para cada componente de página, envolvemos la etiqueta AnimatedOnScroll y pasamos algunas de las animaciones disponibles como accesorios a animationIn, como rebote, jello, etc.
App.js
import {AnimatedOnScroll} from "react-animated-css-onscroll";
const Page = (props) => {
const {children,...rest} =props;
return (
<div {...rest} className="page">
{children}
</div>
)
}
function App() {
return (
<div className="App">
<h1 align="center">Hey! Geek Welcome</h1>
<h2 align="center">Let's see some effects</h2>
<div id="start">
<AnimatedOnScroll animationIn="fadeInDownBig">
<Page children="fadeInDownBig"/>
</AnimatedOnScroll>
<AnimatedOnScroll animationIn="bounceInLeft">
<Page children="bounceInLeft"/>
</AnimatedOnScroll>
<AnimatedOnScroll animationIn="wobble">
<Page children="wobble"/>
</AnimatedOnScroll>
<AnimatedOnScroll animationIn="tada">
<Page children="tada"/>
</AnimatedOnScroll>
<AnimatedOnScroll animationIn="jello">
<Page children="jello"/>
</AnimatedOnScroll>
<AnimatedOnScroll animationIn="bounceInRight">
<Page children="bounceInRight"/>
</AnimatedOnScroll>
<AnimatedOnScroll animationIn="bounce" duration="1000">
<Page children="bounce"/>
</AnimatedOnScroll>
</div>
</div>
);
}
export default App;
Ahora agregaremos algo de estilo al componente de la página. Estamos haciendo que el color de fondo del componente Página hijo par sea verde y el color del texto sea blanco.
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', 'Roboto', 'Oxygen','Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo,
Monaco, Consolas, 'Courier New', monospace;
}
.page {
height: 30px;
width:300px;
font-style: italic;
margin-top: 20px;
text-align: center;
padding: 70px 0;
font-size: 2rem;
font-weight: 800;
}
#start {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#start div:nth-child(2n){
background-color: rgb(6, 71, 6);
color: white;
}
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Referencia: https://www.npmjs.com/package/react-animation-on-scroll