img

ساخت یک دایره انیمیشن لودینگ

/
/
/

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

 

۱- ایجاد یک سند
سند صفحه را با تعریف صفحه استاندارد  HTML  ایجاد کنید. این کار به وسیله بخش های head و body انجام می شود. بخش عنوان ، اطلاعات توصیفی  و لینک استفاده از  فایل  CSS  را شامل می شود؛ در حالی که بخش بدنه، جا  سازی المان های محتوا را انجام می دهد. محتویات در بخش بعد اضافه می شود. از کد زیر استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible”
content=”IE=edge”>
<meta name=”description”
content=”description”>
<title>Rotating Circles</title>
<link rel=”stylesheet” type=”text/css”
media=”screen” href=”styles.css”/>
</head>
<body></body>
</html>

۲- محتویات اصلی
محتویات اصلی ما از محتویات دایره ساخته می شوند و هر کدام نیز  به عنوان جزیی از عناصر دایره ایجاد می شوند. عناصر دایره از تگ های  span ساخته می شوند (یک تگ span  که داخل یه تگ Span مادر قرار می‌گیرد) تنها قرار دادن یک انیمیشن بر روی گره  DOM  را ممکن می سازد، بنابراین، استفاده از یک گره داخلی و خارجی برای دایره، باعث می شود تا دو افکت انیمیشن بر روی  دایره ها قرار بگیرند. از کد زیر استفاده نمایید:

<div class=”circle”>
<span><span></span></span>
<span><span></span></span>
<span><span></span></span>
</div>

۳- شروع  CSS
مرحله بعدی ایجاد یک فایل جدید به نام «style.css» است، از این مرحله برای ذخیره سازی قوانین سبک بندی و انیمیشن استفاده می شود. اولین مرحله در تعریف این قوانین، تعیین نحوه ارائه ظرف سند  بدنه اصلی و HTML  است. می خواهیم این موارد ، در تمام صفحه نمایشگر و با عرض و طول کامل و بدونmargin  و padding  نشان داده شوند. از این کد استفاده نمایید.

body,html {
display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #fff;
background: #000;}

۴- ظرف دایره
برای قرار دادن دایره های متحرک در نسبت با یکدیگر، باید آن ها را در یک ظرف نگه داریم. برای این منظور، ظرف را با کلاس circle تعریف می کنیم و مطمئن می شویم که از این موقعیت یابی نسبی و همچنین ارتفاع و عرض تعریف شده استفاده می‌کنیم. مانند کد زیر:

.circle {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;}

۵- دایره خارجی
هر دایره به وسیله دو گره تعریف می شود.( المان های خارجی و داخلی) المان خارجی، موقعیت دایره ها ، اندازه ، transform origin و انیمیشن را تعریف می کند. در این حالت، انیمیشن چرخشی، طوری استفاده می شود که تصویر به طور نامحدود چرخش داشته باشد. برای این منظور، transform origin  ، در مرکز دایره قرار می گیرد.( ۵۰ درصد افقی و ۵۰ درصد عمودی) . همانند این کد:

.circle > * {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vh;
transform-origin: 50% 50%;
background-repeat: repeat;
background-size: 200px 200px;
animation: rotate infinite linear;}

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

.circle > * > * {
display: block;
width: 100%;
height: 100%;
border: 1px dashed #ccc;
border-radius: 100%;
animation: borderOpen infinite linear 8s;}

۷- تنظیمات خاص دایره
در نمایش دایره های تعریف شده، باید اندازه خاص، موقعیت ها  و  زمان بندی انیمیشن را  نیز تعریف کنیم. از این انتخاب گر child nام برای شناسایی المان های child  ، اول ، دوم و سوم در ظرف کلاس «circle»  استفاده می کنیم. حاشیه، ارتفاع، عرض و ویژگی هایduration تصویر متحرک برای هر کدام تعیین می شوند. از کد زیر استفاده نمایید:

.circle > *:nth-child(1){
animation-duration: 8s;}
.circle > *:nth-child(2){
animation-duration: 32s;
margin: 10vh;
height: 80vh;
width: 80vh;}
.circle > *:nth-child(3){
animation-duration: 64s;
margin: 20vh;
height: 60vh;
width: 60vh;}

۸- تعریف انیمیشن
مرحله آخر، تعریف دو انیمیشن است.  اولین تصویر»rotate» ( چرخش) است که ظرف دایره خارجی را از ۰ تا ۳۶۰ درجه می چرخاند. تغییرات انیمیشن شفافیت هر بخش را از نامرئی به مرئی تغییر می دهد، برای این منظور از ویژگی های رنگ rgba در مراحل مختلف انیمیشن استفاده می شود. از کد زیر استفاده کنید:

@keyframes rotate {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}}
@keyframes borderOpen {
۰% { border-color: rgba(255,255,255,0)
rgba(255,255,255,0) rgba(255,255,255,0)
rgba(255,255,255,0); }
۲۵%{ border-top-color:
rgba(255,255,255,1); }
۵۰%{ border-right-color:
rgba(255,255,255,1);}
۷۵%{ border-bottom-color:
rgba(255,255,255,1); }
۱۰۰%{ border-left-color:
rgba(255,255,255,1); }}

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

نظر بدهید

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

It is main inner container footer text