همه چیز درباره طراحی پارالاکس
همه چیز درباره طراحی پارالاکس

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

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

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

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

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

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

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

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

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

 

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

پارالاکس (Parallax)  در لغت به معنای اختلاف منظر است ولی در طراحی وب به معنی تکنیک‌های پیمایش در صفحه برای عمق بخشی به وب سایت است.تکنیک پارالاکس بر پایه استفاده از کدهای HTML5 و CSS3 و Jquery است و از میان شیوه‌های طراحی وب، به جرئت می توان گفت پارالاکس (Parallax)  یکی از قدرتمندترین و شگفت‌انگیزترین شیوه های طراحی است و در یک سال اخیر نمونه‌های متعددی از این طراحی را دیده‌ایم.

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

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

 

از میان تمام شیوه‌های طراحی وب، بعد از دوران طلایی وب ۲، به جرئت میتوان گفت “پارالاکس” یکی از قدرتمندترین و شگفت‌انگیزترین گرایش‌ها بوده است.

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

در یک سال اخیر ما نمونه‌های متعددی از طراحی پارلاکس را دیده‌ایم.

اما سؤال اینجاست که این طراحی، یک طراحی مانا خواهد بود؟ آیا هم‌رده گرایش‌هایی مثل طراحی فلت یا ریسپانسیو است؟

نظر شخصی من این است که طراحی پارالاکس کاربرد محدودی دارد.

طراحی پارالاکس برای ساختن یک سایت مناسبتی یا سایت یک رویداد خیلی مناسب است. مثلا تصور کنید که می‌خواهید برای روز کتابخوانی، سایتی درست کنید یا دهمین سال تأسیس شرکت خود را جشن بگیرید، در این صورت طراحی پارالاکس مناسب است.

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

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

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

یایید به سایت Sony Discover برویم. در اینجا طراح به خوبی توانسته پیچیده بودن روند طراحی صنعتی و آمیخته بودن مهندسی و هنر را با یک طراحی پارالکس به ما نشان بدهد.

sony

توصیه می‌کنم حتی اگر حوصله خواندن پست‌های اینچنینی را ندارید، از این سایت بازدید کنید، چون حتما برایتان سرگرم‌کننده خواهد بود.

این سایت Sam خیلی بامزه طراحی شده است!

سایت Hydraulic باز با خلاقیت طراحی شده است. Cycle Moon  هم!

lazy

سایت To Young To Wed طراحی ساده‌تری دارد، اما به خوبی توانسته با طراحی پارالاکس، توجه مخاطب‌ها را جلب کند. اگر شما هم دوست دارید مفهوم و مقصودی را به صورت تأثیرگذار بیان کنید، شاید طراحی پارالاکس برایتان مفید باشد.

young

حالا یک نمونه طراحی پارالاکس بد، در این سایت با اسکرول عمودی به صورت افقی جابجا می‌شوید و این به اعتقاد من یعنی ایجاد سرگیجه برای کاربر!

نمونه‌ای از طراحی پارالاکس غیرضروری (+). به نظر من که اصلا لازم نبود این سایت پارالاکس طراحی می‌شد.

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

در انتها نگاهی بیندازید به طراحی زیبا سایت لکسوس.

lexus

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

گردآوری و تالیف: ایده ساز

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *