まるでタイピングしている様に一文字ずつ表示していくアニメーションを作成してみます。
画面内に入ったら表示が始まる設定も解説します。
Contents
デモ&使い方
<test.html>
<html>
<style>
.typeing {
opacity: 0;
}.typeing.active {
opacity: 1;
}
</style><p class=”typeing” data-speed=”100″>まるでタイピングしている様に一文字ずつ表示</p>
<script type=”text/javascript”>
const typeTarget = document.querySelectorAll(‘.typeing’);
let options = {
rootMargin: ‘0px’,
threshold: .5
}let callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio > .5 && entry.target.classList.contains(‘active’) == false) {
let typeContent = entry.target.textContent;
let typeSprit = typeContent.split(”);
let typeSpeed = entry.target.getAttribute(‘data-speed’);
entry.target.textContent = ”;
entry.target.classList.add(‘active’);let typeLength = 0;
let typeInterval = setInterval(() => {
if (typeSprit[typeLength] == undefined) {
clearInterval(typeInterval);
return false;
}
entry.target.textContent += typeSprit[typeLength];
typeLength++;
}, typeSpeed);}
});
}let observer = new IntersectionObserver(callback, options);
typeTarget.forEach(e => {
observer.observe(e);
});
</script></html>
data-speed= の部分で表示速度を変更することも可能です
コード解説
HTML
一文字ずつ表示させたいテキストをpタグにクラス属性を付与します。このクラス属性を付与することで
JSでこの部分だけを指定して抽出することが可能になります。
CSS
.typeing {
opacity: 0;
}
.typeing.active {
opacity: 1;
}
表示時にちらつかない様に、Opacityの設定のみしておきます。
JavaScript
読み込まれた<p class=”typeing” >～～～</p>をJSから読み込み、要素の文字を一文字ずつとりだして配列に入れ、テキストを一旦空白にします。この際<p class=”typeing” >～～～</p>はscriptタグの上で定義しておく必要がある点に注意してください
その後、配列に入れた文字をsetintervalで指定した秒数ごとにテキストに挿入することでアニメーション表示を行なっています。IntersectionObserverを使用して画面内に入ったら表示が始まるようにします
const typeTarget = document.querySelectorAll('.typeing');
let options = {
rootMargin: '0px',
threshold: .5
}
let callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio > .5 && entry.target.classList.contains('active') == false) {
let typeContent = entry.target.textContent;
let typeSprit = typeContent.split('');
let typeSpeed = entry.target.getAttribute('data-speed');
entry.target.textContent = '';
entry.target.classList.add('active');
let typeLength = 0;
let typeInterval = setInterval(() => {
if (typeSprit[typeLength] == undefined) {
clearInterval(typeInterval);
return false;
}
entry.target.textContent += typeSprit[typeLength];
typeLength++;
}, typeSpeed);
}
});
}
let observer = new IntersectionObserver(callback, options);
typeTarget.forEach(e => {
observer.observe(e);
});
コメント