Одна вещь, которую многие из моих клиентов просят в эти дни, — это включить слайд-ин, всплывающее окно или какой-либо другой вид анимации на своем веб-сайте.
И вы можете пойти дальше и написать CSS самостоятельно или использовать более ориентированное на React решение, такое как react-intersection-observer. Но в этом примере я хотел бы показать вам короткий путь, когда бюджет ограничен.
Плагин сообщества gatsby под названием gatsby-plugin-scroll-reveal.
Под капотом используется Sal (Scroll Animation Library), которая ориентирована на производительность и весит менее 2,8 КБ, написана на ванильном Javascript. Давайте начнем!
Примечание. IE11 поддерживается.
Оглавление
Установите и внедрите плагин в свой gatsby-config.js.
Настройка довольно проста, как и в большинстве плагинов Gatsby.
- Установите gatsby-plugin-scroll-reveal с помощью yarn или npm (в зависимости от ваших предпочтений):
yarn add gatsby-plugin-scroll-reveal
илиnpm install --save gatsby-plugin-scroll-reveal
- И добавьте плагин в ваш gatsby-config.js:
// in gatsby-config.js plugins: [ // ... other plugins { resolve: `gatsby-plugin-scroll-reveal`, options: { threshold: 1, // Percentage of an element's area that needs to be visible to launch animation once: true, // Defines if animation needs to be launched once disable: false, // Flag for disabling animations
// Advanced Options selector: '[data-sal]', // Selector of the elements to be animated animateClassName: 'sal-animate', // Class name which triggers animation disabledClassName: 'sal-disabled', // Class name which defines the disabled state rootMargin: '0% 50%', // Corresponds to root's bounding box margin enterEventName: 'sal:in', // Enter event name exitEventName: 'sal:out', // Exit event name } } ];
Примечание. Если вы используете Ссылка для перехода к плагину Gatsby, а также этот плагин, обязательно добавьте этот плагин перед Ссылкой для перехода к плагину Gatsby в конфигурации.
Обратите внимание, что то, что вы видите здесь, является параметрами по умолчанию для плагина.
Если вы не хотите менять ни один из них, вы также можете включить плагин без options
, чтобы ваш gatsby-config.js оставался чище:
plugins: [
// ... other plugins
`gatsby-plugin-scroll-reveal`,
];
Как включить анимацию в ваших компонентах
Теперь нам нужно только сообщить gatsby-plugin-scroll-reveal
, какие компоненты мы хотим анимировать.
Мы делаем это, присваивая div-оболочке нашего компонента некоторые атрибуты данных.
const YourFunction = () => (
<YourComponent
data-sal="slide-up"
data-sal-duration="2000" // changes duration of the animation (from 200 to 2000 ms)
data-sal-delay="300" // adds delay to the animation (from 5 to 1000 ms)
data-sal-easing="ease" // sets easing for the animation (see easings.net for reference)
>
{children}
</YourComponent>
)
Для нашего основного атрибута data-sal у нас есть несколько разных вариантов:
fade
slide-up
slide-down
slide-left
slide-right
zoom-in
zoom-out
flip-up
flip-down
flip-left
flip-right
А для упрощения продажи данных ** мы также можем выбрать один из нескольких вариантов. Вы можете найти список здесь, на easings.net.
И это завершает этот урок на сегодня! SAL делает за нас всю тяжелую работу, а размер пакета менее 2,8 КБ, поэтому нам не на что жаловаться, если нам нужно быстрое и простое в реализации решение.
Вот и все!
Большое спасибо за то, что дочитали до этого момента, и не стесняйтесь обращаться ко мне в любое время, на мой сайт или Твиттер 🙂 И если вы хотите узнать больше, обязательно ознакомьтесь с другими моими сообщениями в моем блоге!
Первоначально опубликовано на https://blog.larsbehrenberg.com.