امروز : دوشنبه ۲ بهمن ۱۳۹۶ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

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

 

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

اما ما همچنان از خودمان می‌پرسیم ، ” چه کار می‌توانیم بکنیم و یک تجربه لذت بخش را برای کاربر ایجاد کنیم ؟ و بزرگ ‌ترین ابزار ما در این هدف  CSS animations  بوده‌است .

Css Animationsدر مقایسه با انیمیشن‌های Java Scriptبسیار بهتر کار می‌کنند . بزرگ‌ترین مزیتش این است که توانایی CSS  برای مطابقت با  تغییرات جهانی و افزایش پشتیبانی توسط مرورگرهای  مختلف بیشتر است .

1. keyframes

ما هر شی را با تغییر حالت به تدریج در صفحه خود زنده می‌کنیم . با کمک keyframes ، می‌توانیم کنترل کنیم که شی چگونه در هر مرحله رفتار می‌کند :

@keyframes pulse {
0% {
;(transform: scale3d(1, 1, 1
}

50%{
;(transform: scale3d(1.1, 1.1, 1.1
}

100% {
;(transform: scale3d(1, 1, 1
}
}

 

اگر ما مثال خود را  کد بالا در نظر بگیریم :

1-نام Animation  : pulse

2- شامل ۳ مرحله است : (۰  (%زمان شروع ) ۵۰%  ( زمان شروع )  % ۱۰۰  ( زمان نهایی

3- مقادیر :  ( scale3d (x, y, z

بعد از اینکه انیمیشن تعریف شد، می‌توانیم کنترل کنیم که  :

انیمیشن چقدر طول می‌کشد ؟

چگونه انیمیشن به تاخیر می افتاد؟

فرکانس  تکرار پویانمایی

جهت پویانمایی

این یک پیاده‌سازی ساده است :

button {
;animation-duration: 1s
;animation-name: pulse
}

 

در مثال بالا ، ما یک انیمیشن را به یک دکمه اضافه می‌کنیم ، مدت‌زمان را ۱ ثانیه تعریف می‌کنیم و نام انیمیشن را که قبلا ایجاد کردیم مشخص می‌کنیم : ” pulse”

اگر قرار باشد مدت‌زمان انیمیشن را تنظیم کنیم ، رفتار دکمه نیز تغییر خواهد کرد . برای مثال :

 

1_axBGxfEj-jnOm1Ish6DkFw چگونه از Animation Css به صورت حرفه ای استفاده کنیم:

Animation Timing-2

وقتی می‌خواهیم مشخص کنیم که چگونه انیمیشن در طول چرخه حرکت شتاب خواهد گرفت،از تابع زمانبندی انیمیشن استفاده می‌کنیم . ما باید سرعت آن را تعیین کنیم . گزینه‌هایی مانند  initial, inherit, ease, ease-in, ease-out و غیره وجود دارد …

 

 

1_thASLMYlDYgZX42dkw14ZA چگونه از Animation Css به صورت حرفه ای استفاده کنیم:

 

 

1_yVGYYh1bsy3jGuR3nl91Uw چگونه از Animation Css به صورت حرفه ای استفاده کنیم:

زمان‌بندی  پویانمایی: ( ease )

 

1_yVGYYh1bsy3jGuR3nl91Uw چگونه از Animation Css به صورت حرفه ای استفاده کنیم:

زمان‌بندی  پویانمایی: ( linear)

 

تنظیم انیمیشن شما یک فرآیند ساده است . با استفاده از Cubic-bezier به عنوان راهنما ، می‌توانید زمان‌بندی را مطابق با نیازهای خود تنظیم کنید . اطلاعات درباره نحوه استفاده از Cubic-bezier در وب سایت Mozilla’s Developer موجود است .

ادامه دارد….

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 88 بار دسته بندی : آموزش css ، اخبار دیدگاه : ۰ تاريخ : ۵ دی ۱۳۹۶
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
فائزه سلطان پور

دیدگاه کاربران تعداد دیدگاه : ۰

برچسب ها