افکت پارالاکس در طراحی وب چیست؟ | آموزش با کد عملی
افکت پارالاکس (Parallax Effect) یکی از جذاب‌ترین تکنیک‌های طراحی رابط کاربری است که به‌وسیله‌ی آن می‌توان عمق و پویایی بیشتری به صفحات وب افزود. در این مقاله به بررسی دقیق این افکت، مزایا، کاربردها، و پیاده‌سازی عملی آن با HTML، CSS و JavaScript خواهیم پرداخت.
افکت پارالاکس چیست؟
پارالاکس به تکنیکی در طراحی صفحات وب گفته می‌شود که در آن عناصر مختلف صفحه با سرعت‌های متفاوت نسبت به اسکرول کاربر حرکت می‌کنند. این تکنیک باعث ایجاد حس سه‌بعدی و جذابیت بصری بیشتر برای کاربر می‌شود.
مزایای استفاده از افکت پارالاکس
- جلب توجه کاربر: با انیمیشن‌های نرم و پویا.
- افزایش تعامل کاربر: کاربران بیشتر در صفحه می‌مانند.
- حس عمق و زیبایی: به خصوص برای صفحات معرفی یا لندینگ‌پیج‌ها.
- افزایش ارزش برند: طراحی حرفه‌ای‌تر = اعتبار بیشتر.
آیا میدانید مدرسه فرانت اند پرنیان، دوره فرانت اند از صفر تا صد را بصورت حرفه ای برگزار میکند؟
تحلیل کد پارالاکس کلاس درس
در کد زیر، افکت پارالاکس به صورت مرحله‌ای طراحی شده است، به‌گونه‌ای که با اسکرول کاربر، عناصر به ترتیب وارد صفحه شده یا از آن خارج می‌شوند. لازم به ذکر است این کد در دوره بیست و سوم فول پک فرانت اند مدرسه پرنیان به پیشنهاد یکی از دانشجویان کلاس کد و توضیح داده شد.
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 10000px;
}
.pack {
width: 500px;
height: 300px;
border: 2px solid black;
position: fixed;
transition: 2s;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
}
.top {
top: -1000px;
}
.bottom {
top: 1000px;
}
.show {
top: 50%;
transition: 2s !important;
}
</style>
</head>
<body>
<div class="pack show">1</div>
<div class="pack bottom">2</div>
<div class="pack bottom">3</div>
<div class="pack bottom">4</div>
</body>
<script>
let st = 0
let oldSt = 0
let myStatus = true
let turn = 0
const packs = document.querySelectorAll('.pack')
window.addEventListener('scroll', () => {
st = parseInt(window.scrollY)
if (myStatus) {
console.log('new:' + st + " - old:" + oldSt);
if (st > oldSt) {
if (turn < packs.length-1) {
console.log('down...');
packs[turn].classList.remove('show')
packs[turn].classList.add('top')
turn++
packs[turn].classList.remove('bottom')
packs[turn].classList.add('show')
}
} else {
console.log('up...');
if (turn > 0) {
packs[turn].classList.remove('show')
packs[turn].classList.add('bottom')
turn--
packs[turn].classList.remove('top')
packs[turn].classList.add('show')
}
}
setTimeout(() => {
myStatus = true
}, 2000);
}
myStatus = false
oldSt = st
})
</script>اجزای اصلی کد:
- CSS Transition: برای ایجاد انیمیشن نرم در حرکت عناصر.
- JavaScript Scroll Listener: تشخیص جهت اسکرول (بالا یا پایین).
- کلاس‌های top / bottom / show: برای کنترل جایگاه عناصر هنگام ورود و خروج.
منطق عملکرد:
- هر بار کاربر اسکرول میکند، با توجه به جهت اسکرول (بالا یا پایین) عنصر فعلی مخفی و عنصر بعدی ظاهر می‌شود.
- از
setTimeoutبرای کنترل زمان‌بندی تغییرات استفاده شده تا از بروز اختلال در انیمیشن‌ها جلوگیری شود.
کاربردهای افکت پارالاکس
- صفحات معرفی شرکت‌ها یا محصولات
- سایت‌های شخصی یا نمونه‌کار (Portfolio)
- کمپین‌های تبلیغاتی و خلاقانه
- فروشگاه‌های اینترنتی حرفه‌ای
نکات مهم در سئو هنگام استفاده از پارالاکس
- محتوا را در HTML نگه دارید: برای قابل‌خواندن بودن توسط موتورهای جستجو.
- سرعت بارگذاری را رعایت کنید: پارالاکس سنگین نباید باعث کندی سایت شود.
- ریسپانسیو بودن را فراموش نکنید: برای دستگاه‌های موبایل بسیار مهم است.
- دسترس‌پذیری (Accessibility): برای کاربرانی که JavaScript غیرفعال دارند، محتوای جایگزین فراهم کنید.
افکت پارالاکس، اگر درست و اصولی استفاده شود، می‌تواند تجربه‌ی کاربری را ارتقا دهد و صفحات وب را حرفه‌ای‌تر و جذاب‌تر نشان دهد. در این مقاله شما یک نمونه‌ی عملی از این تکنیک را دیدید که با JavaScript ساده قابل پیاده‌سازی است.
امیدواریم از این مقاله افکت پارالاکس در طراحی وب چیست؟ | آموزش با کد عملی نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.
دیدگاهتان را بنویسید