با اسکرول‌دار (Scroll Container) چه کارهایی می شود کرد؟
(داخل کادر بالا اسکرول کنید - حتی با پاراگراف‌های بلند!)
وقتی کادر اسکرول‌دار (Scroll Container) دارید، فقط محدود به متن نیستید. این کادر مثل یک «صحنه نمایش کوچک» است که می‌توانید هر چیزی را در آن قرار دهید.
در اینجا ۵ ایده خلاقانه برای پر کردن این کادر (به جز متن) آورده‌ام:
۱. گالری تصاویر یا اسلایدشو (Image Gallery) 🖼️
به جای پاراگراف، تصاویر را به صورت عمودی بچینید.
- ایده: نمایش مراحل یک پروژه، قبل و بعد از یک تغییر، یا یک داستان مصور (Comic).
- افکت: وقتی کاربر اسکرول می‌کند، تصویر بعدی به آرامی ظاهر شود یا تصویر قبلی محو شود.
- کاربرد: عالی برای پورتفولیو، معرفی محصولات یا آموزش‌های تصویری.
۲. اینفوگرافیک عمودی (Vertical Infographic) 📊
یک نمودار یا نقشه راه طولانی را در کادر قرار دهید.
- ایده: یک خط زمانی (Timeline) که مراحل یک فرآیند را نشان می‌دهد.
- افکت: با اسکرول، خط زمانی به سمت بالا حرکت می‌کند و هر مرحله (مثلاً “شروع”، “توسعه”، “پایان”) با یک آیکون و رنگ خاص روشن می‌شود.
- کاربرد: توضیح تاریخچه یک شرکت، مراحل ثبت‌نام، یا آمار و ارقام.
۳. کارت‌های محصول یا خدمات (Product Cards) 🛍️
کارت‌های شیک با عکس، قیمت و توضیحات کوتاه را در کادر بچینید.
- ایده: لیست محصولات برتر یا خدمات شرکت.
- افکت: وقتی کاربر اسکرول می‌کند، کارت‌ها از پایین به بالا می‌آیند و سایه (Shadow) آن‌ها تغییر می‌کند تا حس سه‌بعدی بدهد.
- کاربرد: فروشگاه‌های آنلاین، معرفی خدمات پارت (Part) یا نمونه کارها.
۴. کد برنامه‌نویسی یا ترمینال (Code Snippet) 💻
اگر وبلاگ شما فنی است، کدهای جاوااسکریپت یا HTML را در کادر قرار دهید.
- ایده: نمایش یک قطعه کد زیبا با هایلایت رنگی.
- افکت: با اسکرول، خطوط کد یکی‌یکی روشن شوند (انگار که در حال تایپ شدن هستند).
- کاربرد: آموزش برنامه‌نویسی، معرفی ابزارهای جدید.
۵. آزمون یا کوییز تعاملی (Interactive Quiz) ❓
سوالات و گزینه‌ها را در کادر قرار دهید.
- ایده: یک سوال در هر اسکرول.
- افکت: وقتی کاربر اسکرول می‌کند، سوال بعدی ظاهر می‌شود و گزینه‌های قبلی محو می‌شوند.
- کاربرد: افزایش تعامل کاربر، تست دانش مخاطبان.
مثال عملی: گالری تصاویر در کادر
این کد را امتحان کنید تا ببینید چطور می‌توانیم به جای متن، تصاویر را در همان کادر اسکرول‌دار قرار دهیم:
HTML
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<style>
.blog-scroll-card {
width: 100%;
max-width: 600px;
margin: 20px auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
overflow: hidden;
font-family: 'Tahoma', sans-serif;
}
.card-header {
background: #2c3e50;
color: white;
padding: 15px;
text-align: center;
}
.scroll-content {
height: 400px;
overflow-y: auto;
padding: 20px;
background: #f9f9f9;
scrollbar-width: thin;
scrollbar-color: #3498db #f1f1f1;
}
.image-card {
background: white;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
opacity: 0.5;
transform: scale(0.95);
transition: all 0.4s ease;
border-right: 4px solid #3498db;
}
.image-card.active {
opacity: 1;
transform: scale(1);
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.image-card img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 6px;
margin-bottom: 10px;
background: #ddd;
}
.image-card h4 { margin: 5px 0; color: #333; }
.image-card p { margin: 0; font-size: 0.9rem; color: #666; }
</style>
</head>
<body>
<div class="blog-scroll-card">
<div class="card-header">
<h3>گالری تصاویر تعاملی</h3>
</div>
<div class="scroll-content" id="imgScroll">
<!-- کارت‌های تصویر -->
<div class="image-card active">
<img src="https://via.placeholder.com/600x150/3498db/ffffff?text=Image+1" alt="تصویر ۱">
<h4>محصول شماره ۱</h4>
<p>توضیحات کوتاه درباره محصول اول که با اسکرول ظاهر می‌شود.</p>
</div>
<div class="image-card">
<img src="https://via.placeholder.com/600x150/e74c3c/ffffff?text=Image+2" alt="تصویر ۲">
<h4>محصول شماره ۲</h4>
<p>این محصول ویژگی‌های منحصر به فردی دارد که در اسکرول بعدی دیده می‌شود.</p>
</div>
<div class="image-card">
<img src="https://via.placeholder.com/600x150/2ecc71/ffffff?text=Image+3" alt="تصویر ۳">
<h4>محصول شماره ۳</h4>
<p>طراحی زیبا و کاربردی که در وبلاگ شما عالی به نظر می‌رسد.</p>
</div>
<div class="image-card">
<img src="https://via.placeholder.com/600x150/f1c40f/ffffff?text=Image+4" alt="تصویر ۴">
<h4>محصول شماره ۴</h4>
<p>نمونه‌ای از کارهای انجام شده با استفاده از این تکنیک.</p>
</div>
<div class="image-card">
<img src="https://via.placeholder.com/600x150/9b59b6/ffffff?text=Image+5" alt="تصویر ۵">
<h4>محصول شماره ۵</h4>
<p>پایان گالری تصاویر. اسکرول کنید تا همه را ببینید.</p>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const scrollBox = document.getElementById('imgScroll');
const cards = document.querySelectorAll('.image-card');
if (!scrollBox) return;
function highlightActiveCard() {
const containerHeight = scrollBox.clientHeight;
const scrollTop = scrollBox.scrollTop;
cards.forEach(card => {
const cardTop = card.offsetTop;
const cardHeight = card.offsetHeight;
if (scrollTop + containerHeight > cardTop && scrollTop < cardTop + cardHeight) {
card.classList.add('active');
} else {
card.classList.remove('active');
}
});
}
scrollBox.addEventListener('scroll', highlightActiveCard);
highlightActiveCard();
});
</script>
</body>
</html>
خلاصه:
شما می‌توانید در این کادر هر چیزی که HTML است را قرار دهید:
- ✅ تصاویر و ویدیوها
- ✅ نمودارها و اینفوگرافیک‌ها
- ✅ کارت‌های محصول
- ✅ کدهای برنامه‌نویسی
- ✅ فرم‌های کوتاه
- ✅ آیکون‌ها و انیمیشن‌های CSS
فقط کافیست محتوای داخل div با کلاس article-content را با محتوای دلخواه خود جایگزین کنید و اسکریپت را نگه دارید تا افکت اسکرول کار کند! 🚀
