React Fullpage を使用したスクロール遷移の実装

導入

reactでコンポーネントごとのスクロール遷移が実装できる物がないかと思って探してたら発見したので使ってみる(ピタッ！！と止まるやつ)

使い方

ドキュメント

ここから
https://alvarotrigo.com/react-fullpage/
ライセンスがなくても遊ぶだけなら使えるがその場合は右下にちっちゃくfullpage.jsの広告ぽいのが入る
年更新で一番安いのは１０００円ちょっとから購入可

パッケージ

yarn add @fullpage/react-fullpage

大まかな仕様

FullPageManager.js

export default function FullPageManager() {
 return (
   <ReactFullpage
     //fullpage options
     licenseKey={"your licencekey here"}
     scrollingSpeed={1000} 
     loopBottom
     navigation
     render={({ state, fullpageApi }) => {
       return (
           <ReactFullpage.Wrapper>
             <div className="section">page1</div>
             <div className="section">page2</div>
             <div className="section">page3</div>
           </ReactFullpage.Wrapper>
       );
     }}
   />
 );
}

Fullpage.Wrapperの配下に画面遷移させたいコンポーネントたちを設置するだけ
optionは多すぎるから...色々できるよ

注意点

1. FullPageを有効化させたいコンポーネントの最上位タグのclassNameには必ず、sectionかslideを振り分けないといけない
2. たまに他のイベントと干渉する？
3. tsparticleと併用しようとしたが技術不足で断念(キャンバスが徐々にでかくなる)

使ってみた感想

適当に実装するだけでもかなり高級感が出る
動きも非常に滑らかで使用感が良かった
使いやすそうでこれからも使っていこう思えるくらいお気に入りに抜擢