2020/09/13 21:41

WEB上でタイプライター風に一文字ずつ表示させるJavascript

パパパ…っとタイプライターのようにHP上で文字を表示させれたらカッコいいんじゃないか？と、思った事がありませんか？

サイトデザインにもよりますが、けっこうハマればかっこいいと思います。

今回はタイプライター風に文字を出現させる簡単なJavascriptの書き方です。

サンプル

今回は画面を下にスクロールして、画面上に出てきて150pxのところで表示されるという書き方になります。

ここに表示↓

コーディング例

【HTML】


<p id="c-text-type" class="c-text-type-title"></p>

【Javascript】


$(function(){
var count = 0;
  $(document).ready(function(){
    $('#c-text-type').css('visibility','hidden');
    $(window).scroll(function(){
     var windowHeight = $(window).height(),
         topWindow = $(window).scrollTop();
     $('#c-text-type').each(function(){
      var objectPosition = $(this).offset().top;
      if(topWindow > objectPosition - windowHeight + 150){
      $(this).css('visibility','visible');
      count++;
      if(count == 1) {
typewriter({
    el: "#c-text-type",
    speed: 50,
    string: "サンプルテキスト。サンプルテキスト。"
});
      }
      }
     });
    });
  });
});
 
const typewriter = (param) => {
  let el = document.querySelector(param.el);
  let speed = param.speed;
  let string = param.string.split("");
 
  string.forEach((char, index) => {
    setTimeout(() => {
        el.textContent += char;
    }, speed * index);
  });
};

最初は消えてて、150pxの場所で発動します。

スクロールする度に何度も発動しないようにカウント設定をつけてますが原始的な感じですね。

【CSS】


.c-text-type-title {
  display: block;
  font-size: 1.6rem;
}
.c-text-type-title::after {
content: "|";
-webkit-animation: blink 1s infinite;
animation: blink 1s infinite;
}
 
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}