文字を一文字ずつフェードインさせる処理(JavaScript)

2025年1月5日

文字を一文字ずつフェードインさせる処理です
一応自作ですので不具合等あるかも知れません。参考サイトも見つけましたのでそちらの方がよいかも知れません。
JavaScriptを使って表現しております。またテキストが見え始めたら処理するようにもしております
@keyframesを変えればもっと違った見た目にもできますよ

文字を一文字ずつフェードインさせる処理です

JavaScriptコードdocument.addEventListener('DOMContentLoaded', function() {
    // 一文字ずつ表示
    character_by_character("one-word-box", "one-word-text", 0.5, 0.05 );
});
// スクロール時の処理
document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener( 'scroll', function() {
        // 一文字ずつ表示
        character_by_character("one-word-box", "one-word-text", 0.5, 0.05 );
    });
});
//----------------------------------------------------------
// 　文字を一文字ずつ表示させるための処理
//----------------------------------------------------------
function character_by_character( p_idName, t_idName, delay, duration  ) {
 
  //親の要素を取得
  let p_ele = document.getElementById( p_idName );
 
  //textのid要素を取得、のち<span>～に書き換える
  let spanText  = document.getElementById( t_idName );
 
  // 親要要素が見えたら処理
  var scrollTop = window.scrollY;
  var scrollBtm = scrollTop + window.innerHeight
 
  // 対象の要素の位置を取得
  var targetTop = p_ele.getBoundingClientRect().top + scrollTop;
  var targetBtm =  targetTop + spanText.clientHeight;
 
  if( scrollBtm > targetTop ) {
      //要素の中身を取得、文字を区切るため
      let text = spanText.innerHTML;
      spanText.style.opacity = 1;
 
      // すでに<span>に変換してたら処理しない
      if( !(text.indexOf( "span" ) === -1) ) return;
 
      //変数に空白を設定(spanで上書きする）
      let newText ="";
      let color = "";
     
      //splitで<span>に区切る
      text.split("").forEach(function(value,j) {
          color ="#000000";
          newText += '<span style ="animation:showtext 1s linear ' + ( delay + j*duration  ) + 's forwards; '+ color +' " class ="show">' + value + '</span>';
      });
  
     //spanTextを書き換える
     spanText.innerHTML = newText;
  }
}

JavaScriptコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52	`document.addEventListener('DOMContentLoaded',` `function() {` `// 一文字ずつ表示` `character_by_character("one-word-box",` `"one-word-text", 0.5, 0.05 );` `});` `// スクロール時の処理` `document.addEventListener('DOMContentLoaded',` `function() {` `window.addEventListener(` `'scroll',` `function() {` `// 一文字ずつ表示` `character_by_character("one-word-box",` `"one-word-text", 0.5, 0.05 );` `});` `});` `//----------------------------------------------------------` `// 　文字を一文字ずつ表示させるための処理` `//----------------------------------------------------------` `function` `character_by_character( p_idName, t_idName, delay, duration ) {` `//親の要素を取得` `let` `p_ele = document.getElementById( p_idName );` `//textのid要素を取得、のち<span>～に書き換える` `let` `spanText = document.getElementById( t_idName );` `// 親要要素が見えたら処理` `var` `scrollTop = window.scrollY;` `var` `scrollBtm = scrollTop + window.innerHeight` `// 対象の要素の位置を取得` `var` `targetTop = p_ele.getBoundingClientRect().top + scrollTop;` `var` `targetBtm = targetTop + spanText.clientHeight;` `if( scrollBtm > targetTop ) {` `//要素の中身を取得、文字を区切るため` `let` `text = spanText.innerHTML;` `spanText.style.opacity = 1;` `// すでに<span>に変換してたら処理しない` `if( !(text.indexOf(` `"span"` `) === -1) )` `return;` `//変数に空白を設定(spanで上書きする）` `let` `newText ="";` `let` `color =` `"";` `//splitで<span>に区切る` `text.split("").forEach(function(value,j) {` `color ="#000000";` `newText +=` `'<span style ="animation:showtext 1s linear '` `+ ( delay + j*duration ) +` `'s forwards; '+ color +' " class ="show">'` `+ value +` `'</span>';` `});` `//spanTextを書き換える` `spanText.innerHTML = newText;` `}` `}`

HTMLコード<div id="one-word-box">
<div id="one-word-text">文字を一文字ずつフェードインさせる処理です</div>
</div>

HTMLコード
1 2 3	`<div id="one-word-box">` `<div id="one-word-text">文字を一文字ずつフェードインさせる処理です</div>` `</div>`

CSSコード#one-word-text {
    opacity: 0;
}
#one-word-text span {
    font-weight: 900;
    display: inline-block;
    opacity: 0;
}
@keyframes showtext {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

CSSコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16	`#one-word-text {` `opacity:` `0;` `}` `#one-word-text span {` `font-weight:` `900;` `display:` `inline-block;` `opacity:` `0;` `}` `@keyframes showtext {` `0%{` `opacity:` `0;` `}` `100%{` `opacity:` `1;` `}` `}`

参考サイト：https://web-design-note.net/2022/03/15/character-animation/

comment コメントをキャンセル

: 「初心者大歓迎！HTMLを使ってWebページを作ってみよう」のまとめ

ここまで、初心者向けにHTMLとCSSの基本的な使い方を学んできました。これで、Webページ作成の第一歩を踏み出したことになります。もう終わり？と感じる方もおられると思います。まだ説明してない部分 ...

HTML

: 【第4回】何度もくり返したい！PHPの「繰り返し（ループ）」入門

chatGPTに記事を書いてもらってますプログラムでは、同じ処理を何度も繰り返したいことがよくあります。そんなときに使うのが「ループ文」と呼ばれるものです！ PHPでよく使うループ文は、主に以 ...

HTML PHP

: JavaScript 条件分岐について学ぼう

JavaScriptを使ってプログラムを作成する際、条件によって処理を分けたりすることはよくあります。この章では「条件分岐」について学んでいきましょう。条件分岐とは？条件分岐とは、与えられた条件に ...

HTML JavaScript

: スクロールでぼけた画像が元に戻る！スムーズなぼかしアニメーションの実装方法

画像がページ読み込み時にぼかされ、スクロールしてその要素が画面に入ると自然にぼかしが解除されるアニメーションを実装してみましょう。本記事では、CSSのfilterとtransition、そしてJav ...

CSS HTML JavaScript

: 記事内容をボタンでクロスフェードさせて表示を変える方法

表示されている記事の内容をボタンを押すことで切り替えたい場合に使用。クロスフェードで少しおしゃれに切り替えます自作なので不具合等あるかと思います。実際に用意してみたのでご確認ください。記事内容は ...

CSS HTML JavaScript

アフィンガー6でトップページ以外でサイドバーに表示されてしまう「新着記事一覧」を非表示にしたい

文字を一文字ずつフェードインさせながら要素のバックカラーを伸ばす処理(JavaScript)

文字を一文字ずつフェードインさせる処理(JavaScript)

クラシックエディタ用のプラグインを作ってみた

クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた