خیلی از ماها سایت هایی رو دیدیم که وقتی باز میکنیم در ابتدا لودینگ (preloader) فلت متحرک به شکل زیبا اولش به نمایش درمیاد.
به عنوان یک کاربر اینترنت, انتظار داریم که صفحه وب سریع لود شود و دوست نداریم که برای مواردی منتظر بمانیم . preloader ها به ما یک حالت بصری را برای اطلاع از اینکه پشت صحنه سایت در حال لود شدن است می هد.
در نهایت یک تجربه کاربری خوبی ایجاد می کنید و باعث می شود که احتمال بستن پنجره وب سایت ما به شدت کاهش یابد.
در این آموزش jQuery قصد داریم به شما نحوه ساخت loading های متحرک را با CSS و در نهایت نمایش آن به کاربر قبل از لود کامل سایت با جی کوئری را نشان بدیم.
نحوه ساخت preloader با جی کوئری و CSS3
برای ایجاد یک Page Loading به یک تگ div نیاز داریم که تمام صفحه رو بپوشاند و آیتم هایی برای نشان دادن Progress در وسط آن بوسیله CSS قرار بدیم.
ما برای نمایش المان های مربوط به preloader از سودو کلاس های :before و :after استفاده می کنیم.
همانطور که هم که از اسمشون پیداست میتونند در اول و آخر یک عنصر، عنصر فیک جدیدی ایجاد کنند تا به وسیله ی اون بتونیم کنترل بیشتری برای استایل دادن به عناصر HTML داشته باشیم.
پس از آن تنها کاری که لازم است از بین بردن این div پس از load کامل صفحه توسط jquery می باشد
کد HTML
برای ساختن preloader همانند یک موج رادیویی در کد HTML از پنج تگ span استفاده کردیم که هر تگ span نشان دهنده یک موج است.
|
1 2 3 4 5 6 7 |
<div id="preloader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> |
کد CSS
این افکت برای تغییر طول(height) هر یک از span ها از ۵px به ۳۰px بصورت انیمیشنی استفاده شده است.
همچنین این span ها در جهت محور Y ها با دادن ۱۵px به آن برای ایجاد افکت موردنظر استفاده شده اند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
#preloader{ position:relative; } #preloader span{ display:block; bottom:0px; width: 9px; height: 5px; background:#9b59b6; position:absolute; animation: preloader 1.5s infinite ease-in-out; } #preloader span:nth-child(2){ left:11px; animation-delay: .2s; } #preloader span:nth-child(3){ left:22px; animation-delay: .4s; } #preloader span:nth-child(4){ left:33px; animation-delay: .6s; } #preloader span:nth-child(5){ left:44px; animation-delay: .8s; } @keyframes preloader { 0% {height:5px;transform:translateY(0px);background:#9b59b6;} 25% {height:30px;transform:translateY(15px);background:#3498db;} 50% {height:5px;transform:translateY(0px);background:#9b59b6;} 100% {height:5px;transform:translateY(0px);background:#9b59b6;} } |
به صورت پیش فرض انیمیشن بطور همزمان روی هر یک از span ها اتفاق می افتد. افکت موجی با اضافه کردن animation-delay برای هر span با ۲ میلی ثانیه فاصله اعمال می شود.
هر یک از span ها با سلکتور nth-child() انتخاب می شوند.
کد jQuery
پس از ساختن div برای قسمت page loading نوبت به حذف آن پس از بارگزاری کامل صفحه میرسد چون در غیر این صورت برای همیشه حتی پس از بارگزاری کامل در صفحه باقی می ماند و مانع مشاهده سایت توسط کاربر می شود !
|
1 2 3 4 |
$(window).load(function() { $('#preloader').delay(350).fadeOut('slow'); $('body').delay(350).css({'overflow':'visible'}); }); |
با استفاده از آبجکت window و یکی از متدهای داخل آن به نام load بررسی می کنیم بارگزاری صفحه به اتمام رسیده باشد
در صورت بارگزاری کامل, تابع CallBack اجرا می شود. در این تابع بازگشتی قسمت loading پنهان میشوند تا صفحه نمایش داده شود !
جمع بندی
امیدوارم از آموزش ساخت preloader با جی کوئری و CSS3 نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
سلام من برای قالب وردپرسی میخوام اضافش کنم،میشه لطفا بگید دقیقا توی کدوم فایل باید کدها قرار بگیرن یا فراخوانی بشن تا بصورت صفحه لودینگ نمایش داده بشه؟
چون توی فایل اصلی(index) که اضافه کردم مثل بخشی از سایت داره اجرا میشه و حذف هم نمیشه.
سام. به فایل header قالب اضافه کنید و همچنین مطمین باشید کد جی کویری رو صحیح در فایل script.js قالب قرار داده و بدرستی فراخوانی و اجرا می شود.
موفق باشید.
سلام. متن طبق توضیحات شما پیش رفتم اما صفحه لودینگ نمایش داده نمیشه! مشکل کجاست؟
سلام. اول باید کتابخانه jquery رو به صفحه html خودتون اضافه کنید. استایل ها و کد js رو هم باید بدرستی اضافه کنید
موفق باشید.
یه سوال.ایا میشود هر انیمیشن دلخواه را (به فرمت گیف یا …)به عنوان preloader انتخاب کرد؟
سلام.
بله هر المانی رو می تونید به عنوان pre-loader قرار بدید