CSS と jQuery で文字を1つずつアニメーションさせる
一文字ずつ下から上にふわっと表示させるアニメーションです。
とりあえずコード全部
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【デモ】jQuery で文字を1つずつアニメーションさせる</title>
<style>
* {
margin: 0;
padding: 0;
}
.letters {
margin-top: 5rem;
font-size: 5rem;
display: flex;
justify-content: center;
}
.letters span {
transition: all 0.2s;
opacity: 0;
transform: translateY(3rem);
}
.letters span.is-show {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="letters" id="js-letters">
<span>H</span><span>e</span><span>l</span><span>l</span><span>o</span> </span><span>W</span><span>o</span><span>r</span><span>l</span><span>d</span><span>!</span>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(function() {
const speed = 100; //スピード 大きいとゆっくりになる
let cnt = 0;
const $letters = jQuery('#js-letters');
let letterNum = $letters.find('span').length;
let timerId = setInterval(function(){
$letters.find('span').eq(cnt).addClass('is-show');
if(cnt === letterNum){
clearInterval(timerId);
}
cnt++
}, speed);
});
</script>
</body>
</html>説明
テキストは<span>で1文字ずつ囲んでおきます。
まず文字を CSS の opacity:0 で非表示にして 位置も translateY(3rem) で下に下げておきます。
jQuery で setInterval を使用して<span>に順番に class=”is-show” を付与していきます。
is-show クラスには opacity:1、translateY(0) を設定しておくことにより文字が下から表示されるようになります。