ساخت نوار هشدار با انیمیشن Bounce

ساخت نوار هشدار با انیمیشن Bounce

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

برای مشاهده لینک وارد شود

ما فایل HTML را ایجاد کرده و پیغام زیر را در نوار هشدار قرار می دهیم.

<div class="css3-notification">  
    <p>Hi, this is a notification and it bounces.</p>  
</div

سپس با استفاده از استایل ها  به متن پیغام ظاهری نسبتا زیبا می دهیم

.css3-notification {  
    font-size: .8em;  
    text-align: center;  
    padding: 10px;  
    background-color: #111;  
    color: #fff;  
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);  
    text-transform: uppercase;  
    position: relative;  
    font-weight: bold;  
}

این استایل ها شکل زیر را در نوار هشدار به ما میدهند

basic-styles

نوشتن انیمیشن keyframe با کد های CSS

پایه و اساس حرکت انیمیشن keyframe مانند حرکت توپ است یعنی وقتی توپ برای اولین بار به زمین میخورد ارتفاع بیشتری نسبت به بار دومی که به زمین میخورد بلند می شود.

bounce-effect

قدم اول:ساختن انیمیشنkeyframe

کار را با نوشتن استایل keyframe آغاز می کنیم.ما در این مثال نام bounce را برای keyframeانتخاب می کنیم.

@keyframes bounce {  

}

در خاطر داشته باشید که ما برای ساده شدن کد از سینتاکس @keyframe موسسه W3C استفاده می کنیم.اما برای کار کردن صحیح انیمیشن در مرورگر ها ما باید سینتاکس های مربوط به هر مرورگر را اضافه کنیم (-webkit--moz--o-)که شما در سورس کد مشاهده  خواهید کرد.

قدم دوم:تعیین موقعیت اولیه

اول ما آبجکت را به بالای موقعیت اولیه تنظیم میکنیم.در CSS ما به Yمقدار منفی را می دهیم. همانطوریکه که در کد زیر مشاهده می کنید ما موقعیت را بین۰تا۵ درصد تعیین کردیم که مقدار کوچکی باشد.

۰% {
	transform:translateY(-100%);
	opacity: 0;
}
۵% {
  	transform:translateY(-100%);
    opacity: 0;
}

قدم سوم:تعیین جهش اول

سپس از  ۵ تا ۱۵ درصد آبجکت ما شروع به حرکت خواهد کرد.ما مقدار translateY  را به ۰   به صفر بر میگردانیم.

به طور معمول ابجکت به صورت کشی پرش می کند.وقتی شیئی به زمین بر خورد می کند قسمت پایینی آن کمی به داخل فرو رفته و بیرون می آید که برای نمایش این کار از padding-bottom استفاده میکنیم و مقدار۱۰px  تا  ۵px را میدهیم.

۱۵% {  
    transform:translateY(0);  
    padding-bottom: 5px;  
}

کلمات پس از برخورد با زمین به حالت اولیه بر میگردنند.در این نقطه جسم پرتاب شده در بالاترین نقطه است ما آن را ۵۰  به ۳۰ درصد تنظیم می کنیم.

۳۰% {  
    transform:translateY(-50%);  
}

و در پایان  تمام جهش ها را تا آخر تعیین می کنیم

۵۰% {  
    transform:translateY(-30%);  
}
۷۰% {  
    transform:translateY(0%);  
    padding-bottom: 7px;  
}  
۸۰% {  
    transform:translateY(-15%);  
}  
۹۰% {  
    transform:translateY(0%);  
    padding-bottom: 8px;  
}  
۹۵% {  
    transform:translateY(-7%);  
}  
۹۷% {  
    transform:translateY(0%);  
    padding-bottom: 9px;  
}  
۹۹% {  
    transform:translateY(-3%);  
}  
۱۰۰% {  
    transform:translateY(0);  
    padding-bottom: 9px;  
    opacity: 1;  
}

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


سه − = 1

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>