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

آموزش Transition در سی اس اس ( طراحی انیمیشن )

در این مقاله قصد داریم به دنیای زیبای طراحی صفحات وب مسافرت کنیم و کمی با چیز های جدید آشنا بشیم  .  منظور از دنیای طراحی صفحات وب چیه ؟ ما با چی صفحات وب رو طراحی میکنیم و بهترین ابزار چیه ؟ همگی با زبان طراحی صفحات وب یعنی css آشنایی دارید . بیایید به زمانی برویم که زبان سی اس اس هنوز وجود نداشت . یا زبان نشانه گذاری html به وجود نیومده بود . به چه شکلی صفحات وب را طراحی میکردند ؟ من زبان سی را خیلی وقت پیش یاد گرفتم . اما جالب اینجاست که وقتی با طراحان وب قدیمی ( کسانی که از 30 سال پیش کار میکنند ) هم صحبت میشم ، متوجه میشدم که آنها در گذشته با زبان برنامه نویسی سی صفحات وب خود را طراحی میکردند . چرا و چطور ؟ 😥

 

زبان نشانه گذاری html و سی اس اس یکی از رویداد های فوق العاده در دنیای طراحی وبسایته که به واسطه اینها و زبان های دیگر مانند php پلت فرم بهتری به نام وردپرس ارائه گردید . حالا که فهمیدید زبان css چیه و چه کمکی به ما در طراحی صفحات وب میکنه ، وبیت را تا انتهای این مقاله همراهی کنید . چنانچه سوالی در رابطه با سلکتور های سی اس اس و یا تگ های html داشتید ، از قسمت نظرات کاربران آن را با ما به اشتراک بگذارید . همچنین اگر هنوز نمیدونید که css چیه ، مثالی در ادامه بیان میکنم که امیدوارم باهاش کاملا متوجه بشید .

 

نقش سی اس اس و اچ تی ام ال در ساختن صفحات وب !

در یک صفحه وب ما چیز های مختلفی مانند منو ها ، باکس ها ، بنر ها ، متن ها و …. میبینیم. حال CSS چه نقشی در ساخته شدن این المنت ها دارد یا html در ساخت آنها چه نقشی دارید ! یک ساختمان را تصور کنید که قرار است ساخته شود . ابتدا اسکلت آن را بنا میکنند . منظورم اینه که ساختمان شامل دو بخش ، اسکلت و بدنه گوشتی است . صفحات وب هم دقیقا همینطور هستند .

 

اون المنت ها مانند متن ها ، لیست ها و جدول ها توسط html ساخته میشوند و یک طرح ساده از آنها مشاهده خواهیم کرد . تا اینکه بلاخره سی اس اس به داد صفحات وب میرسد و اون لایه گوشی صفحه وب را تشکیل میدهد . یک متن را فرض کنید که با اچ تی ام ساخته شده است . حال فونت ها ، استایل متن ، استایل بخش ، محل قرارگیری و …. را با استفاده از CSS مشخص میکنیم و در نهایت به یک نوشته جذاب و زیبا میرسیم .

 

در این مقاله به طور کلی تر میخوایم راجب یک خاصیت بسیار مهم و حیاتی برای ساخت انیمیشن ، تصاویر متحرک و … به نام Transition در CSS صحبت کنیم . به صورت اختصاصی اگر بخواهیم با css کار کنیم ، متوجه میشیم که کاربردهاش خیلی فراتر از چیزی است که ما به آن فکر میکنیم . میتونیم انیمیشن ، بنر تبلیغاتی ، تصاویر متحرک و … باهاش بسازیم و یکی از استلزامات آن وجود خاصیت Transition است .

 

پارامتر های خاصیت Transition در CSS و آموزش آنها

این خاصیت در سی اس اس شامل چندین ورودی یا پارامتر است . پارامتر های ورودی آن را در زیر معرفی کردیم .

 

1 – Property

از Property یا همان ویژگی باید برای این خاصیت تعریف و مشخص شود . حالا منظور از ویژگی چیه ؟  این ویژگی ها شامل چیا هستند ؟ به طور کلی ویژگی ها شامل Width ، Background ، Color و… بیشتر مواقع  all هستند . دقت داشته باشید که Property حتما باید مشخص شود.

2 – Timing-Function

  • Ease : مقدار پیشفرض است. جلوه‎ی شروع آرام و در انتها آرام.
  • Linear : جلوه‎ با سرعت یکنواخت در شروع و پایان.
  • Ease-in : جلوه‎ با سرعت کم شروع و با سرعت زیاد به اتمام.
  • Ease-out : جلوه‎ با سرعت زیاد شروع و با سرعت کم به اتمام.
  • Ease-in-out : جلوه‎ با سرعت کم شروع ، بین انیمیشن کمی سرعت افزایش و با سرعت کم به اتمام.
  • Cubic-bezier : جلوه‎ی مقادیر دلخواه شما بین 0 و 1

 

3 – Duration

مدت زمان اجرای Transition یعنی مدت زمانی را که می‎خواهید المان شما از Style یک به Style دو برسد. مثلا تغییر رنگ از آبی به قرمز در 5 ثانیه.

4 – Delay

این ویژگی Delay یک مکث چند ثانیه ایی (بسته به اینکه شما چه مقداری به آن بدهید ) است که برحسب ثانیه است و شما میتوانید برای انیمیشن خود تعیین کنید که با چقدر تاخیر شروع به اجرا کند . مثلا قبل از شروع انیمینش یا هرچی دلای را روی 5 ثانیه تنظیم میکنیم . بدین ترتیب با 5 ثانیه تاخیر اجرا می‎شود.

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

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

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده اید و با آن موافق هستید.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

آخرین نمونه کار ها مشاهده همه

آخرین طرح های اختصاصی اجرا شده