reactで文字を一文字づつ表示する設定

Posted at 2024-08-08

reactの文字表示のアニメーションを残します。

ほぼ丸写ししたもの
https://spicato.com/blog/16/css-text-animation01/

項番	ページ内リンク
1	一文字づつ表示
2	横から1つずつ表示
3	横から1つずつ表示じわっと
4	上から文字が落ちてきます

一文字づつ表示

text.js

import "./Itimoji.css"; // CSSファイルをインポートする

const Itimoji = () => {
  return (
    <div className="container">
      <div className="headline">
        <div className="text" aria-hidden="true">
          <span className="char" style={{ "--char-index": 0 }}>
            R
          </span>
          <span className="char" style={{ "--char-index": 1 }}>
            A
          </span>
          <span className="char" style={{ "--char-index": 2 }}>
            I
          </span>
          <span className="char" style={{ "--char-index": 3 }}>
            S
          </span>
          <span className="char" style={{ "--char-index": 4 }}>
            I
          </span>
          <span className="char" style={{ "--char-index": 5 }}>
            N
          </span>
          <span className="char" style={{ "--char-index": 6 }}>
            G
          </span>
          <span className="char" style={{ "--char-index": 7 }}>
            2
          </span>
          <span className="char" style={{ "--char-index": 8 }}>
            0
          </span>
          <span className="char" style={{ "--char-index": 9 }}>
            0
          </span>
          <span className="char" style={{ "--char-index": 10 }}>
            4
          </span>
        </div>
      </div>
    </div>
  );
};

export default Itimoji;

text..css

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.headline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%); /* 真ん中に配置 */
  text-align: center;
}

.text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 130px;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  background: transparent;
  text-align: center;
  font-style: italic;
  letter-spacing: 15px;
  font-weight: 600;
  font-family: "Poiret One", "Slackside One", sans-serif;
  z-index: 1;
}

.char {
  opacity: 0;
  animation: fadeIn 1s forwards;
  animation-delay: calc(var(--char-index) * 0.1s);
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@media (max-width: 1200px) {
  .text {
    font-size: 60px !important;
  }
}
@media (max-width: 1000px) {
  .text {
    color: blue;
    font-size: 50px !important;
  }
}
@media (max-width: 800px) {
  .headline {
    top: 40%;
  }
  .text {
    color: blue;
    font-size: 30px !important;
  }
}
@media (max-width: 500px) {
  .headline {
    top: 30%;
  }
  .text {
    color: blue;
    font-size: 20px !important;
  }
}

横から1つずつ表示

text.js

import { useEffect, useState } from "react";
import "./Itimoji.css"; // CSSファイルをインポートする

const Itimoji = () => {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsActive(true);
    }, 100); // 遅延を設定してアニメーションをトリガー

    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="itimoji2-container">
      <div className="itimoji2-headline">
        <div className="itimoji2-visuallyHidden">Text Animation02</div>

        <div
          className={`itimoji2-text ${isActive ? "is-active" : ""}`}
          aria-hidden="true"
        >
          <span className="itimoji2-char" style={{ "--char-index": 0 }}>
            <span className="itimoji2-char-text">T</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 1 }}>
            <span className="itimoji2-char-text">e</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 2 }}>
            <span className="itimoji2-char-text">x</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 3 }}>
            <span className="itimoji2-char-text">t</span>
          </span>
          <span className="whitespace">&nbsp;</span>
          <span className="itimoji2-char" style={{ "--char-index": 4 }}>
            <span className="itimoji2-char-text">A</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 5 }}>
            <span className="itimoji2-char-text">n</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 6 }}>
            <span className="itimoji2-char-text">i</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 7 }}>
            <span className="itimoji2-char-text">m</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 8 }}>
            <span className="itimoji2-char-text">a</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 9 }}>
            <span className="itimoji2-char-text">t</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 10 }}>
            <span className="itimoji2-char-text">i</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 11 }}>
            <span className="itimoji2-char-text">o</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 12 }}>
            <span className="itimoji2-char-text">n</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 13 }}>
            <span className="itimoji2-char-text">0</span>
          </span>
          <span className="itimoji2-char" style={{ "--char-index": 14 }}>
            <span className="itimoji2-char-text">2</span>
          </span>
        </div>
      </div>
    </div>
  );
};

export default Itimoji;

text..css

/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

/* 名前空間を追加して特異性を高める */
.itimoji2-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3c3c3c;
}

.itimoji2-headline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  text-align: center;
}

.itimoji2-text {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "Roboto Mono", monospace;
  font-size: 5vw;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Poiret One", "Slackside One", sans-serif;
}

.itimoji2-text.is-active {
  --x: 0;
}

.itimoji2-char {
  overflow: hidden;
  display: inline-block; /* 追加 */
}

