آموزش پارالاکس
آموزش پارالاکس
آموزش پارالاکس

آموزش طراحی پارالاکس (Parallax) در طراحی وب

بسیاری از شما بازی Angry Birds رو بازی کرده‌اید ، و حتما متوجه شدید در مراحل اجزا با فاصله های مختلف از شما قرار دارند.

parallax websites

آموزش طراحی پارالاکس (Parallax) در طراحی وب parallax websites

اما میدانیم که این بازی یک بازی دو بعدی بوده و عمق تصویری وجود ندارد. پس راز این انتقال حس فاصله در اشیاء هم سطح صفحه نمایش در چیست؟؟؟ نام این تکنیک پارالاکس اسکرولینگ (به پارسی میتوان گفت پیمایش تطبیقی یا پیمایش منطبق یا شایدم پیمایش با اختلاف رویت از دید ناظر!) می‌باشد که با سرعت حرکت متفاوت قسمت‌های مختلف به شما این حس را القا می‌کند که اشیاء نسبت به شما فاصله های مختلفی دارند. مثل خیلی از تکنیک‌های علمی دیگر ، منشأ این تکنیک هم چیزی جز طبیعت نیست. اگر شما داخل قطار باشید و از کنار یک دشت عبور کنید ، بوته های کنار ریل با سرعت زیاد و بوته های دور تر با سرعت کمتر حرکت می‌کنند و دورترین چیزی که شما میبینید (مثل کوه) یا ثابت به نظر می‌رسند و یا حرکت خیلی آهسته ای دارند. تکنیک پارالاکس اسکرولینگ سعی در شبیه سازی همین موقعیت را دارد و در بازی‌های دو بعدی استفاده می‌شود.

parallax scrolling mario

