55
تشکر

متحرک کردن تصویر با استفاده از CSS Keyframes

Animation

Animation

فرمت gif یکی از فرمت های رایج تصویری در وب است که بیشترین استفاده آن زمانی است که بخواهیم یک تصویر متحرک یا به صورت انیمیشن را نمایش دهیم. اما این فرمت برخلاف رایج بودن آن اصلا فرمت خوبی نیست و دارای حجم های بالایی نیز است و همچنین از تعداد رنگ پایینی پشتیبانی میکند. برای مثال Matt در این سایت یک عکس با فرمت gif را گذاشته است که دارای 1.7MB حجم است، در حالی که همان عکس با فرمت ویدیویی WebM دارای فقط 94KB است.

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

در ادامه مطلب همراه ما باشید…

برای مثال در عکس زیر ما میخواهیم پره های دو توربین بادی همواره در حال چرخش باشند (لینک سایز اصلی).

Torbin

Torbin

برای اینکار ابتدا باید پره های دو توربین بادی را جدا کرده و در یک عکس جداگانه دیگر ذخیره کنیم. که اینکار را به دست حرفه ای های فتوشاپ میسپاریم و سپس در عکس اصلی دیگر نباید نشانی از پره های توربین باشد. یعنی به شکل زیر (لینک سایز اصلی):

Torbin

Torbin

و پره های دو توربین به این شکل و این شکل باید باشند.

حالا که همه چیز در اختیار ما قرار دارد تنها کاری که باید انجام دهیم این است که با استفاده از CSS پره ها را در محل مناسب خود قرار دهیم و با استفاده از animation در CSS3 آن ها را به صورت مداوم بچرخانیم.

برای اینکار کد HTML زیر را به صفحه اضافه میکنیم.

<div class="image-wrap">
  <div class="windmill-background"></div>
  <div class="mill1"></div>
  <div class="mill2"></div>
</div>

و کدهای CSS زیر را نیز اضافه میکنیم. کد background-size:cover باعث میشود بکگراند کل عنصر را پوشش بگیرد و همینطور کد background-size:contain باعث میشود تصویر بزرگتر از عنصر نباشد.

.image-wrap {
  position:relative;
  overflow:hidden;
}
.image-wrap .windmill-background {
  background:url(wind-bg.png) no-repeat;
  background-size:cover;
}
.image-wrap .mill1 {
  background:url(mill1.png) no-repeat;
  background-size:contain;
  position:absolute;
}
.image-wrap .mill2 {
  background:url(mill2.png) no-repeat;
  background-size:contain;
  position:absolute;
}

همانطور که میبینید ما پوزیشن پره ها را برابر absolute قرار دادیم. بنابراین با استفاده از مشخصه های top و left میتوانیم محل دقیق آنها بر روی عکس را مشخص کنیم.

بعد از انجام اینکار کدهای انیمیشن زیر را نیز اضافه میکنیم. کد transform-origin مشخص میکند که rotate روی چه نقطه ای انجام شود. برای مثال اگر عرض و طول تصویر پره های ما یکسان بود باید این مشخصه را برابر center در نظر میگرفتیم.

.image-wrap .mill1, .image-wrap .mill2 {
  animation:spin 90s infinite linear;
  transform-origin:127px 89px;
}
@keyframes spin {
  0% {transform: rotateZ(0deg)}
  100% {transform: rotateZ(360deg)}
}

در پایین میتوانید دمو را مشاهده کنید.


مشاهده نمونه های بیشتر

  • سئو وردپرس می‌گه:

    خیلی جالبه !

  • کامی می‌گه:

    سلام
    من ویژوآل استادیو 2013 آپدیت 2 را دارم – وب اسنشال هم نصبه
    اما وقتی میخوام فایل sass یا همون scss را با گزینه new باز کنم چنین فایلی بین فایلها نیست
    اما وقتی در قالب پروژه میخوام ایجاد کنم هست هم فایل sass که با نام scss هم شناخته میشه هست و هم فایل less
    ممنون میشم راهنمایی کنید که چطور میشه در قالب فایلهای تکی فایل sass را ایجاد کنم
    با تقدیر از شما دوست عزیز

  • مرجان می‌گه:

    خوب اینکه شما ساختید که تصویرش نیست و پره ها هم تکون نمیخوره توی دمو

  • رها می‌گه:

    سلام
    یه سوال دارم البته شاید با این مطلب ارتباطی نداشته باشه ولی با سرچی در خصوصش زدم بهاینجا اومدم
    امید که راهنمایی کنید
    من میخوام سرعت هر اسلاید را در جاوا شخصی سازی کنم به شکلی که تصویر شماره 1 از زمانی که شروع به اسلاید میکنه تا زمانی که اسلاید شماره 1 به انتها میرسه در 3 تا سرعت متفاوت حرکت کنه
    1-از 0% تا 30% شروعی با حرکت بسیار ارام
    2-از 30% تا 70% حرکتی بسیار سریع
    3-از 70% تا 100% و اخر کار حرکت بسیار ارام شود
    یعنی چیزی شبیه به انچه که در کاشی های لایو ویندوز 8 هست
    ممنون میشم راهنمایی کنید
    البته عرض میکنم مجددا فقط با جاوا میخوام اینکار رو انجام بدم نه در css
    با سپاس
    شاد و پیروز باشید

  • MONJE می‌گه:

    سلام دوست عزیز
    آموزش خوبی بود ، ممنون
    یک سوال داشتم از خدممتون:
    باکسی که برای نمایش کد در آخر مطلب اسفاده کردین و قابلیت نمایش آنلاین نتیجه رو هم داره ، آیا افزونه هست یا چی ؟
    ممنون میشم راهنمایی کنین

  • خرید سایت می‌گه:

    عالی و آموزنده، ممنون

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

  • توضیحاتتون خوبه ها ولی بهتر بود هر چند خط کدی که مینوشتید یه عکس یا پیش نمایش ازش توی یه فریم میزاشتید مثلا اینجا رو ببینید خیلی خوب توضیح داده :
    https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
    به زبان شیرین انگلیسی

  • رامین می‌گه:

    سلام، من در حال طراحی ی وب سایتم و میخواستم با استفاده از MediaQueryها برای صفحات موبایل هم طراحی خاص خودشونو انجام بدم.
    ولی وقتی از MediaQuery زیر برای موبایل خودم ک صفحش 320px هست استفاده میکنم ب درستی کار نمیکنه.
    اما وقتی Max رو به Min تغییر میدم درست میشه.واقعا متوجه نشدم چرا اینجوریه؟؟!؟!؟! ینی صفحه موبایله منو بیشتر 800px میشناسه؟؟؟؟
    البته سوالمو تو قسمت آموزش ریسپانسیو هم پرسیدم ولی مثله اینکه متوجههش نشده بودی.
    ممنون از سایت خوبت

  • Ali Amini می‌گه:

    داداش اگه این @keyframes رو برای -webkit- تعریف میکردی که بتونیم دموشو ببینیم خیلی عالی میشد :)

    • محسن شفیعی می‌گه:

      تعریف شده ولی نمایش داده نمیشه. شما روی Edit on codepen کلیک کنید میتونید دمو رو مشاهده کنید.
      متاسفانه Codepen در ifreamها انیمیشن ها رو بعد از 5 ثانیه غیر فعال میکنه.


  • نظرات این مطلب بسته است.