.itimoji2-char-text {
  display: inline-block;
  transform: translateX(var(--x, -101%));
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: calc(0.05s * var(--char-index));
}

.itimoji2-visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

横から1つずつ表示じわっと

text.js

import { useEffect, useState } from "react";
import "./Itimoji.css"; // CSSファイルをインポートする

const Itimoji = () => {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsActive(true);
    }, 100); // 遅延を設定してアニメーションをトリガー

    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="itimoji3">
      <div className="container">
        <div className="headline">
          <div className="visuallyHidden">Text Animation03</div>

          <div
            className={`text ${isActive ? "is-active" : ""}`}
            aria-hidden="true"
          >
            <span className="char" style={{ "--char-index": 0 }}>
              <span className="char-text">T</span>
            </span>

            <span className="char" style={{ "--char-index": 1 }}>
              <span className="char-text">e</span>
            </span>

            <span className="char" style={{ "--char-index": 2 }}>
              <span className="char-text">x</span>
            </span>

            <span className="char" style={{ "--char-index": 3 }}>
              <span className="char-text">t</span>
            </span>

            <span className="whitespace">&nbsp;</span>

            <span className="char" style={{ "--char-index": 4 }}>
              <span className="char-text">A</span>
            </span>

            <span className="char" style={{ "--char-index": 5 }}>
              <span className="char-text">n</span>
            </span>

            <span className="char" style={{ "--char-index": 6 }}>
              <span className="char-text">i</span>
            </span>

            <span className="char" style={{ "--char-index": 7 }}>
              <span className="char-text">m</span>
            </span>

            <span className="char" style={{ "--char-index": 8 }}>
              <span className="char-text">a</span>
            </span>

            <span className="char" style={{ "--char-index": 9 }}>
              <span className="char-text">t</span>
            </span>

            <span className="char" style={{ "--char-index": 10 }}>
              <span className="char-text">i</span>
            </span>

            <span className="char" style={{ "--char-index": 11 }}>
              <span className="char-text">o</span>
            </span>

            <span className="char" style={{ "--char-index": 12 }}>
              <span className="char-text">n</span>
            </span>

            <span className="char" style={{ "--char-index": 13 }}>
              <span className="char-text">0</span>
            </span>

            <span className="char" style={{ "--char-index": 14 }}>
              <span className="char-text">3</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Itimoji;

text..css

/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

/* Itimoji3 スタイル */
.itimoji3 .text {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "Roboto Mono", monospace;
  font-size: 5vw;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Poiret One", "Slackside One", sans-serif;
}

.itimoji3 .text.is-active {
  --opacity: 1;
}

.itimoji3 .char {
  display: inline-block;
  opacity: var(--opacity, 0);
  transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: calc(0.05s * var(--char-index));
}

/* 初期CSS */
.itimoji3 .container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3c3c3c;
}

.itimoji3 .visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

上から文字が落ちてきます

text.js

import { useEffect, useState } from "react";
import "./Itimoji.css"; // 新しいCSSファイルをインポートする

const Itimoji = () => {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsActive(true);
    }, 100); // 遅延を設定してアニメーションをトリガー

    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="itimoji4-container">
      <div className="headline4">
        <div className="visuallyHidden">Text Animation04</div>

        <div
          className={`text4 ${isActive ? "is-active4" : ""}`}
          aria-hidden="true"
        >
          <span className="char4" style={{ "--char-index": 0 }}>
            {" "}
            T{" "}
          </span>

          <span className="char4" style={{ "--char-index": 1 }}>
            {" "}
            e{" "}
          </span>

          <span className="char4" style={{ "--char-index": 2 }}>
            {" "}
            x{" "}
          </span>

          <span className="char4" style={{ "--char-index": 3 }}>
            {" "}
            t{" "}
          </span>

          <span className="whitespace4">&nbsp;</span>

          <span className="char4" style={{ "--char-index": 4 }}>
            {" "}
            A{" "}
          </span>

          <span className="char4" style={{ "--char-index": 5 }}>
            {" "}
            n{" "}
          </span>

          <span className="char4" style={{ "--char-index": 6 }}>
            {" "}
            i{" "}
          </span>

          <span className="char4" style={{ "--char-index": 7 }}>
            {" "}
            m{" "}
          </span>

          <span className="char4" style={{ "--char-index": 8 }}>
            {" "}
            a{" "}
          </span>

          <span className="char4" style={{ "--char-index": 9 }}>
            {" "}
            t{" "}
          </span>

          <span className="char4" style={{ "--char-index": 10 }}>
            {" "}
            i{" "}
          </span>

          <span className="char4" style={{ "--char-index": 11 }}>
            {" "}
            o{" "}
          </span>

          <span className="char4" style={{ "--char-index": 12 }}>
            {" "}
            n{" "}
          </span>

          <span className="char4" style={{ "--char-index": 13 }}>
            {" "}
            0{" "}
          </span>

          <span className="char4" style={{ "--char-index": 14 }}>
            {" "}
            4{" "}
          </span>
        </div>
      </div>
    </div>
  );
};

