react-animate-on-scroll【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する

本日は、react-animate-on-scrollのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。

github.com

実際に使ってみる

今回はこちらのサイトを参考にサクッと動かすことにしました。
scotch.io

git clone https://github.com/jamesqquick/React-With-Smooth-Scrolling.git

yarn install
yarn start

おぉ〜Navのメニューを押すと、スムーズにスクロールが動きますね☺️

次はコードを読んでみます。
Linkやscrollなどがimportされていますね！
Linkコンポーネントにプロパティを渡すだけで、サクッとスクロールが作れるようです。便利！

import React, { Component } from "react";
import logo from "../logo.svg";
import { Link, animateScroll as scroll } from "react-scroll";

export default class Navbar extends Component {
  scrollToTop = () => {
    scroll.scrollToTop();
  };

  render() {
    return (
      <nav className="nav" id="navbar">
        <div className="nav-content">
          <img
            src={logo}
            className="nav-logo"
            alt="Logo"
            onClick={this.scrollToTop}
          />
          <ul className="nav-items">
            <li className="nav-item">
              <Link
                activeClass="active"
                to="section1"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
              >
                Section 1
              </Link>
            </li>
            <li className="nav-item">
              <Link
                activeClass="active"
                to="section2"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
              >
                Section 2
              </Link>
            </li>
            <li className="nav-item">
              <Link
                activeClass="active"
                to="section3"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
              >
                Section 3
              </Link>
            </li>
            <li className="nav-item">
              <Link
                activeClass="active"
                to="section4"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
              >
                Section 4
              </Link>
            </li>
            <li className="nav-item">
              <Link
                activeClass="active"
                to="section5"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
              >
                Section 5
              </Link>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

<||
 

** 3行以内でまとめる
react-animate-on-scrollを導入すると、
- importしてLinkにプロパティを渡すだけでスクロール機能が簡単に作れる。

** フィードバック
- 今回紹介するべきライブラリはこっち
https://github.com/dbramwell/react-animate-on-scroll


- 宮水さんは間違えてReact-With-Smooth-Scrollingを紹介している
https://github.com/jamesqquick/React-With-Smooth-Scrolling
https://github.com/fisshy/react-scroll という別のライブラリ

- 逆にいうと２つを比べると面白い
一方はCSSでアニメーションをしていて一方はJSでアニメーションをしている
react-animate-on-scroll のほうは animate.css というCSSライブラリを利用している。CSSでできるところはCSSにまかせつつCSSクラスをJSで付け替えて動的に見せる、というテクニックはmicro animationの実装でもよくみられる実装なので参考にする。
https://github.com/daneden/animate.css

- Viewport
Viewportという概念はモバイルサイトを作ってたことがある人とかは馴染みが深いが、意外とPCサイトだと気にしない。
この機会に覚えておくといいかも。
https://app.codegrid.net/entry/whats-viewport