テキストアニメーション

要素がウィンドウ画面内に入ったらテキストが1文字ずつ表示されます。

追加可能
パーツ
変更可能箇所 同一ページ
に複数設置
ページ複製・
クリップボード使用可否

※リッチテキストの機能で
追加可能なもの
  • テキストカラー

  • フォントサイズ

  • アニメーション※1

 

JS変更箇所

  • スクロール量
  • 1文字ずつの遅延速度
※留意事項

※1:アニメーションをつけるテキストはフォントサイズ・カラーその他フォント関連の統一を推奨しております。
※オプションクラス「italic」を使用する場合は、斜体機能を使用した全てにデザインがあたります。

 

【JS】
※デフォルトのパーツ表示のスクロール量
 0.3→30%
※デフォルトの1文字ごとの遅延秒
 0.04→0.04秒

デモ

1文字ずつフェードします。

It fades in one character at a time.

下からフェード

1文字ずつフェードします。

It fades in one character at a time.

上からフェード

1文字ずつフェードします。

It fades in one character at a time.

設定方法

  • CSSをカスタムCSSに記述。
  • JavaScriptを使用したいパーツのセクション一番下に配置。複数ページで使用する場合は共通フッターに配置。
  1. アニメーションさせたいテキストパーツにクラス「js-charaFade_text」を追加。
  2. 対象となるテキストに斜体を選択。
  3. 他アニメーションをつけたい場合は以下のオプションクラスを付与。
    • 下から上にフェードイン→「op_moveUp
    • 上から下にフェードイン→「op_moveDown

       

斜体を使用したい場合:

  1. 斜体にさせたいアニメーション用のテキストパーツにオプションクラス「italic」を追加。

JS・CSS

  • JS
  • CSS

JavaScript

2026-01-07更新(v1.0.0)

<script>
'use strict';
/* -----------------------
テキストアニメーション v1.0.0
----------------------- */
document.addEventListener('DOMContentLoaded', function () {

/*------------- 変数定義 【変更可能】 START -------------*/
const THRESHOLD = 0.3; /* パーツ着火のスクロール量(デフォルト:30%)*/
const STAGGER = 0.04; /* 1文字ごとの遅延秒 */
/*------------- 変数定義 【変更可能】 END -------------*/

const JITTER = 0.02; /* 遅延ゆらぎ秒(0で無効) */
const blocks = document.querySelectorAll('.js-charaFade_text');
if (!blocks.length) return;

/* 文字の配列化 */
const splitToSpans = (em) => {
if (em.dataset.split === '1') return;

const text = em.textContent;
em.textContent = '';

[...text].forEach((ch, i) => {
const span = document.createElement('span');
span.className = 'char';

if (ch === ' ') {
span.innerHTML = '&nbsp;';
} else {
span.textContent = ch;
}

const jitter = JITTER ? (Math.random() * JITTER) : 0;
span.style.setProperty('--d', (i * STAGGER + jitter).toFixed(3) + 's');

em.appendChild(span);
});

em.dataset.split = '1';
};

/* 全ブロック内の em を先に分割 */
blocks.forEach(block => {
const ems = block.querySelectorAll('em');
ems.forEach(splitToSpans);
});

/* スクロールで is-anim 付与 */
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;

entry.target.classList.add('is-anim');
observer.unobserve(entry.target); /* 1回のみ */
});
}, { threshold: THRESHOLD });

blocks.forEach(block => observer.observe(block));
});
/* -----------------------
テキストアニメーション END
----------------------- */
</script>

CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。

2026-01-07更新(v1.0.0)

/*----- テキストアニメーション START v1.0.0 -----*/
.component {
&.richtext {
&.js-charaFade_text {
em {
.char {
display: inline-block;
opacity: 0;
transition: opacity 0.6s ease;
transition-delay: var(--d);
}
}
&.is-anim {
em {
.char {
opacity: 1;
}
}
}
//オプションアニメーション
&.op_moveUp {
em {
.char {
display: inline-block;
opacity: 0;
transform: translateY(50%);
transition:
opacity 0.6s ease,
transform 0.6s ease;
transition-delay: var(--d);
}
}
&.is-anim {
em {
.char {
opacity: 1;
transform: translateY(0);
}
}
}
}
&.op_moveDown {
em {
.char {
display: inline-block;
opacity: 0;
transform: translateY(-50%);
transition:
opacity 0.6s ease,
transform 0.6s ease;
transition-delay: var(--d);
}
}
&.is-anim {
em {
.char {
opacity: 1;
transform: translateY(0);
}
}
}
}
}
}
}
/*----- テキストアニメーション END -----*/

JSが必要な実装の注意点スプレッドシート(H列)は読みましたか?

※必ず注意点(H列)をご確認の上閲覧ください

ページトップへ戻る