سوال ها و دغدغه های بسیاری حول محور طراحی پارالکس و اینکه چگونه روی وب کار می کند وجود دارد. سخن کلی این است که طراحی پارالکس استفاده کردن از حرکت‌ها برای ساخت یک توهم در عمق صفحه است.
این موضوع می تواند مربوط به تغییرات پس زمینه یا موقعیت ثابت مکانی برخی از المان ها همزمان با اسکرول کردن کاربر باشد. در اینترنت مطمئنا می توانید چنین سایت هایی را مشاهده کنید. برای مثال می توانید به وبسایت Erős Balázs یا وبسایت Cyclemon مراجعه کنید.
برای این مجموعه من ده مورد از قطعه کدهای مورد علاقه خود را که در زمینه طراحی پارالکس است به شما پیشنهاد می‌کنم. می توانید آن ها را به صورت رایگان دریافت کنید و در وبسایت یا پروژه خود نیز مورد استفاده قرار دهید.
۱. The Great Fall
The Great Fall توسط CJ Gammon طراحی شده است. این قطعه کد یکی از منحصر به فردترین رابط های کاربری است که تا به حال پیدا کرده‌ام.
در این طرح از یک اسکریپت برای ایجاد حالت آبشاری استفاده شده که به نظر می آید هیچوقت خاتمه پیدا نمی کند. طراحی این قطعه کد از المان Canvas درست شده و توسط جاوااسکریپت نیز کنترل می شود. بنابراین نصب و کار با آن نیازمند دانش تکنیکی خوبی است.
در این طرح می توانید اطلاعات را در جعبه های زیبایی مشاهده کنید، این جلوه فوق العاده زیبا و جذاب است. از طرفی دیگر با تنها دانستن میزان کمی جاوااسکریپت به سادگی می توانید افکت را کنترل کنید و آن را تغییر دهید.
در کل برای بخش هایی، این قطعه کد برای توسعه وب مدرن چالش جالبی است. با یادگیری المنت Canvas می توانید کنترل کاملی روی پروژه‌تان داشته باشید.
۲. CSS Scrolling Parallax
در این مورد شما می توانید رویکرد پس زمینه ثابت و بزرگی را روی صفحه مشاهده کنید.
وقتی شما اسکرول می‌کنید با صفحات مختلفی روبرو می شود که همگی روی پس زمینه سوار می شوند. این کار باعث می شود توهم عمق به وجود بیاید، این حالت یکی از کلیدی‌ترین المنت ها برای طراحی پارالکس است.
توسعه دهنده‌ی این قطعه کد Sebastian Schepis به صورت خالص از سی‌اس‌اس استفاده کرده است و این موضوعی کاملا ساده است. فکر می کنم که هر فردی بتواند با کمی کار روی این مورد تغییرات مورد علاقه‌اش را اعمال کند. البته طراحی پس زمینه ممکن است کمی سخت‌تر باشد.
۳. Simple Image Tag Parallax
معمولا طراحی پارالکس را با چند تصویر پس زمینه کامل صفحه می‌بینید. این حالت معمولا در وبسایت شرکت ها و استارتاپ ها دیده می شود که معمولا از یک سرعت خاص برای اسکرول کردن بین تصاویر مختلف استفاده می کنند.
توسعه دهنده Renan Breno در این قطعه کد از سرعت های مختلفی برای گذشتن از تصاویر استفاده کرده است.
تفاوت چندانی در سرعت بین میزان زمانی که شما اسکرول می کنید و اینکه تصویر چقدر بزرگ است وجود ندارد. می‌توانید متوجه شوید که در حالت عادی وقتی اسکرول می کنید تصاویر به چه سرعتی از پس زمینه می‌گذرند. این مورد یک جلوه پارالکس واقعا زیرکانه است، این لایه بندی همچنان به شما می تواند سرعت انیمیشن ها در عمل را نشان دهد.
۴. #Maincode Hackdays
استفاده کردن از تصاویر پس زمینه ثابت راه بسیار معقولی برای تقسیم کردن برگه ها و جدای سازی محتوای وبسایت از همدیگر است. در این قطعه کد می‌توانید چنین حالتی را مشاهده کنید.
وقتی شما در این طرح اسکرول می کنید، احساس می کنید که قسمت های حاوی محتوا از پس زمینه «بلندتر» هستند. در این طراحی وقتی عمل اسکرول را انجام میدهید می توانید به خوبی جلوه پارالکس آن را مشاهده کنید.
در استفاده از این طرح سعی کنید که دقیقا از همان لایه بندی پیشفرض استفاده نکنید، به این دلیل که فکر می‌کنم بخش محتوا بسیار کوچک‌تر و لاغر‌تر نسبت به صفحه است. از طرف دیگر می توانید از پس زمینه های مختلف برای بخش های مختلف محتوای صفحه استفاده کنید، که طرح‌تان جذاب تر شود.
۵. CSS Parallax
این قطعه کد توسط Paulo Cunha طراحی شده است. این طرح یک مثال یونیک و منحصر به فرد را از اینکه جلوه پارالکس چگونه کار می کند را نشان می دهد.
تمام محتوای داخل این طرح زیر یک تصویر بزرگ قرار گرفته‌اند که با اسکرول کاربر رفته رفته تصویر نیز محو می شود. همچنین در این طرح برای تصاویر از موقعیت ثابت آن ها نیز استفاده شده است.
در این طرح می‌توانید از همین جلوه انیمیشنی همراه با لایه بندی طولانی محتوا نیز استفاده کنید. به نظرم این طرح برای پست های وبلاگی که تصویر شاخصی بزرگی دارند انتخاب بسیار مناسبی باشد. همچنین برای صفحات فرودی که می‌خواهید با یک تصویر بزرگ نظر کاربر را به خود جلب کنید بسیار کاربردی است.
۶. Parallax Design
این مورد یکی از جذاب ترین و ساده ترین طراحی پارالکس است که توسط Katie Rogers درست شده است. در این طراحی همزمان با اسکرول کردن شما محتوای وبسایت نیز تغییر کرده و تصویر مربوط به پس زمینه نیز عوض می شود. هر چیزی که در این طراحی مشاهده می‌کنید براساس سی‌اس‌اس نوشته شده است. تمام تصاویر پس زمینه‌ای که مشاهده می کنید نیز دارای یک موقعیت مکانی ثابت هستند.
هر کدام از جعبه های محتوایی قرار گرفته در این طرح یک سایه روی پس زمینه می اندازند که باعث ایجاد توهم عمق در کاربر می شود. استفاده از این طرح برای صفحات تک لایه بسیار مناسب و ایده آل است.
۷. Scrolling Background-Image Parallax
قبلا اشاره کردم که سرعت اسکرول به چه میزان می تواند مبتنی بر نرخ تغییر موقعیت پس زمینه باشد. خب این مورد در حقیقت در عمل به شما این واقعیت را نشان می دهد.
برای مشاهده این حالت نیاز است که اسکرول کنید، در بخش های مختلف می توانید متوجه شوید که اسکرول شما چه تاثیری روی بخش های مختلف دارد. برای بیشتر لمس کردن این واقعیت پیشنهاد می کنم از نوار اسکرول کنار پنجره مرورگر استفاده کنید.
هیچکدام از این طراحی ها ظاهر یا جلوه غلطی از طراحی پارالکس را نشان نمی دهند. آن ها تنها متدهای مختلفی را ایجاد کرده اند که در یک صفحه با آن ها می توانید در صفحه حرکت کنید، این نمونه کد راه بسیار خوبی برای متوجه شدن از این قضیه است.
۸. Starry Background
اگرچه این طرح مستقیما برای طراحی پارالکس مربوط نمی شود اما می تواند یک جایگزین برای طراحی پارالکس باشد. در این طرح از یک پس زمینه پارالکس استفاده می شود که به صورت بی پایان ستاره ها را نشان می دهد. شما می توانید روی این پس زمینه متنی بنویسید، پس زمینه بگونه‌ای طراحی شده است که در اولین نگاه توهم عمق را برای کاربر درست می کند. این طرح تنها با استفاده از سی‌اس‌اس درست شده است.
تمام انیمیشن های قرار گرفته شده از طریق سی‌اس‌اس اجرا می شوند اما در این طرح از Sass و Compass نیز استفاده شده. پس یادگیری این موارد قبل از ویرایش این طرح می تواند به شما کمک زیادی بکند.
البته شاید بخواهید تنها از لایه بندی کلی این طرح استفاده کنید، پس نیازی به ویرایش نخواهید داشت، تنها یک کپی/پیست کردن کافی است. CodePen به شما اجازه می دهد تنها با یک کلیک ساده تمام کدهای نوشته شده در Sass را به سی‌اس‌اس تبدیل کنید، پس مشکلی با این مسئله نخواهید داشت.
۹. Canvas Parallax Skyline
بعضی وقت ها طراحی پارالکس همراه با جابجایی های ماوس نیز اتفاق می افتد و با آن همراه می شود. این قطعه کد یک طرح ساخته شده با المان Canvas است که یک صفحه بی پایان را نشان می‌دهد که از حرکت های ماوس پیروی می کند.
وقتی شما موقیت موس را تغییر میدهید، سرعت انیمیشن تغییر می کند، اما حالت نمایشی همان حالت قبل خواهد بود و عناصر مانند قبل خواهد بود.
مطمئنا ساختن چنین انیمیشنی به کمک جاوا اسکریپت خواهد بود به این دلیل که ایده کاملا پیچیده ای است. البته این طرح حالتی است که نمی توانید در هر وبسایتی مشاهده کنید، پس کمتر پیش می آید که از چنین طرحی استفاده کنید. اما در کل این طراحی پارالکس واقعا جذاب و زیبا است.
۱۰. Hover Parallax
یکی دیگر از قطعه کدهایی که براساس واکنش حرکت ماوس درست شده است این طرح است. این قطعه کد کاملا حالت پارالکس متفاوتی را ارائه می دهد. در این حالت بجای ایجاد کردن عمق با استفاده از محتوا، شما با استفاده از تصاویر و حرکت ها می توانید عمق را ایجاد کنید.
هرکدام از مواردی که شما در این طرح مشاهده می کنید یک (لایه) جداگانه در HTML دارد. همچنان که شما موس‌تان را تکان میدهید شکل این خواهد گرفت که تصاویر همپوشانی می کنند.
این کد براساس جاوااسکریپت نوشته شده و از افکت های جذاب مبتنی بر وب درست شده است. امکان دارد بخواهید که از این طرح در یک بنر یا قسمت سربرگ استفاده کنید.
۱۱. Broken Glass Filter
قبلا هم این طراحی را در وبسایت دیگری مشاهده کرده بودم، این طراحی کمی عجیب و غریب به نظر می آید. broken glass filter به شما این توهم را می دهد انگار که تصویر پس زمینه به چند قسمت تقسیم شده است. درست مانند این است که تصویر یک شیشه باشد که به چند قسمت مختلف خورد شده است و طراحی سعی در جمع کردن آن ها دارد.
می توانید با استفاده از سی‌اس‌اس افکت و جلوه های داخل این کد را تغییر دهید. در نهایت این طرح نیز یک حالت عالی برای ایجاد عمق و حرکت با اسکرول کردن است.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید