نحوه ایجاد نوار پیشرفت مطالعه با جاوا اسکریپت

۴.۴
(۵)

نوار پیشرفت مطالعه در سایت‌ها ابزاری است که به کاربران این امکان را می‌دهد تا میزان پیشرفت خود را در خواندن مطالب آن صفحه، رصد کنند. به‌عبارتی دیگر، در سایت‌های خبری و یا سایت‌هایی که مقاله در آن وجود دارد، نواری دیده می‌شود که کاربر به هر میزانی که اسکرول می‌کند، این نوار هم پُر تر می‌شود. این نشان می‌دهد که چند درصد از صفحه مطالعه شده و چند درصد باقی مانده است. نحوه نمایش این ابزارها معمولاً با نوار رنگی است. در این ویدئو نحوه ایجاد نوار پیشرفت خواندن با جاوا اسکریپت را بررسی می‌کنیم که تنها با ۳ خط کدنویسی ایجاد می‌شود.

مزایای ایجاد نوار پیشرفت خواندن چیست؟

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

علاوه‌بر این‌ها، نوار پیشرفت خواندن به کاربران این امکان را می‌دهد تا مؤثرتر و سازماندهی‌شده‌تر مطالب را مطالعه نمایند و زمان خود را بهتر مدیریت کنند. همچنین کاربران می‌توانند در هنگام مطالعه مطالب سایت، تمرکز بیشتری داشته باشند؛ چراکه دیگر نیازی به سرچ در مطلب نداشته و به‌راحتی و با کمک نوار اسکرول می‌توانند به همانجایی که لازم دارند، بازگردند. به‌طور کلی، مزایای ایجاد نوار پیشرفت مطالعه را می‌توان موارد زیر نام برد:

  • زیبایی سایت
  • مرور مجدد بخشی از مطالب
  • سازماندهی مؤثرتر
  • صرفه‌جویی در زمان
  • افزایش تمرکز

دوره آموزش طراحی وب - صفر تا سایت نیک آموز

نحوه ایجاد نوار پیشرفت مطالعه در وب سایت با جاوا اسکریپت

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

برای اینکار، در header یک style را ایجاد می‌کنیم که header را بخواند؛ با تنطیمات: position: fixed و tip: 0 و z-index: 1 و width: 100% همراه با تنظیمات رنگ بک گراند.

تنظیمات هدر برای ایجاد نوار پیشرفت مطالعه

در ادامه ایجاد نوار پیشرفت خواندن، یک progress-bar-cintainer ایجاد می‌کنیم؛ با تنطیمات width: 100% و height: 10px به‌همراه تنظیم رنگ بک گراند.

تنطیمات progress-bar-cintainer برای ایجاد نوار پیشرفت خواندن

در نهایت نیز یک progress-bar ایجاد می‌کنیم؛ با تنظیمات height: 10px و width: 0 و با تنظیم رنگ بک گراند.

تنطیمات progress-bar برای ایجاد نوار پیمایش در وب سایت

در ادامه و در تگ body، به‌سراغ تنظیم اسکریپت می‌رویم. با ایجاد تگ script، می‌خواهیم تنظیم کنیم که صفحه هرچقدر اسکرول شد، پهنای progress-bar کم و زیاد شود. برای اینکار به ترتیب زیر عمل می‌کنیم:

تگ script برای ایجاد نوار پیشرفت مطالعه در صفحات وب

همچنین اگر قصد دارید نمایش و پر شدن نوار پیشرفت مطالعه از سمت راست به چپ باشد، در قسمت هدر، direction: rtl را قرار می‌دهیم.

راست چین کردن نوار اسکرول صفحات وب

جمع بندی 

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

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

چه رتبه ای می‌دهید؟

میانگین ۴.۴ / ۵. از مجموع ۵

اولین نفر باش

title sign
برچسب ها
title sign
دانلود ویدئو
نحوه ایجاد نوار پیشرفت مطالعه با جاوا اسکریپت
فرمت MP4
زمان ویدئو 10 دقیقه
حجم مگابایت
دانلود ویدئو
title sign
معرفی نویسنده
مقالات
0 مقاله توسط این نویسنده
محصولات
4 دوره توسط این نویسنده

رضا هاشمیان تجربه حدود 6 ساله در حوزه برنامه‌نویسی سمت سرور دارد و در این مدت، پروژه‌های نرم‌افزاری متنوعی از قبیل اتوماسیون هوشمند ساخت طلا و جواهر، پیاده‌سازی سیستم مدیریت یادگیری آنلاین (LMS)، و ایجاد صرافی رمزارز را با موفقیت به انجام رسانده است. او همچنین فعالیت‌های حرفه‌ای خود را در پلتفرم آپورک آغاز کرده و در پروژه‌های برون‌مرزی با شرکت‌های معتبری همچون Cegid همکاری داشته است. 

title sign
معرفی محصول
title sign
ویدیوهای مرتبط
title sign
دیدگاه کاربران

وبینار رایگان SQL Server؛ مسیری به سوی فرصت‌های شغلی بی‌شمار       پنج‌شنبه 30 فرودین ساعت 15
ثبت نام رایگان
close-image