テキストアニメーション
要素がウィンドウ画面内に入ったらテキストが1文字ずつ表示されます。
| 追加可能 パーツ |
変更可能箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|
| △ ※リッチテキストの機能で 追加可能なもの |
JS変更箇所
|
〇 | 〇 |
| ※留意事項 | |||
|---|---|---|---|
|
※1：アニメーションをつけるテキストはフォントサイズ・カラーその他フォント関連の統一を推奨しております。
【JS】 |
デモ
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を使用したいパーツのセクションの一番下に配置。複数ページで使用する場合は共通フッターに配置。
- アニメーションさせたいテキストパーツにクラス「js-charaFade_text」を追加。
- 対象となるテキストに斜体を選択。
- 他アニメーションをつけたい場合は以下のオプションクラスを付与。
- 下から上にフェードイン→「op_moveUp」
-
上から下にフェードイン→「op_moveDown」
斜体を使用したい場合：
- 斜体にさせたいアニメーション用のテキストパーツにオプションクラス「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 = ' ';
} 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 -----*/
© Basic Inc. All Rights Reserved.