آموزش طراحی پارالاکس (Parallax) در طراحی وب parallax scrolling mario[/caption

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

parallax websites

آموزش طراحی پارالاکس (Parallax) در طراحی وب parallax websites

parallax websites

آشنایی کافی با html5 ، css3 و jQuery پیش نیاز های این آموزش هستند.اگر هنوز با jQuery آشنا نشده اید میتوانید از مجموعه آموزشی jQuery ما استفاده کنید آموزش jQuery – قسمت اولیکی از قابلیت‌هایی که همراه با HTML5 وارد میدان شد امکان ذخیره یا store کردن اطلاعات در لا بلای کد های html بود. این قابلیت کمک بسیاری در خلق سایت‌های پارالاکس اسکرول است و اکثر سایت‌های خوش ساخت از این روش استفاده کرده‌اند ( برای ایجاد سایتی با تکنیک پارالاکس اسکرولینگ لزومی در استفاده از این روش‌ها نیست، بلکه شاید اصولی‌ترین و ارف ترین روش‌ها باشد ، البته تا به امروز!) برای استفاده از این قابلیت ، باید از اتریبیوت data-[name]=yourdata استفاده کنید. به این صورت که قسمت [name] را می‌توانید هر اسمی که می‌خواهید انتخاب کنید و yourdata هم قسمتی است که کاربر داده‌ی مورد نظرش که می‌خواهد استفاده کند را وارد می‌کند. مثلاً در پروژه‌ای که ما ایجاد خواهیم کرد این مقادیر به این صورت قید شده‌اند “data-speed = 5″ به طور کلی هر اتریبیوتی که با “data-” شروع شود ، به عنوان مکانی برای ذخیره داده استفاده می‌شود که از دید کاربر پنهان است (البته در سورس کد قابل مشاهده است) و بروی اجزای دیگر کد تاثیر نمی‌گذارد. همچنین شما می‌توانید بیش از یک اتریبیوت data را داخل یک تگ جای دهید. در طراحی سایت با این روش ، شما می‌خواهید سایتی با صفحات مجزا را به یک صفحه واحد اما قسمت بندی شده تبدیل کنید، پس هر قسمت در اصل نماینده یک صفحه از سایت شما است. وظیفه این قسمت بندی بر عهده تگی نیست جز تگ section !. مطمئناً اگر با وظیفه رسمی این تگ آشنا باشید از این انتخاب تعجب نخواهید کرد. سایت ما دارای ۳ قسمت کلی است پس به ۳ تگ section نیاز داریم:

اتریبیوت data-speed سرعت اسکرول کردن این المنت را مشخص میکند. (یادآوری: در پارالاکس اسکرولینگ سرعت حرکت اجزا متفاوت است ، با کنترل سرعت اسکرول اجزا سایت ، سرعت حرکت را شبیه سازی می‌کنیم) در صنعت بازی سازی دو بعدی ، به طور کلی اجزای داخل یک مرحله به دو دسته تقسیم می‌شوند. یکی background و دیگری sprite. نقش نوع background که کاملاً از نامش مشخص است ، sprite ها عبارت اند از هر شئ مستقل در محیط بازی، از خود پلیر گرفته تا درخت ، تیر ، ابر و … از این تعاریف در ایجاد سایت خود استفاده می‌کنیم. data-background بیان می‌کند که نوع این المنت پس زمینه است ، و نسبت به آن عملیات خاصی را در کد jquery انجام خواهیم داد. به یا داشته باشید این دو اتریبیوت به تنهایی کار خاصی انجام نمی‌دهند، بلکه تنها این مقادیر را برای ما حفظ می‌کنند تا در کد jquery از آن‌ها استفاده کنیم. برای اجزاء داخل هر section کد html خود رو به این گونه کامل می‌کنیم:

با لینک کردن فایل‌های اسکریپت ، جی کوئری و استایل به فایل html کار ما با این فایل به اتمام خواهد رسید! نوبت به فایل style.css می‌رسد ، در اولین گام برای حذف حاشیه های پیش‌فرض مرورگر این کد را وارد می‌کنیم.

سپس این موارد را به تمام section ها اختصاص می‌دهیم

می‌بینید که ارتفاع هر section برابر با ۱۰۰۰ است ، در اکثر سایت‌ها این مقدار برابر با کمی بیشتر از ارتفاع خود صفحه نمایش قرار می‌گیرد و با گزینه های منو ، صفحه به اندازه مشخص اسکرول می‌شود. اما در مواردی خاص مثل سایت‌های داستانی (که در انتهای پست تعدادی نمونه ذکر شده) این مقدار بیشتر بوده و دارای اجزا (اسپریت) زیادی خواهد بود! نوبت به درج عکس‌های مربوط به پس زمینه هر section می‌رسد

پس زمینه‌ها همه fixed در نظر می‌گیریم و به صورت دستی position آن‌ها را تغییر می‌دهیم لوگوی سایت را به عنوان background تگ article اولین section قرار می‌دهیم

و ویژگی‌های زیر را به تمام article ها اعمال می‌کنیم

حال می‌رسیم به اصل ماجرا ، یعنی ایجاد حالت پارالاکس به کمک jquery در اولین قدم مقادیری که برای خود ذخیره کردیم را بازخوانی می‌کنیم

آبجکت window را ذخیره می‌کنیم که در ادامه بتوانیم مقدار scroll را بدست آوریم.معنی ۲ خط بعدی این‌گونه است:” به ازاء هر المنتی که دارای اتریبیوت data-type است (خط۱) ، مقدار اتریبیوت data-speed آن را در فیلد speed همان المنت بریز(خط۲) ! ” با این کار مقدار مورد نظر را از ماهیتی DOM گونه به ماهیتی JQeury تبار منتقل می‌کنیم تا در آینده بتوانیم به آن دسترسی داشته باشیم. به عبارت دیگر بجای اینکه مقدار مورد نظر ما قسمتی از کد html باشد ، به یک فیلدی از یک شئ در jquery تبدیل می‌شود. پس می‌توان به راحتی به آن دسترسی داشت. ادامه کد به این صورت است

معنی خط اول: “به ازاء هر المنت section که دارای اتریبیوت data-type است و مقدار آن برابر background است ، کار های زیر را انجام بده” در خط دوم المنت مورد نظر را در متغیر $self ذخیره می‌کنیم که در اصل یک شیء به حساب می‌آید. خط سوم event اسکرول کردن window رو فراخوانی می‌کنیم و به برنامه اعلام می‌کنیم زمانی که کاربر اسکرول کرد کارهای مورد نظر را انجام دهد. خط چهارم position پس زمینه را مشخص می‌کند(می‌توان در مثال تصویر خارج از قطار این حالت را به عنوان کوه‌ها و دورترین شیء در نظر گرفت) و پس از ذخیره میزان حرکت ، آن را برای ارسال به css آماده می‌کنیم که وظیفه آن بر عهده coords است. مثلا اگر yPos برابر -۲۰ باشد ، رشته ای که داخل coords ذخیره خواهد شد برابر “۵۰% ۲۰px” خواهد بود. ۵۰% وظیفه آن را دارد که عکس را از نظر عرض در وسط قرار دهد.(اگر این مقدار را از coords حذف کنید اثر جالبی خلق می‌شود و پس زمینه حرکتی عرضی خواهد داشت!)

منفی بودن yPos به این دلیل است که می‌خواهیم عکس پس زمینه را به بالا هدایت کنیم که کاربر تصور کند تصویر دارد اسکرول می‌شود اما با سرعت کم! رشته ایجاد شده را به پراپرتی background-position المنت مورد نظر که در $self ذخیره شده اختصاص می‌دهیم. برای جلوگیری از عدم شناسایی تگ های section و article در IE های قدیمی میتوان از این کد استفاده نمود

همچنین زمانی که سایت را در IE باز میکنید بسته به تنظیمات امنیتی احتمالا اسکریپت را بلاک کند و شما باید اجازه اجرای اسکریپت را بدهید. در نهایت کد javascript ما به این شکل خواهد بود

حال سایت شما آماده اجرا می باشد. امیدوارم از این آموزش لذت برده باشید. در آموزش بعدی و احتمالاً به صورت ویدیویی ایجاد و استفاده از sprite ها را آموزش خواهیم داد و سایت کامل‌تری ایجاد خواهیم نمود.

نمونه های درخشانی از سایت هایی که از این تکنیک استفاده کرده اند را میتوانید در لینک های زیر مشاهده کنید:

Biamar

Lois Jeans

Range Rover Victoria Beckham

Honda CR-V

Krystalrae

Madwellnyc

Wildlife.la – Let’s get Wild

منبع: cgtv.ir

Mohammad Pishdar

I have B.A. in Software Engineering and I'M a professional programmer of WordPress software

یک پاسخ

  1. designer گفت:

    کاش فید rss داشت سایتتون!!

دیدگاهتان را بنویسید

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