export default Itimoji;

text..css

/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

.text4 {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "Roboto Mono", monospace;
  font-size: 5vw;
  font-weight: 700;
  text-transform: uppercase;
}

.text4.is-active4 {
  --y: 0;
  --rotate: 0;
}

.char4 {
  display: inline-block;
  transform: translateY(var(--y, -110%)) rotate(var(--rotate, -45deg));
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: calc(0.02s * var(--char-index));
}

/* 初期CSS */
.itimoji4-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3c3c3c;
}

.visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

```:text.js
import { useEffect, useState } from "react";
import "./Itimoji.css"; // 新しいCSSファイルをインポートする

const Itimoji = () => {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsActive(true);
    }, 100); // 遅延を設定してアニメーションをトリガー

    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="gyut-container">
      <div className={`gyut-text ${isActive ? "is-active" : ""}`}>
        <div className="gyut-word">Text Animation08</div>
      </div>
    </div>
  );
};

export default Itimoji;

text..css

/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

/* アニメーションとスタイルを `gyut` プレフィックスでリセット */
.gyut-text {
  color: #fff;
  font-family: "Roboto Mono", monospace;
  font-size: 5vw;
  font-weight: 700;
  text-transform: uppercase;
  transform-origin: left;
}

.gyut-text.is-active {
  animation: text08 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes text08 {
  0% {
    opacity: 0;
    transform: translateX(20vw) scaleX(1) scaleY(1) skew(-60deg);
  }
  10% {
    opacity: 1;
  }
  80% {
    transform: scaleX(0.3) scaleY(1.2);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}

/* 初期CSS */
.gyut-container {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3c3c3c;
}

.gyut-word {
  /* gyut-word に特別なスタイルが必要な場合はここに追加 */
}

.visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

横から1つずつ表示じわっと

txt.js

import { useEffect, useState } from "react";
import "./Itimoji.css"; // 新しいCSSファイルをインポートする

const Itimoji = () => {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsActive(true);
    }, 100); // 遅延を設定してアニメーションをトリガー

    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="honoka container">
      <div className="honoka headline">
        <div className="honoka visuallyHidden">Text Animation09</div>

        <div
          className={`honoka text ${isActive ? "is-active" : ""}`}
          aria-hidden="true"
        >
          <span className="honoka char" style={{ "--char-index": 0 }}>
            T
          </span>

          <span className="honoka char" style={{ "--char-index": 1 }}>
            e
          </span>

          <span className="honoka char" style={{ "--char-index": 2 }}>
            x
          </span>

          <span className="honoka char" style={{ "--char-index": 3 }}>
            t
          </span>

          <span className="honoka whitespace">&nbsp;</span>

          <span className="honoka char" style={{ "--char-index": 4 }}>
            A
          </span>

          <span className="honoka char" style={{ "--char-index": 5 }}>
            n
          </span>

          <span className="honoka char" style={{ "--char-index": 6 }}>
            i
          </span>

          <span className="honoka char" style={{ "--char-index": 7 }}>
            m
          </span>

          <span className="honoka char" style={{ "--char-index": 8 }}>
            a
          </span>

          <span className="honoka char" style={{ "--char-index": 9 }}>
            t
          </span>

          <span className="honoka char" style={{ "--char-index": 10 }}>
            i
          </span>

          <span className="honoka char" style={{ "--char-index": 11 }}>
            o
          </span>

          <span className="honoka char" style={{ "--char-index": 12 }}>
            n
          </span>

          <span className="honoka char" style={{ "--char-index": 13 }}>
            0
          </span>

          <span className="honoka char" style={{ "--char-index": 14 }}>
            9
          </span>
        </div>
      </div>
    </div>
  );
};

export default Itimoji;

text.css

/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

/* スタイルに honoka クラスを付加 */
.honoka.text {
  color: #fff;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: "Roboto Mono", monospace;
  font-size: 5vw;
  font-weight: 700;
  text-transform: uppercase;
  transform-origin: left;
  padding: 0 20px;
}

.honoka.text > .honoka.char {
  filter: blur(8px);
  opacity: 0.1;
}

.honoka.text.is-active > .honoka.char {
  animation: text09 6s cubic-bezier(0.11, 0.88, 1, 0.04);
  animation-fill-mode: forwards;
  animation-delay: calc(0.4s * var(--char-index));
}

@keyframes text09 {
  0% {
    filter: blur(8px);
    opacity: 0;
  }
  11.3% {
    filter: blur(2px);
    opacity: 1;
  }
  60% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

/* 初期CSS */
.honoka.container {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3c3c3c;
}

.honoka.visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up