JavaScript

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

More than 1 year has passed since last update.

実際に確認したい人はこちらへ

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);