ساخت preloader با جی کوئری و CSS3

  • آپدیت شده در تاریخ

ساخت preloader با جی کوئری و CSS3

خیلی از ماها سایت هایی رو دیدیم که وقتی باز میکنیم در ابتدا لودینگ‌ (preloader) فلت متحرک به شکل زیبا اولش به نمایش درمیاد.

به عنوان یک کاربر اینترنت, انتظار داریم که صفحه وب سریع لود شود و دوست نداریم که برای مواردی منتظر بمانیم . preloader ها به ما یک حالت بصری را برای اطلاع از اینکه پشت صحنه سایت در حال لود شدن است می هد.

در نهایت یک تجربه کاربری خوبی ایجاد می کنید و باعث می شود که احتمال بستن پنجره وب سایت ما به شدت کاهش یابد.

در این آموزش jQuery قصد داریم به شما نحوه ساخت loading های متحرک را با CSS و در نهایت نمایش آن به کاربر قبل از لود کامل سایت با جی کوئری را نشان بدیم.

ساخت preloader با جی کوئری و CSS3

نحوه ساخت preloader با جی کوئری و CSS3

برای ایجاد یک Page Loading به یک تگ div نیاز داریم که تمام صفحه رو بپوشاند و آیتم هایی برای نشان دادن Progress در وسط آن بوسیله CSS قرار بدیم.

ما برای نمایش المان های مربوط به preloader از سودو کلاس های :before و :after استفاده می کنیم.

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

پس از آن تنها کاری که لازم است از بین بردن این div پس از load کامل صفحه توسط jquery می باشد

 

کد HTML

برای ساختن preloader همانند یک موج رادیویی در کد HTML از پنج تگ span استفاده کردیم که هر تگ span نشان دهنده یک موج است.

کد CSS

این افکت برای تغییر طول(height) هر یک از span ها از ۵px به ۳۰px بصورت انیمیشنی استفاده شده است.

همچنین این span ها در جهت محور Y ها با دادن ۱۵px به آن برای ایجاد افکت موردنظر استفاده شده اند.

به صورت پیش فرض انیمیشن بطور همزمان روی هر یک از span ها اتفاق می افتد. افکت موجی با اضافه کردن animation-delay برای هر span با ۲ میلی ثانیه فاصله اعمال می شود.

هر یک از span ها با سلکتور nth-child() انتخاب می شوند.

 

کد jQuery

پس از ساختن div برای قسمت page loading نوبت به حذف آن پس از بارگزاری کامل صفحه میرسد چون در غیر این صورت برای همیشه حتی پس از بارگزاری کامل در صفحه باقی می ماند و مانع مشاهده سایت توسط کاربر می شود !

با استفاده از آبجکت window و یکی از متدهای داخل آن به نام load بررسی می کنیم بارگزاری صفحه به اتمام رسیده باشد

در صورت بارگزاری کامل, تابع CallBack اجرا می شود. در این تابع بازگشتی قسمت loading پنهان میشوند تا صفحه نمایش داده شود !

 

جمع بندی

امیدوارم از آموزش ساخت preloader با جی کوئری و CSS3 نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۶)

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

  1. fs ۱۵ مهر ۱۳۹۸

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

    پاسخ
    1. حسن شفیعی ۱۶ مهر ۱۳۹۸

      سام. به فایل header قالب اضافه کنید و همچنین مطمین باشید کد جی کویری رو صحیح در فایل script.js قالب قرار داده و بدرستی فراخوانی و اجرا می شود.
      موفق باشید.

      پاسخ
  2. حسین ۲۹ مرداد ۱۳۹۸

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

    پاسخ
    1. حسن شفیعی ۲۹ مرداد ۱۳۹۸

      سلام. اول باید کتابخانه jquery رو به صفحه html خودتون اضافه کنید. استایل ها و کد js رو هم باید بدرستی اضافه کنید
      موفق باشید.

      پاسخ
  3. Amirarsalan ۲۴ مرداد ۱۳۹۸

    یه سوال.ایا میشود هر انیمیشن دلخواه را (به فرمت گیف یا …)به عنوان preloader انتخاب کرد؟

    پاسخ
    1. حسن شفیعی ۲۴ مرداد ۱۳۹۸

      سلام.
      بله هر المانی رو می تونید به عنوان pre-loader قرار بدید

      پاسخ
دوره های آموزشی