<div class="jump">
<p>文字を<span class="jump-text">ジャンプ</span>させる1</p>
</div>
<div class="jump">
<p><span class="jump-text">文字を</span>ジャンプさせる2</p>
</div>
.jump {
padding: 10px;
font-size: 20px;
}
.jump-text span {
animation: pyon 0.3s linear;
position: relative;
}
@keyframes pyon {
0% {top: 0}
50% {top:-17px}
100%{top: 0}
}
randomCharactor('jump-text');
function randomCharactor(c) {
var randomChar = document.getElementsByClassName(c);
for (var i = 0; i < randomChar.length; i++) {
//クロージャー
(function(i) {
//i 番目の要素、テキスト内容、文字列の長さを取得
var randomCharI = randomChar[i];
var randomCharIText = randomCharI.textContent;
var randomCharLength = randomCharIText.length;
//何番目の文字を跳ねさせるかをランダムで決める
var Num = ~~(Math.random() * randomCharLength);
//跳ねさせる文字を span タグで囲む、それ以外の文字と合わせて再び文字列を作る
var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);
randomCharI.innerHTML = newRandomChar;
//アニメーションが終わったら再び関数を発火させる
document.getElementsByClassName(c)[0].children[0].addEventListener("animationend", function() {
randomCharactor(c)
}, false)
})(i)
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.