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

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

برای استعلام یا ارسال سفارش اینجا کلیک کنید.

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

 

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

اما ما همچنان از خودمان می‌پرسیم ، ” چه کار می‌توانیم بکنیم و یک تجربه لذت بخش را برای کاربر ایجاد کنیم ؟ و بزرگ ‌ترین ابزار ما در این هدف  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 موجود است .

ادامه دارد….

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

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

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

منبع : وبیت

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

مهندسی نرم افزار با ذهنی خلاق و کوشا در حال فعالیت در اوینا وب هستم و در زمینه سئو ، تولید محتوا و طراحی قالب وردپرس مشغول هستم :))

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

برچسب ها