Хабрахабр

Делаем крутой sticky-эффект для слайдера на React

Для React одни из лучших это: ReactSlick и Swiper. Есть много разных библиотек для реализации слайдера со всеми возможными эффектами. Но когда для моего проекта потребовался горизонтальный sticky-эффект, то ничего подходящего не нашлось.

В этой статье мы попробуем поэтапно создать такой слайдер, возможно он вам тоже понадобится!

Установка необходимых пакетов

Для создания проекта будем использовать Create React App

Создаем приложение:

npx create-react-app my-app

Тогда нам нужно будет установить следующие пакеты: Слайдер мы будем делать не с нуля, а возьмем библиотеку Swiper, там наиболее подходящие события, к которым нужно будет подвязаться (об этом позже).

npm i swiper react-id-swiper

И последний пакет (по желанию), чтобы использовать предпроцессор sass:

npm i node-sass

Получился такой package.json:

package.json

, "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" ] }
}

Отлично, теперь приступаем к реализации слайдера.

Создаем простой слайдер

Начнем с того, что создадим небольшой файлик с нашими слайдами.

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" }
]

После этого слелаем обычный слайдер с эффектами по умолчанию.

// 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;

И соответственно создаем индексный файл для компонента.

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

Нам больше ничего не понадовится, но все возможные параметры свайпера можно посмотреть здесь. Единственный параметр, который мы описали – это slidesPerView (количество видимых слайдов).

Создадим отдельно компонет Slide, чтобы внешний вид слайдера уже был готов.

// 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;

Стили для слайда.

// 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;
}

И соответственно индексный файл:

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

И немного обновим StickySlider.

// 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;

Теперь вставим этот слайдер в App.jsx, заодно заложим минимальную структуру страницы.

// 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;

И в соответствующем scss-файле напишем немного стилей.

// 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;
}

Пока у нас получился такой слайдер:

Круто, начало положено, дальше будем делать из этого слайдера то, что нам нужно.

Добавляем sticky-эффект

У свайпера есть два нужных нам события setTranslate и setTransition.

Добавим это в наш компонент StickySlider и сразу пробросим в Slider, там нам это пригодится:

// 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;

Советую подвигать слайдер и посмотреть деталенее что выводится в этом моменте:

// 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]); // ..

Если вы с ними мало знакомы, то советую почитать документацию (на русском). Я для хранения состояния использую хуки.

Далее все самое сложное будет происходить в компоненте Slide.

Нам потребуются состояния отступа от левой границы слайдера и ширина текущего слайда:

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

Поэтому используем useEffect с пустым массивом. Они добаляются один раз при инициализации элемента и не изменяются. При этом достаем параметры не самого слайда а его техническую обертку через parentElement, так как текущую обертку будем преобразовывать при помощи свойства transform.

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

Считаем все это дело и прокидываем в стили: Самый главный момент.

// 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`, } : {}; // ...

Поэтому чтобы найти индивидуальный translate для одного слайда, вычитаем из него offsetLeft. Свойство translate приходит нам от родителя и оно одинаковое для всех слайдов.

С помощью этого значения мы будем делать анимацию. Переменная k это значение от 0 до 1. Это ключевая переменная, так как по ней можно делать любые эффекты.

Условие x >= -1 выполняется когда слайд находится в зоне анимации, поэтому при его выполнении навешиваем стили на сайд. Теперь вычисляем стили. Мне показались наиболее подходящими такие интервалы: [0. Значения scale и opacity пожно подобрать по своему усмотрению. 5 : 1] для opacity. 8 : 1] для scale и [0.

Свойство transition поставляется прямо из события библиотеки.

Вот что получится после добавлению всего вышенаписанного:

// 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;

Теперь добавим добавим в файл стилей слайда следующие свойства:

// src/components/Slide/Slide.module.scss .container { // ... transform-origin: 0 50%; // для трансформации относительно левого края transition-property: opacity, transform; // свойства, которые анимируются } // ...

Готовый пример можете посмотреть на моем гитхабе. Ну вот и все, наш эффект готов!

Спасибо за внимание!

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть