ストーリーズ Stories
円形アバターをタップして全画面コンテンツを表示するパターン。SNSで普及した一時的コンテンツ表示。
ライブデモ
ソースコード
<div class="demo-stories-wrapper">
<div class="demo-stories-bar">
<div class="demo-story-avatar unseen" data-story="0">
<div class="demo-story-ring"><div class="demo-story-img">A</div></div>
<span class="demo-story-name">あいこ</span>
</div>
<div class="demo-story-avatar unseen" data-story="1">
<div class="demo-story-ring"><div class="demo-story-img">B</div></div>
<span class="demo-story-name">たけし</span>
</div>
<div class="demo-story-avatar unseen" data-story="2">
<div class="demo-story-ring"><div class="demo-story-img">C</div></div>
<span class="demo-story-name">みゆき</span>
</div>
<div class="demo-story-avatar" data-story="3">
<div class="demo-story-ring seen"><div class="demo-story-img">D</div></div>
<span class="demo-story-name">けんた</span>
</div>
</div>
<div class="demo-story-viewer">
<div class="demo-story-progress"><div class="demo-story-progress-bar"></div></div>
<div class="demo-story-viewer-header">
<div class="demo-story-viewer-user">ストーリー</div>
<button class="demo-story-close">×</button>
</div>
<div class="demo-story-viewer-body">ストーリーの内容がここに表示されます</div>
</div>
</div>.demo-stories-wrapper { position: relative; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; height: 300px; background: #fff; }
.demo-stories-bar {
display: flex; gap: 14px; padding: 16px;
overflow-x: auto; border-bottom: 1px solid #f3f4f6;
}
.demo-story-avatar { text-align: center; cursor: pointer; flex-shrink: 0; }
.demo-story-ring {
width: 56px; height: 56px; border-radius: 50%; padding: 3px;
background: linear-gradient(135deg, var(--ui-primary), color-mix(in srgb, var(--ui-primary) 60%, #f59e0b));
}
.demo-story-ring.seen { background: #d1d5db; }
.demo-story-img {
width: 100%; height: 100%; border-radius: 50%;
background: color-mix(in srgb, var(--ui-primary) 12%, #fff);
border: 2px solid #fff; display: flex; align-items: center;
justify-content: center; font-weight: 700; font-size: 18px;
color: var(--ui-primary);
}
.demo-story-name { display: block; font-size: 11px; color: #666; margin-top: 4px; }
.demo-story-viewer {
position: absolute; inset: 0; background: #111;
display: none; flex-direction: column; z-index: 10;
}
.demo-story-viewer.active { display: flex; }
.demo-story-progress { padding: 8px 12px 0; }
.demo-story-progress-bar {
height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px;
position: relative; overflow: hidden;
}
.demo-story-progress-bar::after {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
background: #fff; border-radius: 2px; width: 0;
}
.demo-story-viewer.active .demo-story-progress-bar::after {
animation: demo-story-fill 5s linear forwards;
}
@keyframes demo-story-fill { to { width: 100%; } }
.demo-story-viewer-header {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px; color: #fff;
}
.demo-story-viewer-user { font-size: 14px; font-weight: 600; }
.demo-story-close {
background: none; border: none; color: #fff;
font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.demo-story-viewer-body {
flex: 1; display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 16px; padding: 20px;
}(function(){
var viewer = document.querySelector('.demo-story-viewer');
var userName = viewer.querySelector('.demo-story-viewer-user');
var body = viewer.querySelector('.demo-story-viewer-body');
var colors = ['#6366f1','#ec4899','#10b981','#f59e0b'];
var names = ['あいこ','たけし','みゆき','けんた'];
document.querySelectorAll('.demo-story-avatar').forEach(function(av){
av.addEventListener('click', function(){
var idx = parseInt(this.dataset.story);
viewer.style.background = colors[idx];
userName.textContent = names[idx];
body.textContent = names[idx] + ' のストーリー';
viewer.classList.add('active');
var ring = this.querySelector('.demo-story-ring');
ring.classList.add('seen');
});
});
viewer.querySelector('.demo-story-close').addEventListener('click', function(){
viewer.classList.remove('active');
});
viewer.addEventListener('click', function(e){
if(e.target === body) viewer.classList.remove('active');
});
})();AIプロンプト
Basic
ストーリーズUIをHTML/CSS/JSで作ってください。円形のアバター一覧があり、タップすると全画面でストーリーが表示されます。
Custom
以下の仕様でストーリーズUIを実装してください。 - 横スクロールできるアバター一覧（グラデーションリング付き） - 未読/既読の視覚的な区別 - タップで全画面ビューアー表示 - 上部にプログレスバー（自動進行） - プライマリカラー: #2563eb - 閉じるボタン付き
Advanced
Instagram風のストーリーズを完全実装してください。 - 複数ストーリーの連続再生（ユーザーごとに複数枚） - タップで次へ/前へ（画面の左右半分で判定） - 長押しで一時停止 - スワイプで次のユーザーへ移行 - プログレスバーのセグメント表示 - 動画対応（再生/一時停止の自動制御） - プリロードで次のストーリーを先読み - IntersectionObserverで画面外のストーリーを停止