El siguiente enfoque cubre cómo crear una galería de imágenes deslizantes animadas utilizando Framer y ReactJS.
requisitos previos:
- Conocimiento de JavaScript (ES6)
- Conocimientos de HTML/CSS.
- Conocimientos básicos de ReactJS.
Creación de la aplicación React e instalación del módulo:
-
Paso 1: Cree una aplicación React usando el siguiente comando:
$npx create-react-app image-gallery
-
Paso 2: después de crear la carpeta de su proyecto, es decir , la galería de imágenes , acceda a ella con el siguiente comando.
$cd image-gallery
-
Paso 3: agregue los paquetes npm que necesitará durante el proyecto.
$npm install framer
Abra la carpeta src y elimine los siguientes archivos:
- logotipo.svg
- serviceWorker.js
- setupTests.js
- App.test.js (si corresponde)
- Aplicación.js
- aplicación.css
Estructura del proyecto: Tendrá el siguiente aspecto.
index.js
import React from "react"; import { render } from "react-dom"; // Importing framer components : Frame and Page import { Frame, Page } from "framer"; import "./index.css"; export function MyComponent() { // Object array of sliding gallery pages data const pages = [ { index: 1, // Source of the image src: "https://media.geeksforgeeks.org/wp-content/" + "cdn-uploads/gfg_200x200-min.png", // background color of the page background: "#1e1e1e" }, { index: 2, src: "https://media.geeksforgeeks.org/wp-content/" + "cdn-uploads/20190710102234/download3.png", background: "#fcfcfc" }, { index: 3, src: "https://yt3.ggpht.com/ytc/AAUvwnjJqZG9PvGfC3Go"+ "V27UlohMeBLxyUdhs9hUbc-Agw=s900-c-k-c0x00ffffff-no-rj", background: "#bcbcbc" } ]; return ( // Framer component with some of its attributes <Page defaultEffect="none" width={350} height={350} contentWidth="auto" alignment="end" radius={30} > {/* Map through the Pages object array and rendering each page with its specified image and background-color */} {pages.map((page) => ( // Framer "Frame" component <Frame width={350} height={350} radius={30} background={page.background} > <img src={page.src} alt="geeksforgeeks" /> </Frame> ))} </Page> ); } // Export default MyComponent; // rendering "MyComponent" const rootElement = document.getElementById("root"); render(<MyComponent />, rootElement);
index.css
#root { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: rgba(0, 85, 255, 1); perspective: 1000px; cursor: ew-resize; } body { font-family: sans-serif; text-align: center; margin: 0; } img { border-radius: 100%; height: 300px; width: 300px; margin-top: 25px; justify-content: center; align-items: center; }
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
$ npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.
Referencia: https://codesandbox.io/s/animated-sliding-image-gallery-9pplj
Publicación traducida automáticamente
Artículo escrito por jt9999709701 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA