portfolioと記述されたロゴ

portfolioと記述されたロゴ

- テキストアニメーション -

コーディングスキル一覧

詳細につきましては以下のサイトを参照くださいませ。

https://web-html.blog/javascript/gsap-text-animation/

パターン1

タイトルテキスト

  1. step1

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="/script.js" defer></script>
</head>

<body>
  <div class="main-ttl">
    <h3 class="js_1 textSpan">タイトルテキスト</h3>
    <span class="line js_1-2"></span>
  </div>
</body>

</html>
戻る
次へ
  1. step2

もう少しです。

CSS

.main-ttl {
  max-width: -moz-fit-content;
  max-width: fit-content;
}

h3 span {
  display: inline-block;
}

.line {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
}
.line-center {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.line-right {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
  position: absolute;
  right: 0;
}
次へ
  1. step3

もう少しです。

Javascript

class TextWrapper {
  // コンストラクタでは特に何もしないが、将来的に拡張することを想定している
  constructor() {}

  // 文字を<span>タグで囲むメソッド
  wrapCharacterWithSpan(char) {
    return `<span>${char}</span>`;
  }

  // 指定された要素内のテキストを1文字ずつ<span>タグで囲むメソッド
  wrapAllTextWithSpans(selector) {
    const elements = document.querySelectorAll(selector); // 指定された要素を全て取得
    elements.forEach((element) => {
      // 取得した要素全てに対してループ処理
      const texts = element.textContent // 要素内のテキストを取得
        .split("") // 1文字ずつ分割
        .map((char) => this.wrapCharacterWithSpan(char)) // 各文字を<span>タグで囲む
        .join(""); // 文字列に戻す

      element.innerHTML = texts; // 要素内に<span>タグで囲まれたテキストを表示
    });
  }
}

class Main {
  constructor() {
    this._init();
  }
  _init() {
    const textWrapper = new TextWrapper();
    textWrapper.wrapAllTextWithSpans(".textSpan");
  }
}
new Main();

const txt = gsap.timeline({ repeat: 3 });
txt
  .from(".js_1 > span", 1, {
    y: "100%",
    opacity: 0,
    stagger: {
      amount: 0.7,
    },
    ease: "back.out(2.5)",
  })
  .from(
    ".js_1-2",
    {
      duration: 1.2,
      ease: "cubic-bezier(0.22, 1, 0.36, 1)",
      width: "0",
    },
    "<=0.6"
  );
次へ
装飾

完成です。

お疲れ様です。

タイトルテキスト

パターン2

タイトルテキスト

  1. step1

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="/script.js" defer></script>
</head>

<body>
  <div class="main-ttl overflow-hidden">
    <h3 class="js_2 textSpan">タイトルテキスト</h3>
    <span class="line js_2-2"></span>
  </div>
</body>

</html>
次へ
  1. step2

もう少しです。

CSS

.main-ttl {
  max-width: -moz-fit-content;
  max-width: fit-content;
  overflow: hidden;
}

h3 span {
  display: inline-block;
}

.line {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
}
.line-center {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.line-right {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
  position: absolute;
  right: 0;
}
次へ
  1. step3

もう少しです。

Javascript

class TextWrapper {
  // コンストラクタでは特に何もしないが、将来的に拡張することを想定している
  constructor() {}

  // 文字を<span>タグで囲むメソッド
  wrapCharacterWithSpan(char) {
    return `<span>${char}</span>`;
  }

  // 指定された要素内のテキストを1文字ずつ<span>タグで囲むメソッド
  wrapAllTextWithSpans(selector) {
    const elements = document.querySelectorAll(selector); // 指定された要素を全て取得
    elements.forEach((element) => {
      // 取得した要素全てに対してループ処理
      const texts = element.textContent // 要素内のテキストを取得
        .split("") // 1文字ずつ分割
        .map((char) => this.wrapCharacterWithSpan(char)) // 各文字を<span>タグで囲む
        .join(""); // 文字列に戻す

      element.innerHTML = texts; // 要素内に<span>タグで囲まれたテキストを表示
    });
  }
}

class Main {
  constructor() {
    this._init();
  }
  _init() {
    const textWrapper = new TextWrapper();
    textWrapper.wrapAllTextWithSpans(".textSpan");
  }
}
new Main();

  const txt2 = gsap.timeline({ repeat: 10 });
  txt2
    .from(".js_2 > span", 1, {
      y: "100%",
      opacity: 0,
      stagger: {
        amount: 0.7,
      },
      ease: "back.out(2.5)",
    })
    .from(
      ".js_2-2",
      {
        duration: 1.2,
        ease: "cubic-bezier(0.22, 1, 0.36, 1)",
        width: "0",
      },
      "<=0.6"
    )
    .to(".js_2-2", 1, { ease: "cubic-bezier(0.22, 1, 0.36, 1)", x: "100%" });
次へ
装飾

完成です。

お疲れ様です。

タイトルテキスト

パターン3

タイトルテキスト

  1. step1

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="/script.js" defer></script>
</head>

<body>
<div class="main-ttl">
  <h3 class="js_3 textSpan">タイトルテキスト</h3>
  <span class="line-center js_3-2"></span>
</div>
</body>

</html>
次へ
  1. step2

もう少しです。

CSS

.main-ttl {
  position: relative;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

h3 span {
  display: inline-block;
}

.line {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
}
.line-center {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.line-right {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
  position: absolute;
  right: 0;
}
次へ
  1. step3

もう少しです。

Javascript

class TextWrapper {
  // コンストラクタでは特に何もしないが、将来的に拡張することを想定している
  constructor() {}

  // 文字を<span>タグで囲むメソッド
  wrapCharacterWithSpan(char) {
    return `<span>${char}</span>`;
  }

  // 指定された要素内のテキストを1文字ずつ<span>タグで囲むメソッド
  wrapAllTextWithSpans(selector) {
    const elements = document.querySelectorAll(selector); // 指定された要素を全て取得
    elements.forEach((element) => {
      // 取得した要素全てに対してループ処理
      const texts = element.textContent // 要素内のテキストを取得
        .split("") // 1文字ずつ分割
        .map((char) => this.wrapCharacterWithSpan(char)) // 各文字を<span>タグで囲む
        .join(""); // 文字列に戻す

      element.innerHTML = texts; // 要素内に<span>タグで囲まれたテキストを表示
    });
  }
}

class Main {
  constructor() {
    this._init();
  }
  _init() {
    const textWrapper = new TextWrapper();
    textWrapper.wrapAllTextWithSpans(".textSpan");
  }
}
new Main();

const txt3 = gsap.timeline({ repeat: 10 });
txt3
  .from(".js_3 > span", 1, {
    opacity: 0,
    scale: 2,
    filter: "blur(3px)",
    ease: "power2.out",
    stagger: {
      from: "center",
      amount: 0.6,
    },
  })
  .from(".js_3-2", {
    duration: 1.2,
    ease: "cubic-bezier(0.22, 1, 0.36, 1)",
    width: "0",
  });
次へ
装飾

完成です。

お疲れ様です。

タイトルテキスト

パターン4

タイトルテキスト

  1. step1

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="/script.js" defer></script>
</head>

<body>
<div class="main-ttl relative">
  <h3 class="js_4 textSpan">タイトルテキスト</h3>
  <span class="line-right js_4-2"></span>
</div>
</body>

</html>
次へ
  1. step2

もう少しです。

CSS

.main-ttl {
  max-width: -moz-fit-content;
  max-width: fit-content;
}

h3 span {
  display: inline-block;
}

.line {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
}
.line-center {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.line-right {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
  position: absolute;
  right: 0;
}
次へ
  1. step3

もう少しです。

Javascript

class TextWrapper {
  // コンストラクタでは特に何もしないが、将来的に拡張することを想定している
  constructor() {}

  // 文字を<span>タグで囲むメソッド
  wrapCharacterWithSpan(char) {
    return `<span>${char}</span>`;
  }

  // 指定された要素内のテキストを1文字ずつ<span>タグで囲むメソッド
  wrapAllTextWithSpans(selector) {
    const elements = document.querySelectorAll(selector); // 指定された要素を全て取得
    elements.forEach((element) => {
      // 取得した要素全てに対してループ処理
      const texts = element.textContent // 要素内のテキストを取得
        .split("") // 1文字ずつ分割
        .map((char) => this.wrapCharacterWithSpan(char)) // 各文字を<span>タグで囲む
        .join(""); // 文字列に戻す

      element.innerHTML = texts; // 要素内に<span>タグで囲まれたテキストを表示
    });
  }
}

class Main {
  constructor() {
    this._init();
  }
  _init() {
    const textWrapper = new TextWrapper();
    textWrapper.wrapAllTextWithSpans(".textSpan");
  }
}
new Main();

const txt4 = gsap.timeline({ repeat: 10 });
txt4
  .from(".js_4 > span", 1, {
    opacity: 0,
    scale: 2,
    x: 10,
    ease: "power2.out",
    stagger: {
      amount: 0.3,
    },
  })
  .from(
    ".js_4-2",
    {
      duration: 1.2,
      ease: "cubic-bezier(-0.22, 1, 0.36, 1)",
      width: "0",
    },
    "<=0.6"
  )
  .to(".js_4-2", 1, { ease: "cubic-bezier(0.22, 1, 0.36, 1)", x: "-100%" });
次へ
装飾

完成です。

お疲れ様です。

タイトルテキスト

パターン5

タイトルテキスト

  1. step1

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="/script.js" defer></script>
</head>

<body>
  <div class="main-ttl relative">
    <h3 class="js_5 textSpan">タイトルテキスト</h3>
    <span class="line-center js_5-2"></span>
  </div>
</body>

</html>
次へ
  1. step2

もう少しです。

CSS

.main-ttl {
  position: relative;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

h3 span {
  display: inline-block;
}

.line {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
}
.line-center {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.line-right {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;
  position: absolute;
  right: 0;
}
次へ
  1. step3

もう少しです。

Javascript

class TextWrapper {
  // コンストラクタでは特に何もしないが、将来的に拡張することを想定している
  constructor() {}

  // 文字を<span>タグで囲むメソッド
  wrapCharacterWithSpan(char) {
    return `<span>${char}</span>`;
  }

  // 指定された要素内のテキストを1文字ずつ<span>タグで囲むメソッド
  wrapAllTextWithSpans(selector) {
    const elements = document.querySelectorAll(selector); // 指定された要素を全て取得
    elements.forEach((element) => {
      // 取得した要素全てに対してループ処理
      const texts = element.textContent // 要素内のテキストを取得
        .split("") // 1文字ずつ分割
        .map((char) => this.wrapCharacterWithSpan(char)) // 各文字を<span>タグで囲む
        .join(""); // 文字列に戻す

      element.innerHTML = texts; // 要素内に<span>タグで囲まれたテキストを表示
    });
  }
}

class Main {
  constructor() {
    this._init();
  }
  _init() {
    const textWrapper = new TextWrapper();
    textWrapper.wrapAllTextWithSpans(".textSpan");
  }
}
new Main();

const txt5 = gsap.timeline({ repeat: 10 });
txt5
  .from(".js_5 > span", 1, {
    opacity: 0,
    scale: 2,
    filter: "blur(3px)",
    ease: "power2.out",
    stagger: {
      from: "random",
      amount: 0.6,
    },
  })
  .from(".js_5-2", {
    duration: 1.2,
    ease: "cubic-bezier(0.22, 1, 0.36, 1)",
    width: "0",
  });
次へ
装飾

完成です。

お疲れ様です。

タイトルテキスト

©️ Souichi_Kimura All Rights Reserved.