パーツ番号 10-06-01 ・ JavaScript使用
AI応答ストリーミング表示
ChatGPTのように1文字ずつテキストが流れて表示される演出。AIチャットボットや自動応答UIの回答表示に使えます。
プレビュー
ソースコード
HTML
<div class="d10-06-01-box">
<div class="d10-06-01-head">
<span class="d10-06-01-ai-badge">AI</span><span class="d10-06-01-name">アシスタント</span>
</div>
<p class="d10-06-01-msg"><span class="d10-06-01-text"></span><span class="d10-06-01-cursor"></span></p>
</div>CSS
.d10-06-01 .d10-06-01-box{width:100%;max-width:250px;background:#f7f8fa;border-radius:14px;padding:16px 18px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.d10-06-01 .d10-06-01-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.d10-06-01 .d10-06-01-ai-badge{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.d10-06-01 .d10-06-01-name{font-size:12px;font-weight:600;color:#374151}
.d10-06-01 .d10-06-01-msg{margin:0;font-size:12.5px;line-height:1.8;color:#1f2937;min-height:70px}
.d10-06-01 .d10-06-01-cursor{display:inline-block;width:2px;height:13px;background:#6366f1;margin-left:2px;vertical-align:middle;animation:d551Blink .8s step-end infinite}
@keyframes d551Blink{0%,100%{opacity:1}50%{opacity:0}}JavaScript
(function(){
var root = document.currentScript.closest('.item');
var el = root.querySelector('.d10-06-01-text');
var texts = [
'ご質問ありがとうございます。WordPressでの実装方法についてご説明しますね。',
'まずプラグインを有効化し、設定画面からAPIキーを入力してください。'
];
var ti = 0;
function typeText(str, cb){
var i = 0;
el.textContent = '';
var timer = setInterval(function(){
i++;
el.textContent = str.slice(0, i);
if(i >= str.length){
clearInterval(timer);
setTimeout(cb, 1400);
}
}, 38);
}
function loop(){
typeText(texts[ti], function(){
ti = (ti + 1) % texts.length;
setTimeout(loop, 500);
});
}
loop();
})();クラス名 .d10-06-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。