خبرنامه
با عضویت در خبرنامه میتوانید آخرین اسکریپــت ها و قالب ها را در ایمیل خود دریافت کنید

برای عضویت در خبرنامه پیامکی، اطلاعات خود را وارد کنید

اطلاعات مطلب

نویسنده : Mehrdad Mohammadi
تاریخ ارسال : 19 ژوئن 2015 در 4:16 ب.ظ
تعداد دیدگاه : بدون ديدگاه
دسته بندی
آمار بازدید
  • 846
  • 1,226
  • 929,976
  • 726
  • 108
  • 229
  • 90
  • 0
  • ژوئن 19, 2017
دکووب را دنبال کنید

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

پارالاکس چیستReviewed by مهرداد محمدی on Jun 19Rating:
[تعداد: 0    میانگین: 0/5]

paralax

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

پارالاکس یک تکنولوژی جدید در زمینه وب هست که اخیرا در وب ایران هم رواج پیدا کرده . در این سایت ها که معمولا تک صفحه ای یا single page هستند ، با اسکرول صفحه و یا حرکت موس یک افکت توی صفحه و روی عناصر صفحه اتفاق میوفته. مثلا پس زمینه blur و یا جابجا میشه ، تصاویر و نوشته ها حرکت می کنند ، بعضی از عناصر و المنت ها با افکت توی صفحه ظاهر می شوند و … . دقت داشته باشید که هر افکتی که با اسکرول و یا حرکت موس اجرا میشه با برگشت موس و یا برگشت اسکرول افکت هم به همون حالت که اتفاق افتاده به حالت قبل برمیگرده و عنصر در حالت اولیه خودش قرار میگیره.

افکت دیگه ای که ممکنه توی پارالاکس پیاده بشه این هست که شما با حرکت موس از سمت راست صفحه به سمت چپ (یا بالعکس) میتونید میدان دیدتون رو گسترش بدید و از عرضی که در مانیتور مشاهده میکنید فراتر برید و به عبارتی منظره رو بصورت ۱۸۰ درجه ببینید، به نحوی که عناصر و اجزای صفحه سر جای خودشون قرار دارن و شما میتونید عرض صفحه رو از سمت راست به چپ و از سمت چپ به راست و فراتر از عرض ثابت صفحه مشاهده کنید.

مثل این هست که شما یه دوربین دستتون گرفتید و در حال مشاهده ی یک منظره هستید. زمانی که شما دوربین رو به راست یا چپ میچرخونید ، درختان و اجزای طبیعت سرجای خودشون هستند ولی شما میدان دیدتون رو حرکت میدید و زوایایی که بطور مستقیم تو میدان دیدتون نیست رو با چرخاندن دوربین به راست و چپ میتونید ببینید.

یا مثلا مانیتور شما ۱۰۲۴ پیکسل هست و عرض صفحه وبتون ۱۳۶۶ پیکسل طراحی شده ، اما شما تصویر صفحه وبتون رو از مرکز تصویر به اندازه ی همون ۱۰۲۴ پیکسل میبینید ، حالا اگر پارالاکس رو به اینصورت تو صفحه اجرا کنید ، شما می تونید با کشیدن موس از سمت چپ و راست ، گوشه ی سمت راست و چپ اضافی صفحه تون رو که پنهان بود طی کنید و ببینید.

پارالاکس

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

پارالاکس

گاهی اوقات شما حتی میتونید با ترکیب برخی تکنولوژی ها با پارالاکس یک انیمیشن هم برای وبتون طراحی کنید. در مجموع این تکنولوژی در حال حاضر بین کاربرای ایرانی محبوبیت خاصی کسب کرده.

 

چگونه یک سایت پارالاکس طراحی کنیم؟

طراح گرافیک سایت های پارالاکس باید تا حدودی با سایت های پارالاکسی آشنا باشه تا بتونه بصورت استاندارد پروژه رو طراحی کنه و برنامه نویس هم بتونه اون طرح رو با تکنولوژی پارالاکس به درستی پیاده کنه.

برای پیاده سازی این تکنولوژی چندین پلاگین وجود داره مثل parallax.js که شما میتونید استفاده کنید. در نسخه ی هفتم ماهنامه یک پروژه ی پارالاکس رو باهم قدم به قدم انجام میدیم و یک وب سایت single page پارالاکسی ایجاد میکنیم.

نظر خود را به اشتراک بگذارید