GatsByjsでスクロールアニメーションを行う最も簡単な方法

この投稿は私の記事で初めて公開されましたblog .
私のクライアントの多くがこれらの日のために求めている1つのことは、彼らのウェブサイトの上でスライド、ポップアップまたは若干の他の種類のアニメーションを含むことです.
そして、先に行くことができますし、CSS自分自身を書くか、反応交差点オブザーバーのようなより反応指向のソリューションを使用します.しかし、この例では、予算が厳しいとき、あなたにショートカットを見せたいです.
Gatsbyのプラグインが表示されます.
フードの下でSal (Scroll Animation Library) , パフォーマンスにフォーカスし、2.8 KB未満で、バニラJavaScriptで書かれています.始めましょう!
注意:

目次

Install and implement the plugin in your gatsby-config.js

How to enable animations in your components

gatsby設定でプラグインをインストールして実装します.js
ほとんどのギャツビープラグインと同様に、セットアップはかなり簡単です.

Gatsbyプラグインをインストールします.yarn add gatsby-plugin-scroll-revealornpm install --save gatsby-plugin-scroll-reveal

そして、あなたのgatsby設定でプラグインを加えてください.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 Plugin Transition Link このプラグインだけでなく、このプラグインをGatsby Plugin Transition Link で設定します.
ここであなたが見るものはプラグインのデフォルトオプションです.
あなたはそれらのいずれかを変更したくない場合は、また、プラグインを含めることができますてoptions あなたのギャツビーの設定を維持する.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>
)

主なデータ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 KBのバンドルサイズ未満では、我々は我々が迅速かつ簡単に解決策を必要としている場合については文句を言うことができる多くはありません.

それはかなりだ!
おかげで、これまでの読書のおかげで、いつでも私に手を伸ばす自由に感じるmy website or 🙂 そして、あなたがより多くを読むのが好きならば、私の他のポストをチェックしてくださいblog !