سبد (0)

طراحی نوار وضعیت حبابی(قسمت دهم)

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


گام شماره ی 1:

برای ایجاد انیمیشن، ابتدا به عنصر با کلاس water. کدهای رنگی CSS زیر را اضافه می کنیم: 

مثال 1.1

.green .progress .inner .water {
position: absolute;
z-index: 1;
width: 200%;
height: 200%;
background: rgba(83,252,83,0.5);
top: 25%;
left: -50%;
border-radius: 40%;

box-shadow: 0 0 20px #03bc03;

animation-name: spin;
-webkit-animation-name: spin;

animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;

animation-timing-function: linear;
-webkit-animation-timing-function: linear;

animation-duration: 10s;
-webkit-animation-duration: 10s;

}

 در کدهای رنگی شده ی بالا، ابتدا از ویژگی box-shadow استفاده کرده ایم و به عنصر با کلاس water. به اندازه ی 20 پیکسل، سایه ای به رنگ متمایل به سبز را اضافه کرده ایم. 

سپس با استفاده از ویژگی animation-name نام انیمیشن خود را spin گذاشته ایم. که بعدا از آن استفاده خواهیم نمود. 

سپس با استفاده از ویژگی animation-iteration-count تعداد تکرار انیمیشن را مشخص کرده ایم و آن را برابر با مقدار infinite ( بی نهایت) قرار داده ایم تا همواره این انیمیشن اجرا شود. 

حالا با استفاده از ویژگی animation-timing-function ، سرعت انیمیشن در شروع و پایان را برابر با مقدار linear قرار داده ایم. که باعث می شود سرعت انیمیشن ما در شروع و پایان هر دوره، یکی باشد. 

سپس با استفاده از ویژگی animation-duration مشخص کردیم که هر دوره از اجرای انیمیشن ما، به اندازه ی 10 ثانیه طول بکشد. 


 گام شماره ی 2: 

 اکنون می خواهیم با استفاده از قانون keyframe انیمیشن خود را تعریف کنیم، بنابراین کدهای رنگی زیر را در انتهای کدهای CSS خود قرار می دهیم: 

مثال 1.2

@keyframes spin {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);

}
}



@-webkit-keyframes spin {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);

}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);

}
}

 در کدهای آبی رنگ بالا، در داخل کدهای بخش from، تعیین می کنیم که برای انیمیشن spin، عمل rotate یا همان چرخش از زاویه ی 0 درجه انجام شود. و سپس در بخش to تعیین کردیم که چرخش ما تا زاویه ی 360 درجه ادامه داشته باشد. 

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


مشاهده ی نتیجه:

در خودتان امتحان کنید زیر، به راحتی می توانید نتیجه ی حاصل شده را مشاهده کنید:

See the Pen 2.9نوار وضعیت حبابی by Ehsan Abbasi (@sbaloot) on CodePen.

 

 برای مشاهده ی نتیجه به صورت تمام صفحه، اینجا کلیک کنید

 


گام شماره ی 3: 

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

مثال 1.3

.green .progress .inner .percent {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

/*border:1px solid red;*/

color: #03c603;
font-size: 92px;
font-weight: bold;

text-align: center;

text-shadow: 0 0 10px #029502;

line-height: 240px;

}

حالا برای اینکه مقدار سرریز شده از مستطیل متحرک در داخل دایره ها را از دید ناظر محو کنیم، از دستور overflow استفاده می کنیم و مقدار hidden را به آن می دهیم: 

مثال 1.4

.green .progress .inner {

width: 240px;
height: 240px;

/*background-color: blue;*/

border: 5px solid #1a1a1a;

border-radius: 50%;

z-index: 2;
position: absolute;

overflow:hidden;

}

مشاهده ی نتیجه: 

در خودتان امتحان کنید زیر می توانید نتیجه ی حاصل شده را به خوبی مشاهده کنید: 

See the Pen 2.10نوار وضعیت حبابی by Ehsan Abbasi (@sbaloot) on CodePen.

 

آموزش صوتی JavaScript

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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