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

И вы можете пойти дальше и написать CSS самостоятельно или использовать более ориентированное на React решение, такое как react-intersection-observer. Но в этом примере я хотел бы показать вам короткий путь, когда бюджет ограничен.

Плагин сообщества gatsby под названием gatsby-plugin-scroll-reveal.

Под капотом используется Sal (Scroll Animation Library), которая ориентирована на производительность и весит менее 2,8 КБ, написана на ванильном Javascript. Давайте начнем!

Примечание. IE11 поддерживается.

Оглавление

Установите и внедрите плагин в свой gatsby-config.js.

Настройка довольно проста, как и в большинстве плагинов Gatsby.

  1. Установите gatsby-plugin-scroll-reveal с помощью yarn или npm (в зависимости от ваших предпочтений): yarn add gatsby-plugin-scroll-reveal или npm install --save gatsby-plugin-scroll-reveal
  2. И добавьте плагин в ваш 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.