8 کد CSS و JavaScript برای پیمایش صفحات در طراحی سایت

صفحه بندی یکی از موارد ضروری در طراحی سایت است که اغلب نادیده گرفته می شود. بخصوص برای وبلاگ ها و سایت های پرمحتوا ، وسیله مهمی برای پیمایش بین صفحات فراهم می کند. یک وب سایت با صفحه های خوش ساخت می تواند کاربران را ترغیب کند تا بیشتر از آنچه که دنبالش بوده اند در وبسایت شما دست به اکتشاف بزنند.

در اینجا نگاهی به چند کد CSS و JavaScript خلاقانه می اندازیم که البته  می توانید برای بهبود صفحه بندی در وب سایت شما به صورت رایگان مورد استفاده قرار گیرد.


 

صفحه بندی ساده و بصری با جلوه های شناور

اولین مثال ما نشان می دهد که چگونه برخی از افکت های شناور می توانند صفحه بندی استاندارد را بسیار بهبود بخشند.  تجربه بصری بسیار سیالی ایجاد می کند.  یک روش ساده برای کمک به تجربه کاربران سایت شما.

شمارش صفحات بصورت زنده

یکی از ناامیدکننده ترین قسمتهای صفحه بندی می تواند نحوه مدیریت تعداد زیاد  صفحه ها  باشد. این کد  jQuery  برای نشان دادن شماره صفحه های مجاور هنگام کلیک استفاده می شود.  

شمارش صفحات سیال

 رابط کاربری صفحه بندی زیر که به  صورت پاسخگو و رسپانسیو طراحی شده است و شامل چندین روش  حرکت و تغییر صفحات است - از جمله از طریق صفحه کلید. نوار نشانگر صفحه  در بالا به وضوح صفحه فعلی را برچسب گذاری می کند و یک نمای کلی از همه صفحات موجود را ارائه می دهد.

   .

 

من به شخصه این نوع صفحه بندی را دوست دارم


صفحه بندی پیشرفته برای صفحه های موبایل
 در صفحه های کوچکتر ، استفاده از صفحه بندی بسیار دشوار است. ابزار ناوبری اغلب بسیار کوچک و و ناخوانا هستند. این کد گزینه بسیار خوبی برای دستگاه های تلفن همراه است.  

صفحه بندی بدون شماره

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

 صفحه بندی موبایل فرندلی

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

ترکیب صفحه بندی با پیمایش بی نهایت

 


  

طرح ها و ابزارهای ایجاد وب پالت رنگی بروز در طراحی سایت

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

تاریخ : 1400/03/26  

 

بخوانید

کتابخانه ها و ابزار طراحی انیمیشن جهت UI سایت

طراحان وب در نسل حاضر علاقه فراوانی به ایجاد تجربه متحرک سازی در سایت و انیمیشن هستند - این شگرد نه تنها برای طراحی سایت شما ارزش افزوده ایجاد می کند و به ظاهر و احساس سایت جلوه می بخشد، بلکه برای جلب نظر و حیرت بازدیدکنندگان و نگه داشتن آنها برای مدت بیشتر در سایت کمک می کند .

تاریخ : 1400/03/29  

 

بخوانید

گرادیان های مرسوم در طراحی سایت و ابزار طراحی

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

تاریخ : 1400/04/01  

 

بخوانید


Privacy Preference Center