میترا رحیمی

تاریخ انتشار: ۱۳۹۵-۰۳-۲۱

در رابطه با پارالاکس بیشتر بدانیم!

با تکنولوژی پارالاکس آشنا شوید !

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

پس از روی کار اومدن تکنولوژی پارالاکس تا مدتی اکثر افراد تصور می کردند که اگر لایه های موجود در صفحات سایت با اسکرول صفحه، ظاهر شوند پارالاکس محسوب میشه؛ در صورتی که این تصور کاملا اشتباه بود.

این تکنولوژی برای طراحی سایت بصورت  single page یا  one page روی کار اومد ، اما با گذشت زمان دیده شد که طراحان از این متد در طراحی های عادی هم استفاده کردند، البته در اصل در استاندارد طراحی مشکلی بوجود نمیاره چه بسا که زیبایی خاصی هم به صفحات میده.

حالا از این تعاریف بگذریم ، به این موضوع میرسیم که اصلا پارالاکس چی هست ؟!

در صفحات پارالاکسی ، با حرکت موس یا اسکرول صفحه ، روی عناصر موجود در صفحه افکتی اجرا میشه حالا این افکت میتونه جابجایی عناصر یا Blur شدن آنها باشه ( قصد دارم در قالب بعدی آرمانیک این افکت رو پیاده کنم ) یه نکته این بین هست که پارالاکس رو با افکت های دیگه متمایز میکنه اونم اینه که هر افکتی که با اسکرول و یا حرکت موس اجرا میشه با برگشت موس و یا اسکرول، افکت هم به همون حالت که اتفاق افتاده به حالت قبل برمیگرده و عنصر در حالت اولیه خودش قرار میگیره. در غیر این صورت با  css animate هم می تونیم به راحتی ظاهر شدن عناصر در صفحه با اسکرول رو اجرا کنیم.

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

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

parallax

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

parallax

در تصویر بالا اگر دقت کنید میبینید که چند لایه تصویر روی هم قرار گرفته و در نهایت در نگاه اول تصویر زیر رو به شما نمایش میده:

parallax

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

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

برای پیاده سازی این تکنولوژی شما میتونید از پلاگین های موجود استفاده کنید ، یکی از پلاگین های پرکاربرد و محبوب parallax.js هست که در مقالات آتی نحوه ی کار با این پلاگین رو هم آموزش خواهیم داد.

عضویت در خبرنامه سایت

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

به جمع 9475 کاربر ما بپیوندید.

ایمیل خود را وارد کنید
loading در حال ارسال اطلاعات...