جلسه ی بیست و یکم: استایل Transition

transitionاز مواردی که باعث زیبا سازی وب سایت ها می شوند انیمیشن ها می باشند، انیمیشن ها را می توان از طریق جاوا اسکریپت یا ویژگی های ساده در CSS اجرا نمود. از جمله ی این ویژگی می توان به استایل Transition اشاره نمود در این آموزش می خواهیم کار با این ویژگی را به شما دوستان عزیز آموزش دهیم.

 

استایل Transition

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

کد های HTML:

<img src="image/img.jpg">

کد های CSS:

img {

  right:0px;

  transition: right 1s;

   position: relative;

}

img:hover {

  right : 500px

}

متاسفانه چون این ویژگی محرک می باشد نمی توانیم خروجی آن را به شما نشان دهیم ولی شما لطفا این کد ها را ذخیره و تمرین کنید.

نکته۱: اگر به نمونه کد بالا در بخش CSS دقت کنید متوجه خواهید شد که از خاصیت position: relative; استفاده نموده ایم در صورتی که از ویژگی position: relative; در استایل transition استفاده نکنیم عکس ما در صفحه جا به جا نمی شود.

نکته۲: ویژگی Hover می باشد زمانی که بخواهیم با قرار گرفتن ماوس بر روی یک عنصر ویژگی های مورد نظر ما اجرا شوند از Hover استفاده می کنیم. فرایند Hover یعنی زمانی که ماوس بر روی یک عنصر قرار می گیرد ویژگی هایی که ما برای آن تعریف کرده ایم اجرا شوند.

در کد بالا تصویر مورد نظر ما در سمت راست چسبیده است و اگر ماوس را به روی آن ببریم ۵۰۰px از دیواره ی سمت راست فاصله می گیرد و یک انیمیشن زیبا می سازد. حال که کار با استایل Transition را آموخته ایم می خواهم به شما دوستان یک سری مباحث تکمیلی رو آموزش دهم که باعث بهتر شدن انیمیشن های شما می شود.

مبحث تکمیلی

ترکیب استایل Filter با استایل Transition

اگر یادتان باشد در جلسه ی شانزدهم از آموزش طراحی سایت فیلتر ها را آموزش دادیم (برای دیدن این آموزش کلیک کنید). در این آموزش می خواهیم از فیلتر grayscale استفاده نماییم همانطور که گفتیم کار این فیلتر بی رنگ کردن تصاویر می باشد به نوعی همه ی رنگ ها را به خاکستری تبدیل می کند مانند فیلم های سیاه و سفید قدیمی.

حال فکر کنید از این ویژگی بر روی عکس های خود استفاده کنید به نوعی که وقتی ماوس به روی عکس یا عنصر مورد نظر ما می رود به سیاه سفید شود. اگه اینکار به صورت یکدفعه انجام شود جذابیتی ندارد اما به کمک استایل Transition میخوانیم به آرامی این کار ار انجام دهیم که باعث زیبایی آن می شود اگر میخواهید به اهمیت وجود استایل Transition در کد های خود پی ببرید کافیست یکبار یک عملیات را بدون حضور این ویژگی انجام دهید. به نمونه کد زیر توجه کنید:

کد HTML:

<img src="image/img.jpg">

کد CSS:

img {

 transition: 1s;

   position: relative;

}

img:hover {

  filter: grayscale(100%);

}

کد بالا به این گونه است که ابتدا عکس به صورت رنگی قرار دارد و پس از قرار گرفتن ماوس به روی آن به آرامی در مدت ۱ ثانیه عکس مورد نظر ما سیاه و سفید می شود.البته فقط این فیلتر نیست و شما می توانید با استفاده از فیلتر های دیگر انیمیشن های زیبایی ایجاد کنید برای مثال تصویر را مقداری مات کنید تا با قرار گرفتن ماوس بر روی آن شفاف شود.

 

ترکیب استایل Transform با استایل Transition

اگر یادتان باشد در جلسه ی هجده ام از طراحی سایت با استایل Transform آشنا شدید (برای دیدن این آموزش کلیک کنید). اولین استایلی که در این ویژگی آموختیم ویژگی Rotate بوده است که باعث چرخش جسم می شود.

حال اگر ما ویژگی Rotate را با استایل Transition ترکیب کنیم می توانیم یک چرخش زیبا در مدت زمان دلخواه خود داشته باشیم. به نمونه کد زیر توجه کنید:

کد HTML:

<img src="image/img.jpg">

کد CSS:

img {

 transition: 1s;

}

img:hover {

transform: rotate(360deg);

}

در مثال بالا زمانی که ماوس بر روی عکس قرار می گیرد عکس ۳۶۰ درجه در مدت ۱ ثانیه می چرخد و زمانی که ماوس را از روی عکس برمیداریم عکس به همان شکلی که تغییر وضعیت داده به حالت اول خود بر می گردد.

حال اگر بخواهیم یک کار حرفه ای تر داشته باشیم کافیست از ویژگی های زیر برای ایجاد زمان بندی های حرفه ای تر استفاده کنیم. که عبارتند از:

  1. Ease: زمانی که از ویژگی Ease استفاده کنیم انیمیشن ما با سرعت آرام آغاز شده سپس تند می شود و در نهایت کند شده و به پایان می رسد البته لازم به ذکر می باشد که این ویژگی حالت پیش فرض می باشد.
  2. Linear: زمانی که از ویژگی Liner استفاده می کنیم ویژگی های مورد نظرما با سرعتی یکنواخت شروع به انجام کرده و به پایان می رسد.
  3. Ease-out: زمانی که از ویژگی Ease-out استفاده می کند استایل Transition با سرعتی کند به پایان می رسد.
  4. Ease-in-out: زمانی که از ویژگی Ease-in-out استفاده می کنیم استایل transition را با سرعتی کند آغاز می شود و به اتمام می رسد.

 

نکته مهم: اگر بتوانید استایل Transform و استایل Filter را با استایل Transition ترکیب کنید خواهید دید که چگونه می توانید یک Hover زیبا داشته باشید برای دیدن نمونه کافیست به صفحه ی اصلی سایت مراجه کنید و ماوس خود را بر روی پست ها ببرید تا ببینید چگونه عکس پست تغییر می کند.

خلاصه مطلب:

  1. استایل Transition با زمان دادن به انجام عملیات ها باعث محرک سازیه عناصر می شود.
  2. در صورتی که از ویژگی position: relative; در استایل transition استفاده نکنیم عکس ما در صفحه جا به جا نمی شود.
  3. فرایند Hover یعنی زمانی که ماوس بر روی یک عنصر قرار می گیرد ویژگی هایی که ما برای آن تعریف کرده ایم اجرا شوند.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

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