Criando um efeito pegajoso legal para um controle deslizante no React

Existem muitas bibliotecas diferentes para implementar um controle deslizante com todos os efeitos possíveis. Alguns dos melhores para o React são: ReactSlick e Swiper . Mas quando um efeito adesivo horizontal foi necessário para o meu projeto, nada adequado foi encontrado.

Neste artigo, tentaremos criar gradualmente esse controle deslizante, talvez você também precise dele!

Instale os pacotes necessários

Usaremos o aplicativo Create React para criar o projeto .

Crie um aplicativo:

npx create-react-app my-app 

Não faremos o controle deslizante do zero, mas levaremos a biblioteca Swiper , existem os eventos mais adequados para os quais você precisará se conectar (mais sobre isso mais tarde). Em seguida, precisaremos instalar os seguintes pacotes:

 npm i swiper react-id-swiper 

E o último pacote (opcional) para usar o pré-processador sass:

 npm i node-sass 

O resultado é package.json:

package.json

 { "name": "sticky-slider", "version": "0.1.0", "private": true, "dependencies": { "node-sass": "^4.13.0", "react": "^16.11.0", "react-dom": "^16.11.0", "react-id-swiper": "^2.3.2", "react-scripts": "3.2.0", "swiper": "^5.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } 

Ótimo, agora estamos começando a implementar o controle deslizante.

Crie um controle deslizante simples

Vamos começar criando um pequeno arquivo com nossos slides.

src/data.json

 [ { "title": "Slide 1", "color": "#aac3bf" }, { "title": "Slide 2", "color": "#c9b1bd" }, { "title": "Slide 3", "color": "#d5a29c" }, { "title": "Slide 4", "color": "#82a7a6" }, { "title": "Slide 5", "color": "#e6af7a" }, { "title": "Slide 6", "color": "#95be9e" }, { "title": "Slide 7", "color": "#97b5c5" } ] 

Depois disso, criaremos um controle deslizante regular com efeitos padrão.

 // src/components/StickySlider/StickySlider.jsx import React from 'react'; import Swiper from 'react-id-swiper'; import 'react-id-swiper/lib/styles/css/swiper.css'; import data from '../../data'; const StickySlider = () => { const params = { slidesPerView: 3, }; return ( <Swiper {...params}> {data.map((item, idx) => ( <div key={idx}> {item.title} </div> ))} </Swiper> ); }; export default StickySlider; 

E, consequentemente, criamos um arquivo de índice para o componente.

 // src/components/StickySlider/index.js export { default } from './StickySlider'; 

O único parâmetro que descrevemos é slidesPerView (o número de slides visíveis). Não precisamos de mais nada, mas todos os parâmetros possíveis do swiper podem ser encontrados aqui .

Crie um slide de componente separado, para que a aparência do controle deslizante esteja pronta.

 // src/components/Slide/Slide.jsx import React from 'react'; import css from './Slide.module.scss'; const Slide = ({ children, color }) => { return ( <div className={css.container}> <div className={css.content} style={{ background: color }} /> <footer className={css.footer}> {children} </footer> </div> ); }; export default Slide; 

Estilos para o slide.

 // src/components/Slide/Slide.module.scss .container { margin: 0 1em; border-radius: 4px; overflow: hidden; background-color: #fff; } .content { box-sizing: border-box; padding: 50% 0; } .footer { color: #333; font-weight: 700; font-size: 1.25em; text-align: center; padding: 1em; } 

E, consequentemente, o arquivo de índice:

 // src/components/Slide/index.js export { default } from './Slide'; 

E atualize o StickySlider um pouco.

 // src/components/StickySlider/StickySlider.jsx import React from 'react'; import Swiper from 'react-id-swiper'; import 'react-id-swiper/lib/styles/css/swiper.css'; import Slide from '../Slide'; import data from '../../data'; const StickySlider = () => { const params = { slidesPerView: 3, }; return ( <Swiper {...params}> {data.map((item, idx) => ( <div key={idx}> {/*   */} <Slide color={item.color}> {item.title} </Slide> </div> ))} </Swiper> ); }; export default StickySlider; 

Agora insira esse controle deslizante no App.jsx , ao mesmo tempo, coloque a estrutura mínima da página.

 // App.jsx import React from 'react'; import StickySlider from './components/StickySlider'; import css from './App.module.scss'; const App = () => { return ( <div className={css.container}> <h1 className={css.title}>Sticky slider</h1> <div className={css.slider}> <StickySlider /> </div> </div> ); }; export default App; 

E no arquivo scss correspondente, escreveremos alguns estilos.

 // App.module.scss .container { padding: 0 15px; } .title { font-weight: 700; font-size: 2.5em; text-align: center; margin: 1em 0; } .slider { margin: 0 -15px; } 

Até agora, temos um controle deslizante:

Legal, já começou, continuaremos fazendo o que precisamos com esse controle deslizante.

Adicione um efeito pegajoso

O swiper possui dois eventos setTransition e setTransition que setTransition .

Adicione isso ao nosso componente StickySlider e encaminhe-o imediatamente para o Slider , onde será útil:

 // src/components/StickySlider/StickySlider.jsx import React, { useState, useEffect } from 'react'; import Swiper from 'react-id-swiper'; import 'react-id-swiper/lib/styles/css/swiper.css'; import Slide from '../Slide'; import data from '../../data'; const StickySlider = () => { const [swiper, updateSwiper] = useState(null); const [translate, updateTranslate] = useState(0); const [transition, updateTransition] = useState(0); const params = { slidesPerView: 3, }; useEffect(() => { if (swiper) { swiper.on('setTranslate', (t) => { updateTranslate(t); }); swiper.on('setTransition', (t) => { updateTransition(t); }); } }, [swiper]); return ( <Swiper getSwiper={updateSwiper} {...params}> {data.map((item, idx) => ( <div key={idx}> <Slide translate={translate} transition={transition} color={item.color} > {item.title} </Slide> </div> ))} </Swiper> ); }; export default StickySlider; 

Aconselho que você mova o controle deslizante e veja com mais detalhes o que é exibido neste momento:

 // src/components/StickySlider/StickySlider.jsx // ... useEffect(() => { if (swiper) { swiper.on('setTranslate', (t) => { console.log(t, 'translate'); updateTranslate(t); }); swiper.on('setTransition', (t) => { console.log(t, 'transform'); updateTransition(t); }); } }, [swiper]); // .. 

Eu uso ganchos para armazenar o estado. Se você não estiver familiarizado com eles, aconselho a ler a documentação (em russo) .

Além disso, a coisa mais difícil acontecerá no componente Slide .

Precisamos do estado de indentação da borda esquerda do controle deslizante e da largura do slide atual:

 // src/components/StickySlider/StickySlider.jsx // ... const container = useRef(null); const [offsetLeft, updateOffsetLeft] = useState(0); const [width, updateWidth] = useState(1); // ... 

Eles são adicionados uma vez na inicialização do elemento e não são alterados. Portanto, usamos useEffect com uma matriz vazia. Ao mesmo tempo, obtemos os parâmetros não do próprio slide, mas de seu wrapper técnico por parentElement , pois converteremos o wrapper atual usando a propriedade transform .

 // src/components/StickySlider/StickySlider.jsx // ... useEffect(() => { setTimeout(() => { const parent = container.current.parentElement; updateOffsetLeft(parent.offsetLeft); updateWidth(parent.offsetWidth); }, 0); }, []); // ... 

O momento mais importante. Consideramos tudo isso e lançamos nos estilos:

 // src/components/Slide/Slide.jsx // ... const x = -translate - offsetLeft; const k = 1 - x / width; // [0 : 1] const style = x >= -1 ? { transform: `translateX(${x}px) scale(${k * 0.2 + 0.8})`, // [0.8 : 1] opacity: k < 0 ? 0 : k * 0.5 + 0.5, // [0.5 : 1] transition: `${transition}ms`, } : {}; // ... 

A propriedade translate vem do pai e é a mesma para todos os slides. Portanto, para encontrar uma conversão individual para um slide, subtraia offsetLeft dele.

A variável k é um valor de 0 a 1. Usando esse valor, faremos a animação. Essa é uma variável-chave, pois pode ser usada para causar quaisquer efeitos.

Agora calculamos os estilos. A condição x >= -1 é satisfeita quando o slide está na zona de animação; portanto, quando é executado, penduramos os estilos ao lado. Os valores de scale e opacity podem ser selecionados conforme desejado. Os seguintes intervalos me pareceram mais adequados: [0.8 : 1] para scale e [0.5 : 1] para opacity .

A propriedade de transition é fornecida diretamente do evento da biblioteca.

Aqui está o que acontece depois de adicionar todos os itens acima:

 // src/components/Slide/Slide.jsx import React, { useRef, useEffect, useState } from 'react'; import css from './Slide.module.scss'; const Slide = ({ children, translate, transition, color }) => { const container = useRef(null); const [offsetLeft, updateOffsetLeft] = useState(0); const [width, updateWidth] = useState(1); useEffect(() => { setTimeout(() => { const parent = container.current.parentElement; updateOffsetLeft(parent.offsetLeft); updateWidth(parent.offsetWidth); }, 0); }, []); const x = -translate - offsetLeft; const k = 1 - x / width; // [0 : 1] const style = x >= -1 ? { transform: `translateX(${x}px) scale(${k * 0.2 + 0.8})`, // [0.8 : 1] opacity: k < 0 ? 0 : k * 0.5 + 0.5, // [0.5 : 1] transition: `${transition}ms`, } : {}; return ( <div ref={container} style={style} className={css.container}> <div className={css.content} style={{ background: color }} /> <footer className={css.footer}> {children} </footer> </div> ); }; export default Slide; 

Agora adicione as seguintes propriedades ao arquivo de estilo do slide:

 // src/components/Slide/Slide.module.scss .container { // ... transform-origin: 0 50%; //      transition-property: opacity, transform; // ,   } // ... 

Bem, é isso, nosso efeito está pronto! Você pode ver o exemplo final no meu github .

Obrigado pela atenção!