امروز می‌خواهم با این مقاله و نمایش بهترین نمونه های parallax scrolling در سطح وب، شما را به معنای واقعی شگفت‌زده کنم! البته قبل از آن اجازه بدهید ابتدا ببینیم که پارالکس اسکرول چیست؟
parallax scrolling چیست؟
پارالکس روش جدیدی از طراحی سایت است که در آن، با اسکرول صفحه، انیمیشن‌ها و تصاویری نمایش داده می‌شود و عملا باعث ایجاد یک تجربه کاربری متفاوت و جدید برای کاربر خواهد شد! در ادامه و بعد از مشاهده نمونه های پارالاکس اسکرول، متوجه منظورم می‌شوید:
از آنجایی که قابلیت نمایش پارالکس اسکرول این وبسایت‌ها عملا در اینجا وجود ندارد، برای مشاهده هرکدام، روی لینک‌شان(تیتر هر کدام) کلیک کنید و سپس اسکرول کنید.
1_ Firewatch
به جرئت پارالکس اسکرول این وب سایت، یکی از حرفه‌ای‌ترین نمونه‌ها در نوع خودش است!
همانطور که در تصویر هم مشخص است، این اسکرول به نحوی طراحی شده که وقتی آن را به پایین می‌کشید، احساس بودن در منظره را القا کرده و عملا شما را به عمق محتوا می‌برد. نکته بعدی اینجاست که در ساخت این اسکرول، به هیچ عنوان زیاده‌روی نشده و بعد از اتمام این تصویر، دیگر بقیه محتوای سایت به‌شکل عادی و ساده نمایش داده می‌شود.
2_ Every Last Drop
راستش را بخواهید حدود ۴ سال پیش بود که این وب سایت را مشاهده کردم. آن روزها مثل الان تخصص خاصی در دنیای “طراحی رابط کاربری” نداشتم و عملا مشاهده چنین چیزی به شدت باعث شگفت‌زدگی‌ام شده بود. البته هنوز هم مشاهده این اسکرول پارالکس باعث می‌شود خلاقیتی که طراح UI آن داشته را به شدت تحسین کنم.
نکته بسیار جالبی که در طراحی این اسکرول وجود دارد، این است که عملا طراح، با این اسکرول اقدام به داستان‌سرایی کرده!
در واقع وقتی از بالا تا پایین این صفحه را اسکرول کنید، متوجه می‌شوید که در زندگی روزمره چقدر در حال مصرف آب هستیم و این دقیقا چیزی است که صاحبان سایت می‌خواهند به شما بفهمانند!
3_ The Boat
در توضیح طراحی قبلی، از این گفتم که طراحان به خوبی از داستان‌سرایی کمک گرفته‌اند. اما بعد از دیدن این اسکرول پارالکس، تازه با داستان‌سرایی واقعی آشنا شدم!
اگر وارد این وب سایت شوید، می‌بینید که مشاهده کامل داستانش ممکن است حتی بیشتر از ۱۰ دقیقه از زمان‌تان را بگیرد. اما در عین اینکه از تصاویر و افکت‌های جذابی در آن استفاده شده، ایده داستان هیجان‌انگیزش باعث می‌شود تمامی آن را مشاهده کنید. این داستان در ۶ فصل طراحی شده که همه آن با اسکرول کردن در صفحه اصلی به کاربر نمایش داده می‌شود. نکته جالب‌تر اینکه برای جذاب‌تر کردن فضا، در حین اسکرول، موزیک پس‌زمینه هم پخش می‌شود.
4_ BeerCamp
خب بالاخره باید در میان اینهمه نمونه و مثال جذاب، از یک نمونه عجیب هم رونمایی کنیم! پارالاکس اسکرولی که در این سایت استفاده شده، از نوع زوم است و اتفاقا اجرای آن کار سختی هم نیست. اگر دقت کنید در این سایت صرفا ۵ صفحه وجود دارد که با اسکرول کردن، به آنها رسیده و از آنها می‌گذرید.
۵. Marcin Dmoch
با خودم فکر می‌کنم اگر روزی قرار باشد از میان چند فریلنسر یا متخصص یکی را انتخاب کرده و با آنها همکاری کنم، احتمالا حتی نتوانم فکر رد کردن آن متخصصی که چنین سایت شخصی داشته باشد را به ذهنم راه بدهم!
به نظرم کم‌لطفی است اگر بخواهم این وب سایت را صرفا به عنوان یک نمونه پارالاکس اسکرول معرفی کنم! در واقع علاوه بر ایده خلاقانه طراح در ساخت اسکرول، در این وب سایت از انیمیشن‌های متحرک و تعاملی جذابی هم استفاده شده. اگر وارد آن شوید متوجه خواهید شد که هر کدام از تصاویر این صفحه با حرکت موس شما یک واکنش متفاوت نشان می‌دهند که خب این در نوع خودش، واقعا جذاب است.
6_ Anton & Irene
به نظرم کم‌لطفی است اگر بخواهم این وب سایت را صرفا به عنوان یک نمونه پارالاکس اسکرول معرفی کنم! در واقع علاوه بر ایده خلاقانه طراح در ساخت اسکرول، در این وب سایت از انیمیشن‌های متحرک و تعاملی جذابی هم استفاده شده. اگر وارد آن شوید متوجه خواهید شد که هر کدام از تصاویر این صفحه با حرکت موس شما یک واکنش متفاوت نشان می‌دهند که خب این در نوع خودش، واقعا جذاب است.
7_ Long Shot Features
خب، این نمونه هم از آن‌دسته اسکرول های پارالکسی دارد که می‌تواند مخاطبان را به شدت شگفت‌زده کند. همانطور که مشخص است، اسکرول این صفحه به جای عمودی، افقی است و خب همین موضوع باعث ایجاد یک تفاوت خاص شده. علاوه بر این، تصاویر و سبک طراحی UI این سایت باعث شده مخاطبان در آن تجربه‌ای تکرارنشدنی داشته باشند.
8_ Porschevolution
راستش اگر نظر من را بخواهید، اسکرولی که در این سایت استفاده شده، از نوع بسیار ساده‌ای است و اتفاقا همین حالا در خیلی از قالب‌های آماده وردپرسی هم نمونه‌هایش را پیدا می‌کنید. اما چیزی که به این سایت تمایز بخشیده، داستان‌سرایی خاص و متفاوتی است که دارد! همانطور که مشاهده می‌کنید، با هر اسکرول، تصویر یک خودرو جدید و داستان پشت آن به شما نمایش داده می‌شود.
9_ Feed Music
اگر وارد این سایت شوید و با آن کار کنید، اصلا متوجه نمی‌شوید که در حال اسکرول صفحه هستید. چراکه ترکیب تصاویرش آنقدر خاص و طبیعی انجام می‌شود که انگار همین حالا روی صفحه یک ویدیو در حال پخش است.
10_ Melanie Daveid
به نظر من چیزی که باعث ایجاد جذابیت در این نمونه پارالکس اسکرول شده، تفاوت در نمایش است! همانطور که مشخص است، در هر سمت اسکرول، یک قسمت از صفحه تکان خورده و در انتها، اسکرول شما ختم به ایجاد یک تصویر کامل می‌شود و همه اینها در کنار هم یک طرح جذاب را ساخته.
کلام آخر
خب به انتهای مقاله رسیدیم. در این مقاله شما را با پارالکس اسکرول آشنا کرده و ۱۰ نمونه جذابش را هم در اختیارتان گذاشتم. در آخر اگر سوال و نظری دارید در بخش نظرات منتظر شما هستم.
منبع:
