幹部ナビをご覧の皆さん、こんにちは。
最近猫ミームばかり見ているシステム部フロントエンド担当のチピチャパです。
今回で3回目のブログ執筆になります。
これまではゲームのこと、海外風俗のことを書いてきましたが、今回はシステム部らしくコーディングのことについて書いていきます。
フロントエンド界隈で流行っている技術はReactとVueですよね。
一部業務でNext.js（React）を使用したので、Next.jsで疑問だった点について書いていきます。
Next.jsでの制作にあたり、スクロールアニメーションの実装をどうしようかという点でした。
これまでだったらIntersection ObserverやjQuery、ライブラリなどで簡単に実装できました。
Next.jsでもプラグインなどがありますが、調べたところReact Intersection Observerが一番使いやすそうだったので、React Intersection Observerを使用することにしました。
Intersection ObserverはVanilla JSでもおなじみのAPIで、要素を監視するAPIになります。
scrollイベントはスクロールするたびにイベントが発火してしまいますが、こちらは非同期なのでその心配がありません。
ではさっそくReact Intersection Observerの使い方について記載していきます。
まずはnpmでインストールします。
「npm install react-intersection-observer –save」
次にコンポーネントを作ります。
components/ScrollComponent.js
コンポーネントにしなくても動作しますが、スクロールアニメーションは同じタイミングで発火させることが多いと思うので、コンポーネント化して使いまわせるようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { useInView } from "react-intersection-observer"; import styles from "../styles/scroll.module.css"; export const ScrollComponent = ({ children }) => { const {ref, inView} = useInView({ rootMargin: '-100px', triggerOnce: true, }); return ( <div ref={ref} className={`${styles.scrollWrapper} ${inView ? `${styles.active}` : ""}`}> {children} </div> ) } |
refで検知する要素を指定し、inView（要素が見えたかどうか）がtrueになった時にactiveクラスを付与します。
propsでchildrenを受け取って、childrenに対してスクロールアニメーションを適用します。
コンポーネントができたらアニメーションを実装したいファイルでimportして、ScrollComponentで囲みます。
|
1 2 3 4 5 6 7 8 9 |
<div> <p>セクション 1</p> </div> <ScrollComponent> <p>セクション 2</p> </ScrollComponent> <ScrollComponent> <p>セクション 3</p> </ScrollComponent> |
CSSは適当にactiveクラスが付与されていない時はopacity: 0;にし、activeクラスが付与されたらopacity: 1;にします。
さらにtransitionを付けてスムーズにします。 CSSのライブラリを使用すればCSSファイルを別にしなくてもJSXに直書きできると思います。
↓スクロールアニメーションの実装後
これだけで、スクロールアニメーションが使いまわせるようになりました。
もっと良い書き方があると思いますが、Next.jsでスクロールアニメーションを簡単に実装できました。
以上、Next.jsでのスクロールアニメーションの実装方法でした。
システム部ではコーディングが好きな方、風俗が好きな方を募集しております！
ぜひ一緒に風俗のシステムを開発しましょう！
プライベートでは最近、草津温泉へ行ってきました。
人気上位の温泉地と言われるだけあって温泉はもちろん、食べ歩きなども楽しめました！
では、また次のブログでお会いしましょう！
