JavaScriptで文字列を1文字ずつ入力するかのように見せかけてみた。 #JavaScript

実際に確認したい人はこちらへ
https://junya0215.github.io/cacao_ame/design_ui/inputTextAnimation/

動作はChrome, Safari, Firefox で確認


<body>
<!-- ここではソースコード表示します -->
<div id="code">
*{
  margin: 0;
  padding: 0;
}

body{
  background-color: black;
}

.drop{
  position: fixed;
  top: 0; left: 50px;

  width: 100px; height: 100vh;
  color: blue;
  overflow: hidden;
}

.drop:before{
  content: '';
  position: absolute;
  top: 10px; left: 50%;

  width: 80px; height: 80px;
  border-radius: 100%;

  background-color: currentColor;
  transform: translateX(-50%) rotate(45deg);

  animation: surface_tension1 1.5s linear infinite;
}

.drop:after{
  content: '';
  position: absolute;
  top: 30px; left: 50%;

  width: 30px; height: 30px;
  border-radius: 100%;

  background-color: currentColor;
  transform: translateX(-50%) rotate(45deg);

  animation: 
    drop 1.5s ease-in infinite,
    surface_tension2 1.5s ease-in infinite;
}

@keyframes drop{
   00%{ transform: translateX(-50%) translateY(0)  scale(1.5,1.5) rotate(45deg); }
   50%{ transform: translateX(-50%) translateY(50px)  scale(0.8,1.3) rotate(45deg); }
   80%,100%{ transform: translateX(-50%) translateY(100vh) scale(1.0,1.0) rotate(45deg); }
}

@keyframes surface_tension1{
  00%{ 
    border-radius: 100% 100% 100% 100%;
    transform: translateX(-50%) scale(1,1) rotate(45deg);
  }
  55%{ 
    border-radius: 100% 100% 50% 100%;
    transform: translateX(-50%) scale(0.98,1.02) rotate(45deg);
  }
  85%{ 
    border-radius: 100% 100% 100% 100%;
    transform: translateX(-50%) scale(1,1) rotate(45deg);
  }
}

@keyframes surface_tension2{
  00%{ border-radius:  10%  80% 100%  80%;}
  60%{ border-radius:  10%  80% 100%  80%;}
  75%{ border-radius: 100% 100% 100% 100%;}
}

#code{
  position: absolute;
  top: 0; left: 0;

  width: 100%; height: auto;
  padding: 20px;
  box-sizing: border-box;

  font-size: 0.9em;
  white-space: pre-wrap;
  word-break: break-all;
  color: rgba(100,150,210,.85);
}
</div>
<script>
function displaySourceCode (){
  var code, timeID, content, index = 0;

  code = document.querySelector('#code');
  content = code.textContent.replace(/&gt;/g,'>').split('');
  code.textContent = '';

  timeID = setInterval(function (){
    if(index >= content.length) {
      clearInterval(timeID);
      return;
    }
    code.textContent += content[index++];

    if(document.body.scrollHeight){
      document.body.scrollTop = document.body.scrollHeight;
    }else if(document.documentElement.scrollHeight){
      document.documentElement.scrollTop = document.documentElement.scrollHeight;
    }
  }, 30);
}

displaySourceCode();
</script>
</body>

補足

テキストデータを用意して、それを配列化します。
データにエスケープ文字列が入っている場合はreplace()を使います。

code.textContent.replace(/&gt;/g,'>').split('');

配列化したテキストデータを一文字ずつ表示していく。
30msごとに表示していきます。

表示はtextContentにデータを入ればOK。
データ量と画面の高さによってはスクロールしなければいけないので
自動でスクロールを最下部に移動させます。
スクロール処理はブラウザによって変える必要があります。

timeID = setInterval(function (){
    if(index >= content.length) {
      clearInterval(timeID);
      return;
    }
    code.textContent += content[index++];

    if(document.body.scrollHeight){
      document.body.scrollTop = document.body.scrollHeight;
    }else if(document.documentElement.scrollHeight){
      document.documentElement.scrollTop = document.documentElement.scrollHeight;
    }
  }, 30);