Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS3
Webdesign

ساختن یک مجموعه از پیش-بارگذار های متحرک شده CSS3

by
Difficulty:IntermediateLength:MediumLanguages:

Persian (پارسی) translation by Arman Khuda (you can also view the original English article)

پیش-بارگذار ها(Pre-loaders) یک جلوه رایج در طراحی وب مدرن هستند. همانند کاربران ، ما انتظار داریم که وب سریع و روان باشد – ما دوست نداریم برای کارها صبر کنیم. پیش-بارگذار ها بازخورد تصویری از وقایع بارگذاری شدن محتوا عرضه می کنند ، در نتیجه مدیریت انتظارات و کاهش احتمال ترک کردن وبسایت شما توسط کاربر را به همراه دارند.

ضروریات CSS3 برای ساختن پیش-بارگذار ها

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

عناصر کاذب :before :after

عناصر کاذب واقعا در کمک کردن به ساخت پیش-بارگذار های CSS3 مفید هستند. عناصر کاذب اصولا یک عنصر دروغین قبل یا بعد عنصر html در پرسش می سازند.

"کاذب از کلمه یونانی  pseudēs به معنی نادرست ، مشتق شده است"

این شبیه ساختن یک عنصر اضافی که در حقیقت وجود ندارد است اگرچه عناصر کاذب می توانند با استفاده کردن از CSS ، شیوه(style) گرفته باشند. این عناصر کاذب برای ساختن پیش بارگذار های CSS3 یک ضرورت نیستند اما آنها موجب سهولت دسترسی می شوند و به ما امکان استفاده حداقلی از نشانه گذار ها را می دهند. 

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

انیمیشن CSS3

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

"جزء اصلی انیمیشن های CSS ، @keyframes است ، نقش CSS در جایی که انیمیشن ساخته شده. فکر کنید @keyframes شبیه مراحلی در امتداد یک بازه زمانی باشند. داخل @keyframes ، شما می توانید این مراحل را تعریف کنید ، هریک یک سبک بیان متفاوت دارند." –  مقدمه ای برای تازه کاران به انیمیشن CSS

توجه: قبل از اینکه ما بریم سراغ نمونه های نمایشی(demo) شایان ذکر است که قطعه کد های زیر پیشوند های ارائه دهندگان مرورگر را شامل نشده اند. اگر شما نیاز به پیشوند های ارائه دهندگان مرورگرها دارید پس لطفا مثالهای codepen را ببینید.

1. موج رادیوئی

ایده پشت این پیش-بارگذار ساختن یک انیمیشن شبیه به یک موج رادیوئی است. 

HTML

این بوسیله ساختن پنج محدوده(span) دست یافته شده ، هرکدام به نمایندگی یک میله رادیوئی.

CSS

جلوه به وسیله حرکت دادن عرض هر محدوده از 5px به 30px دست یافته شده. همچنین محدوده روی شاخص عمودی(Y) بوسیله 15px برای جلوه دادن اینکه آن از مرکز نمو داده شده حرکت می کند.

By default the animation on each span happens at the same time. The Mexican wave effect is created by adding animation-delay  to each span with an offset of 2 milliseconds. Each span is targeted using the nth-child() selector. 

2. مربع دایره ای

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

HTML

این با استفاده کردن از چهار محدوده(span) ساخته شده. هرکدام یک دایره/مربع هست و خودش یک خود تحرکی بکار رفته در آن دارد.

CSS

هر چهار تای آنها از یک مربع به یک دایره تبدیل می شوند ، بوسیله تعدیل کردن border-radius از 0px(مربع) به 20px(دایره) 

هر یک همچنین چرخش و حرکتی در راستای محور های X و Y در جهت مخالف موقعیت فعلی خود دارند. رنگ هر کدام از ناحیه ها نیز از بنفش به رنگ مستقل خود متحرک شده. که این حس را منتقل می کند که در شکل از ترکیب شدن چندین دایره یک مربع تشکیل شده.

3. شکل های متقاطع

شکل های متقاطع پیش-بارگذار یک قسمت مفرد هستند که با بهره گیری از عناصر کاذب :before  و :after  که قبلا در موردش صحبت کردیم بوجود میایند. 

HTML

CSS

یک انیمیشن در #preloader_3:before و دیگری در #preloader_3:afterجای گرفته است. هر انیمیشن در زمان مخالف به یک رنگ متفاوت تغییر می کند. مشابه پیش بارگذار قبلی هر عنصر کاذب از یک دایره به یک مربع تغییر می کند ، با حرکت کردن صفت border-radius .

4. مارپیچ رفتن

مارپیچ از مجموعه ای محدوده(span) ها که هریک به شکل یک دایره اند ساخته شده.  

HTML

اینجا نشانه گذار آن موجود است ، اما شما همیشه می توانید برای ساختن مارپیچ پیش-بارگذار با سه دایره و به جای داشتن چندین محدوده فقط با استفاده از #preloader_4  با :before و :afterتلاش کنید. 

CSS

انیمیشن با انتقال دادن موقعیت Y از هر انیمیشن بوسیله -10px و عوض کردن رنگ از آبی به زرد ساخته شده. برای ساختن یک جلوه سایه زیرین ، یک سایه به هر محدوده اضافه شده که سایز سایه عمودی آن از 0px به 20px تغییر می کند. 

شبیه پیش-بارگذار 1 ، بوسیله افزودن animation-delay به هر محدوده و جابه جاسازی هریک از محدوده ها در 2 میلی ثانیه ، آن اثر موج می سازد.

5. صفحه ریسندگی

این یک… دستگاه ریسندگی است.

HTML

اینجا ما یک div مفرد برای دایره مرکزی و  :after روی آن div برای ساختن خط های بیرونی استفاده می کنیم.

CSS

اضافه کردن یک لبه به بالا و زیر و دادن یک  border-radius از 50px و ساختن دو خط بیرونی. یک انیمیشن به div اصلی اضافه شده ، فقط برای تغییر دادن رنگ های اصلی div و ساختن جلوه چرخش با اضافه کردن transform: rotate() .حرکت عنصر :after برای تغییر دادن رنگ خط های بیرونی اضافه شده.

6. پنجره درخشان

ما در این یکی یک ذره مایکروسافت به کار بردیم...

HTML

این پیش-بار گذار با استفاده کردن از یک div و چهار محدوده برای ساختن یک مربع ساخته شده.

CSS

این مربع ها در یک نظم توری-مانند قرار گرفته اند. انیمیشن به div اصلی اضافه شده است برای چرخش کل پیش-بارگذار. انیمیشن دیگر به محدوده ها اضافه شده که به آنها از 100% به 50% مقیاس می دهد. ما سپس animation-delay  را به هر محدوده برای ساختن جلوه ضربان موج اضافه کردیم.

پایان

مزیت بزرگ در مورد استفاده کردن از پیش-بارگذار های CSS3 به جای پیش-بارگذار تصویری(image) این است که آنها مقیاس پذیر و آماده شبکیه(retina) هستند. که معنی آن این است که فرقی ندارد آنها با چه دستگاهی نشان داده شده اند ، در آن دستگاه ها همیشه ترد و تمیز و دارای ثبات برای آینده هستند(هرچند به یاد داشته باشید که انیمیشن CSS3 را همه ی نسل های قبلی مرورگر ها پشتیبانی نمی کنند). 

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

اگر شما در حال حاضر هر پیش-بارگذار جالبی ساخته اید پس من دوست دارم که آنها را ببینم ! برای گذاشتن نظرهایتان در پائین صفحه احساس راحتی بکنید.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.