+- انجمن تخصصی ایران سرور (https://forums.irserv.ir)
+-- انجمن: بخش طراحی سایت (https://forums.irserv.ir/Forum-%D8%A8%D8%AE%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA--8)
+--- انجمن: بخش طراحی و راه اندازی سایت (https://forums.irserv.ir/Forum-%D8%A8%D8%AE%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88-%D8%B1%D8%A7%D9%87-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA--28)
+---- انجمن: مباحث و منابع آموزشی ( طراحی سایت ها ) (https://forums.irserv.ir/Forum-%D9%85%D8%A8%D8%A7%D8%AD%D8%AB-%D9%88-%D9%85%D9%86%D8%A7%D8%A8%D8%B9-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%87%D8%A7--29)
+---- موضوع: در رابطه با پارالاکس بیشتر بدانیم! (/Thread-%D8%AF%D8%B1-%D8%B1%D8%A7%D8%A8%D8%B7%D9%87-%D8%A8%D8%A7-%D9%BE%D8%A7%D8%B1%D8%A7%D9%84%D8%A7%DA%A9%D8%B3-%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1-%D8%A8%D8%AF%D8%A7%D9%86%DB%8C%D9%85--1801)
در رابطه با پارالاکس بیشتر بدانیم! - mehranolomi - سه شنبه ۰۹ آذر ۱۳۹۵
با تکنولوژی پارالاکس آشنا شوید !
فکر میکنم تا به امروز عبارت ” پارالاکس ” رو در طراحی سایت زیاد شنیده باشید. در این مقاله قصد دارم در رابطه با پارالاکس و کاربردهای اون خدمتتون توضیحاتی رو ارائه بدم.
پس از روی کار اومدن تکنولوژی پارالاکس سئو تا مدتی اکثر افراد تصور می کردند که اگر لایه های موجود در صفحات سایت با اسکرول صفحه، ظاهر شوند پارالاکس محسوب میشه؛ در صورتی که این تصور کاملا اشتباه بود.
این تکنولوژی برای طراحی سایت بصورت single page یا one page روی کار اومد ، اما با گذشت زمان دیده شد که طراحان از این متد در طراحی های عادی هم استفاده کردند، البته در اصل در استاندارد طراحی مشکلی بوجود نمیاره چه بسا که زیبایی خاصی هم به صفحات میده.
حالا از این تعاریف بگذریم ، به این موضوع میرسیم که اصلا پارالاکس چی هست ؟!
در صفحات پارالاکسی ، با حرکت موس یا اسکرول صفحه ، روی عناصر موجود در صفحه افکتی اجرا میشه حالا این افکت میتونه جابجایی عناصر یا Blur شدن آنها باشه ( قصد دارم در قالب بعدی آرمانیک این افکت رو پیاده کنم ) یه نکته این بین هست که پارالاکس رو با افکت های دیگه متمایز میکنه اونم اینه که هر افکتی که با اسکرول و یا حرکت موس اجرا میشه با برگشت موس و یا اسکرول، افکت هم به همون حالت که اتفاق افتاده به حالت قبل برمیگرده و عنصر در حالت اولیه خودش قرار میگیره. در غیر این صورت با css animate هم می تونیم به راحتی ظاهر شدن عناصر در صفحه با اسکرول رو اجرا کنیم.
افکت دیگه ای که شما توی پارالاکس میتونید پیاده کنید این هست که ، با حرکت موس از راست به چپ یا چپ به راست میدان دید اصلیتون رو تغییر بدید و فراتر از میدان دیدتون عناصر و جزییات صفحه رو مشاهده کنید، به عبارتی شما میتونید صفحه ی وب رو بصورت ۱۸۰ درجه ببینید به نحوی که عناصر سر جای خودشون قرار دارن و شما میتونید عرض صفحه رو از سمت راست به چپ و بالعکس و فراتر از عرض ثابت صفحه مشاهده کنید.
برای درک بهتر این موضوع فرض کنید صفحه مانیتور شما ۱۰۲۴ پیکسل طراحی شده ، و صفحه وب شما با عرض ۱۳۶۶ پیکسل طراحی شده، شما صفحه ی وبتون رو در مرکز تصویر به اندازه ی همون ۱۰۲۴ پیکسل میبینید، حالا اگر در طراحی سایت از پارالاکس استفاده کنیم ، میتونیم با چرخاندن موس به سمت راست یا به سمت چپ عناصری که خارج از میدان دید شما در ۱۰۲۴ پیکسل هست رو نیز ببینید. با مشاهده ی تصویر زیر درک این توضیحات میتونه براتون بهتر باشه :
یکی دیگه از افکت های جذابی که توی پارالاکس پیاده میشه ، ترکیب چند لایه تصویر روی هم هست که هر لایه با حرکت موس یا اسکرول صفحه با سرعت خاصی اجرا میشه و یک افکت حرکتی زیبارو تشکیل میده.
در تصویر بالا اگر دقت کنید میبینید که چند لایه تصویر روی هم قرار گرفته و در نهایت در نگاه اول تصویر زیر رو به شما نمایش میده:
حالا با حرکت موس یا اسکرول صفحه هر لایه از این تصاویر با یک سرعت خاص و مشخص حرکت می کنند و یک تصویر متحرک بسیار زیبارو به شما نمایش میده، این حرکات به گونه ای هست که به شما احساس زنده بودن عناصر رو میده .
گاهی اوقات با ترکیب چند متد و تکنولوژی همراه با پارالاکس می تونید انیمیشن های زیبایی رو در صفحه ی وبتون خلق کنید و جذابیت صفحه رو چند برابر کنید.
برای پیاده سازی این تکنولوژی شما میتونید از پلاگین های موجود استفاده کنید ، یکی از پلاگین های پرکاربرد و محبوب parallax.js هست که در مقالات آتی نحوه ی کار با این پلاگین رو هم آموزش خواهیم داد.
موفق باشید...