Reactで横や縦に流れる文字を実装する方法【marquee】

イメージは以下のサイトです。

一度サイトを見てみてください。

https://vendomeclinique.com/

marqueeというエフェクトを使用

Reactで簡単にmarqueeを実装するためのライブラリがありました。

https://www.react-fast-marquee.com/documentation

実装手順

①インストール

npm install react-fast-marquee --save

yarn add react-fast-marquee

でインストールしましょう！

②使いたいファイル内でインポート

App.js

import Marquee from "react-fast-marquee";

③コンポーネントでアニメーションをしたいテキストを囲む

App.js

import React from "react";
import Marquee from "react-fast-marquee";

const App = () => (
  <Marquee>
    <p>ここの文字がアニメーションします</p>
  </Marquee>
);

export default App;

pタグで囲みましたが、divタグやspanタグでも問題ないです。
自分の増やしたい子要素を自由に増やせます。

僕はこんな感じで実装をしてみました。
詳しくはドキュメントを見てみてください。

流れるテキストアニメーションをクリックすると、
別ページ(companyページ)に飛ぶという感じの実装です。
(本当はrouterを使用していますが、簡略化のためにaタグを使用)

画像ですが、こんな感じでテキストが流れていきます。

雰囲気作りのために、上下に疑似要素を使用して線で囲っています。

Component.js

import React from "react";
import Marquee from "react-fast-marquee";

const App = () => {
  return(
    <div className="marquee_container">
      <Marquee
        pauseOnHover={true}
        speed={20}
        // autoFill={true}
        className="marquee_text" //クラスをつけることができます
      >
        <div>
          <a href="/company">view detail</a>
        </div>
      </Marquee>
    </div>
  );
};

export default App;

App.css

.marquee_container {
  background: #000;
  color: #fff;
}
.marquee_text{
  position: relative;
}
.marquee_text::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #fff;
}

.marquee_text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: #fff;
}

.marquee_text a{
  color: #fff;
  text-decoration: none;
}

ぜひやってみてください！