پارالاکس چیست؟

پارالاکس (Parallax) چیست؟

پارالاکس یک تکنولوژی جدید در طراحی سایت به حساب می آید که به صورت یک افکت در سایت های تک صفحه دارای اسکرول به وجود می آید. یکی از دلایلی که این تلکنولوژی را جذاب کرده است، ارتقاء بخشیدن به تجربه کاربری به وسیله تصاویر می باشد. شما با اسکرول کردن در صفحه می توانید تمام اجزاء صفحه را به صورت ۲ بعدی مشاهده نمایید. Parallax تکنولوژی می باشد که صفحه ۲ بعدی را به صورت ۳ بعدی به شما نمایش می دهد. نمونه های اولیه تکنولوی پارالاکس بازی‌های کامپیوتری دو بعدی Jump Bug در ۱۹۸۱، Moon Patrol و Jungle Hunt در ۱۹۸۲ می باشند.

روش‌های پارالاکس

Layers

Layers یکی از روش های ایجاد پارالاکس می باشد که از سیستم های نمایشی پشتیبانی می کند و از لایه ها پس زمینه به صورت متعدد تشکیل شده است. Layers دارای قابلیت اسکرول افقی و عمودی می باشد که با لایه های مختلف ترکیب می شود و Parallax را ایجاد می کند.

Repeating Pattern

در این روش پارالاکس از اسکرول تصاویر، مربع های جداگانه و لایه های تصاویر تکرار شونده ساخته می شود. لازم است بگوییم که مربع ها دارای قابلیت شناور بودن رابر روی لایه پس زمینه می باشد.

Sprite

پارالاکس در این روش به صورت لایه های مجازی و از ترکیب تصاویر متفاوت ساخته می شود. فراموش نکنید که تصاویر در قالب یک تصویر هستند و می توانید یا مشخص کردن موقعیت تصویر در زاویه دلخواه، یک قسمت را مشاهده نمایید. با این روش می توانید اثری ۳ بعدی در flat بسازید. با قرار دادن اشاره گر موس بر روی هر قسمت از تصویر، تنها همان قسمت قابل مشاهده می باشد.

Raster

در این حالت Parallax به صورت یک لایه ساخته می شود. این روش به این صورت عمل می کند که، تصاویر از بالا به پایین ترکیب می شوند و باعث تاخیر کوچکی در رسم خطا های صفحه می شوند. بازی های Sonic the Hedgehog و Street Fighter با این روش ساخته شده اند.

مزایای پارالاکس 

• ذهن مخاطب را به وسیله انیمیشن موجود و عمق تصویر، جذب و درگیر وب سایت شما می‌کند.
• اعتبار وب سایت شما در بین کاربران را به واسطه محیطی خلاقانه افزایش می‌دهد.
• باعث افزایش کنجکاوی و تشویق کاربران به اسکرول کردن تمامی صفحات و در نتیجه افزایش زمان بازدید از وب سایت می‌شود.
• هدایت کاربر به قسمتی از وب سایت که دنبال کننده هدف خاصی است را آسان‌تر می‌سازد.
• امکان معرفی محصول با روشی خاص و پر رنگ کردن نکات مثبت آن به شیوه‌ای جذاب را فراهم می‌کند.

معایب پارالاکس 

با وجود مزیت‌های ذکر شده پارالاکس در بالا، پیش از استفاده از این روش باید معایب آن را نیز در نظر بگیرید. با بررسی نمونه‌های موجود متوجه خواهید شد که در اکثر وب سایت‌های مبتنی بر پارالاکس، سایت تنها از یک صفحه طولانی تشکیل شده است و مشکل از همین جا شروع می‌شود!

• به علت تک صفحه‌ای بودن وب سایت و درنتیجه عدم امکان تعریف title ،description و keywords های متعدد، سئو با مشکل روبه‌رو می‌شود.
• قرار دادن تمام حجم اطلاعات و تصاویر تنها در یک صفحه، باعث افزایش زمان لود وب سایت می‌شود و در نتیجه امکان
• بستن سایت به وسیله کاربر قبل از لود کامل آن افزایش پیدا می‌کند.
• وب سایت‌های پارالاکس با طراحی واکنش‌گرا (Responsive) سازگاری ندارند.
• در این روش پیوند صفحات داخلی (Internal page linking) در وب سایت وجود ندارد.

نقاط مثبت استفاده از طراحی گرافیک پارالاکس در وبسایت:

• شگفت زده کردن بازدیدکنندگان با اعماق صفحه و جلوه‌های حرکتی
• طرح یک داستان تصویری برای بازدیدکنندگان
• افزایش مدت زمان بازدید از صفحات به وسیله تشویق کاربران به اسکرول صفحه
• برانگیختن کنجکاوی بازدیدکنندگان
• امکان هدایت بازدیدکنندگان به اقدام موثر
• افزایش اعتبار وبسایت به وسیله نمایش خلاقانه

آموزش قرار دادن افکت Parallax در قالب

برای قرار دادن افکت پارالاکس در سایت خود، باید زبان پایه برنامه نویسی (Html و Css) را بلد باشید. ادامه به نحوه اضافه کردن افکت پارالاکس در سایت می پردازیم.

گام اول: ایجاد ناحیه مورد نظر برای قرار دادن عکس پارالاکس (Parallax)

برای ایجاد ناحیه در سایت خود، طبق دستور زیر کد نویسی کنید.

<div class=”parallax”>
<div class=”parallax-content”>
محتوای شما در این جا قرار می گیرد…
</div>
</div>

گام دوم: استایل دادن به افکت پارالاکس (Parallax) به وسیله زبان CSS

برای اینکه بتوانید به Parallax ایجاد شده استایل بدهید، باید کد نویسی زیر را انجام دهید.

} parallax.
;(“background-image: url(“image/my-background-image.jpg
;height: 100%
;background-attachment: fixed
;background-position: center
;background-repeat: no-repeat
;background-size: cover
;margin-left:-410px
;margin-right:-410px
{
}parallax-content.
;width:50%
;margin:0 auto
;color:#FFF
;padding-top:50px
{

به جای my-background-image.jpg در کد بالا، باید مسیر تصویر آپلود شده را وارد نمایید.

تاثیر استفاده از تکنیک پارالاکس (Parallax) بر سئو

همانطور که می دانید، سئو مشخص کننده رتبه سایت شما در سایت گوگل می باشد. زمانی می توانید رتبه سایت خود را بالا ببرید که تعداد صفحات شما زیاد باشد. تکنیک پارالاکس برای سایت های دارای صفحات زیاد مناسب نیست، به همین دلیل Parallax برای سئو نیز مفید نمی باشد. اگر کسب کار شما به صورتی می باشد که جذابیت و زیبا بودن سایت بسیار مهم باشد، پارالاکس سایت گزینه مناسب تری است. اما اگر سایت شما محتوا محور یا محتوای سایت و کسب کار شما مهم می باشد، باید به سئو سایت خود فکر کنید و از Parallax استفاده نکنید.

سخن پایانی 

به دلیل بیشتر شدن علاقه کاربران به زیبا سازی سایت ها در دنیای طراحی سایت، ابزار های مختلفی برای زیبا سازی سایت ها به طراحان معرفی می شود. یکی از این ابزار ها پارالاکس می باشد، این ابزار در بین طراحان سایت از محبوبیت خاصی برخوردار است. شناخت تکنولوژی یا ابزار پارالاکس برای شما بسیار کاربردی خواهد بود که در این مقاله به طور کلی درباره Parallax صحبت کرده ایم.