آموزش طراحی صفحات one page در ۴ قدم

onepage-ITport-300x200

درسال سال های اخیر شاهد رشد وب سایت هایی بودیم که به صورت تک صفحه ای هستند. به این وب سایت ها اصطلاحا one page یا single page گفته می شود. وبسایت های one page به صورت تک صفحه ای طراحی می شوند و تمامی اطلاعات درون یک صفحه قرار می گیرند و با اسکرول کردن صفحه می توانید قسمت های مختلف سایت را مشاهده کنید. عوامل زیادی باعث محبوبیت این نوع وبسایت ها شده اند که در این مطلب به مهمترین های آنها می پردازم.

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

وبسایت های one page برای چه مواردی کاربرد دارد؟

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

چگونه طراحی را شروع کنیم؟

قبل از شروع آموزش فایل ضمیمه رو دانلود کنید تا بهتر متوجه بشوید.
من برای ساخت صفحات one page از پلاگین scrollIt.js استفاده می کنم.
مرحله اول: کتابخانه جی کوئری و scrollIt.js را دانلود و در صفحه بارگذاری کنید.

مرحله دوم: در این مرحله باید خاصیت data-scroll-index رو به اسلایدهای سایت اضافه کنیم.

مرحله سوم: خاصیت data-scroll-nav را به منوها اضافه کنید. این خاصیت باعث می شود وقتی روی منو مورد نظر کلیلک  می کنیم صفحه به سمت اسلاید مربوط به آن اسکرول بشود.

مرحله چهارم: در مرحله اخر تابع scrollIt() را صدا می زنیم.

نکته: برای سفارشی سازی پلاگین scrollIt.js می توانید کد زیر رو در مرحله چهارم استفاده کنید.

الان صفحه one page ما آماده شد فقط کافی است بروید برای صفحه وب سایت تان استایل زبیا ایجاد کنید.
امیدوارم که این مقاله ی آموزشی مورد پسند شما قرار گرفته باشد.

دانلود فابل زمیمه