作成したもの
transformを使って、文字列を1文字ずつ表示させると同時に表示した文字を上下させる
追記:2020/12/17
空白文字を飛ばして表示してしまうことが分かったので、後に追記、もしくは新たにコードを追加します
用いた言語
js、jqeury
完成したコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./jump_text.css">
<script src="../../jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="one_dis">
<p class="btn" id="btn">testボタン</p>
<p class="text" id="text">1文字ずつテキストを表示します</p>
<div class="jump_char" id="jump_char">
<p class="text add_text" id="add_text"></p>
</div>
</div>
<script>
$(function() {
$('#btn').click(function() {
//表示する文字列のタグを設定しておく
let get_text = $('#text').text();
//countで文字毎にクラス設定するための変数
let count = 0;
//文字を動かす量の変数
let move_char = 20;
//文字を追加する間隔の変数
let addTime_char = 500;
//文字が動く時間の変数 ※addTIme_charより大きくした場合正常な動きをしない可能性あり
let moveTime_char = 1000;
//文字を上に移動させる時間、下に移動させるタイミングの設定
let moveUpTime_char = 100;
let moveDownTime_char = 200;
//メインの関数
//のちにclearsetITmeOutを使うため変数に代入しておく
var text_display = function() {
//文字列を1文字ずつ追加するための用意
let add_char_tag = $('<span class="char" id="char"></span>');
add_char_tag.addClass('char' + count);
$('#add_text').append(add_char_tag);
// 文字の単体のcssを設定
//inline-blockを指定することでtransformを有効化
$('.char' + count).css({
display: 'inline-block',
opacity: 0,
transform: 'translateY(' + move_char + 'px)',
transition: moveTime_char + "ms"
});
//charAt関数を用いて1文字ずつ文字をspanタグに追加
$('.char' + count).text(get_text.charAt(count));
//setTimeout関数を用いて、時間差をつけ文字を上下させる
setTimeout(moveUp($('.char' + (count - 1))), moveUpTime_char);
setTimeout(moveDown($('.char' + (count - 2))), moveDownTime_char)
count = count + 1;
var setTimeout_id = setTimeout(text_display, addTime_char);
//文字列の長さまでcountが進んだらストップ
if (count > get_text.length) {
clearTimeout(setTimeout_id);
}
}
//発火させるアクションがないので関数を呼び出す
text_display();
function moveUp(charNum) {
$(charNum).css({
opacity: 1,
transform: 'translateY(0px)',
transition: moveTime_char + 'ms'
});
}
function moveDown(charNum) {
$(charNum).css({
transform: 'translateY(' + move_char + 'px)',
transition: moveTime_char + 'ms'
});
}
});
});
</script>
</body>
</html>
動きが見れるものも置いておきます。
See the Pen ZEpeWJG by ぺこ太🐊 (@pecotaro1089) on CodePen.
個人的にハマった個所
setTImeout関数を複数用いた際のtransformの挙動
上に動いた文字を再び下に戻すために、setTimeout関数の中にsetTImeout関数を使い、その中でcssメソッドを使うと何故かtransformだけ上手く動かなくなった。
対策：setTimeOut関数の引数を関数として定義し、入り子ではなく別々に使う。（理由がわからない）
transformが効かなくなった
transfromはインラインブロックで動くらしく、spanタグでは動かないらしい。
対策：spanタグにdisplay: inline-blockを追加することで解決。
transformにdelayが効かない
cssだけか分からないが、delayが効かないメソッドがあるらしい。
対策：setTimeout関数を使う。
最後に
2か月前からコーディングを始めた初心者で今回の記事が初めてなので、コード自体とても拙く、見づらい部分が多々あると思います。
この記事は、自分が見直す際に使えるような目的に置いているため、丁寧すぎる部分、わかりづらい部分もあると思いますが、目をつぶってくれたら幸いです。