آموزش طراحی وب‌سایت پارالاکس Parallax

آموزش طراحی وب‌سایت پارالاکس Parallax

How to build a parallax website

چگونگی طراحی وب سایت بصورت پارالاکس

 

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

 

مراحل طراحی یک وب سایت پارالاکس

 

ایده اصلی (Basic Idea):

روش معمول برای ایجاد وب سایت های پارالاکس، استفاده از پلاگین های جاوااسکریپت مانند Scrollr و scrollMagic و Parallax.js و scrollReveal.js و… ما در این مقاله، از پلاگین Scrollr استفاده خواهیم کرد. به این دلیل که پلاگین محبوب تری نسبت به سایر پلاگین ها می باشد و نیز نمایش مناسبی در دستگاه های موبایل دارد (Mobile Friendly)

به منظور استفاده از پلاگین Scrollr فقط کافیست پس از دانلود سورس پلاگین Scrollr ، کتابخانه های آنرا به صفحه HTML خود اضافه کنید و برای راه اندازی اولیه آن، قطعه کد زیر را تعریف کنید:

<script src="assets/skrollr.min.js"></script>

<script>

    skrollr.init();

</script>

 

دستور skrollr.init() پلاگین Scrollr را برای تمام المان های موجود در صفحه وب، فعال خواهد کرد. پلاگین Scrollr کتابخانه ای قدرتمند می باشد که می تواند انواع افکت ها و انیمیشن های جذاب اسکرول را وب سایت شما اعمال کند.

اگر می خواهید نحوه ایجاد یک وب سایت پارالاکس و زیبا را یاد بگیرید، به ادامه مقاله توجه فرمائید.

 

معرفی پلاگین Scrollr:

بعد از اینکه پلاگین Scrollr را به صفحه وب سایت خود افزودید، برای المان هایی از صفحه که می خواهید در هنگام اسکرول انیمیشن داشته باشند، اتریبیوت data (بصورت زیر) تعریف می کنیم. مثال زیر، یک نمونه ابتدایی و پایه از این افکت می باشد که بهنگام اسکرول، رنگ پس زمینه div را از آبی به قرمز تغییر می دهد.

<div data-bottom-top="background-color: rgb(255,0,0);"

data-center-center="background-color: rgb(0,0,255);"></div>

 

در قطعه کد فوق، دو اتریبیوت data مشاهده می کنیم که اتریبیوت اول بیانگر وضعیت ابتدایی المان div قبل از اسکرول می باشد و اتریبیوت دوم بیان کننده وضعیت نهایی المان بهنگام پایان عملیات اسکرول می باشد. همانطور که متوجه شده اید، خود انیمیشن توسط دستورات css اتفاق میوفتد. نکته قابل توجه اینست که رنگ ها را باید به فرمت rgb تعریف کنید تا انیمیشن بدرستی کار کند. در مقال فوق، رنگ پس زمینه div بهنگام اسکرول کاربر، به نرمی و بتدریج از رنگ آبی به قرمز تغییر می کند.

توسط این دو اتریبیوت data ، قادر خواهید بود انیمیشن ها و افکت های جذاب زیادی را ایجاد کنید. در بخش های زیر، شما را با برخی از افکت ها و انیمیشن های اسکرول آشنا خواهیم کرد.

 

 

بخش‌های مختلف یک قالب پارالاکس

 

۱- مقدمه پارالاکس (Parallax Intro):

پارالاکس محبوب ترین انیمیشن اسکرول در این روزها محسوب می شود. وب سایت های دارای انیمیشن پارالاکس، از چندین بخش تشکیل شده است که هر بخش دارای تصویر پس زمینه و یا رنگ مجزا می باشند که تمام صفحه (Full-Width) هستند. پارالاکس مفهومی عجیب غریبی نیست! معمولا یک تصویر است که در wrapper تمام صفحه نمایش داده می شود و با سرعت متفاوتی نسبت به اسکرول کاربر، حرکت می کند.

 

مقدمه پارالاکس (Parallax Intro)

 

۲- متن صفحه (Body Text):

در این بخش، سه پاراگراف داریم که بصورت خطی افقی (inline) در کنار یکدیگر قرار گرفته اند و با انیمیشن خاصی، با اسکرول کاربر، یکی بعد از دیگری ظاهر می شود:

 

متن صفحه (Body Text)

 

۳- لیست ویژگی ها (Features List):

در این بخش، قابلیت های محصول موردنظرمان را لیست می کنیم. در وب سایت دموی این مقاله، سه ویژگی (Feature) را بیان کرده ایم. هر آیتم دارای یک آیکون بزرگ و یک متن کوتاه می باشد. هر آیتم را می توانید با انیمیشن خاصی به کاربر نمایش دهید. افکتی که ما در این وب سایت در نظر گرفتیم اینست که هر ویژگی از یک سمت از صفحه وارد می شود و در بخش موردنظر (Feature Section) می ایستد.

 

لیست ویژگی ها (Feature List)

 

۴- درباره ما (About us):

بخش درباره ما در این وب سایت، از ۶ آیکون آواتار (Avatar) تشکیل شده است که در دو سطر و سه ستون چیدمان شده اند. آواتارهای واقع در سطر اول، بصورت چرخش ۳۶۰ درجه ای (جهت حرکت عقربه های ساعت-clockwise) بهنگام اسکرول کاربر نمایش داده می شوند و آیکون های سطر دوم، با انیمیشن flip افقی وارد صفحه خواهند شد.

 

درباره ما (About us)

 

۵- گالری (Gallery):

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

 

گالری (Gallery)

 

۶- فوتر (Footer):

برای بخش فوتر این وب سایت، طراحی ساده ای را در نظر گرفته ایم. تنها افکتی که این بخش دارد اینست که با اسکرول کاربر، باکس جستجو (Search box) توسط افکت transition بزرگتر می شود.

 

فوتر (Footer)

 

امیدوارم از این آموزش استفاده کافی را برده باشید. پلاگین Scrollr داکیومنت مفصلی دارد که می توانید با مراجعه به وب سایت github اطلاعات بیشتری راجع به این پلاگین بدست آورید.

 

منبع: https://tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites


برچسب‌ها:

آموزش پارالاکسآموزش طراحی پارالاکسآموزش طراحی وب سایت پارالاکس Parallaxسایت پارالاکسطراحی پارالاکسقالب پارالاکسوب سایت پارالاکس

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

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

دو + نوزده =