متحرک سازی صفحات وب با CSS

خیلی وقتا شده که میخوایم به بخش از صفحه وب (وب سایت) خودمون رو متحرک سازی کنیم تا کاربران جذب سایت ما بشن , در حال حاضر متحرک سازی اجزای صفحات وب با استفاده از جاوا اسکریپت (js) , اس وی جی (SVG) و استایل شیت ها (CSS) امکان پذیر است. در اینجا قصد دارم طریقه متحرک سازی با CSS رو به شما دوستان عزیز آموزش بدم.  پیش نمایش این آموزش رو میتونید از اینجا ببینید (کلیک کنید).

برای شروع ابتدا یک ساختار html ایجاد میکنیم و سپس اون رو با دستورات CSS متحرک سازی میکنیم:

مرحله اول: ایجاد ساختار HTML

در دستورات بالا یه ساختار html درست کردیم و بلاک های مختلفی با تگ div ایجاد کردیم , من درون هرکدوم از این بلاک هایی که با تگ div درست کردم نامی رو درج کردم . خب حالا بریم سراغ متحرک سازی هر کدوم از این بلاک هایی که ساختیم 😀

مرحله دوم: استفاده از دستورات transform در css برای متحرک سازی

در دستورات بالا زیر که همگی دستورات css هستند , من چندتا کلاس تعریف میکنم و توی هرکدوم از کلاس ها موقع هاور شدن (hover) یه سری متحرک سازی هایی برای بلاک هایی که این کلاس ها رو داشته باشند اتفاق خواهد افتاد 😀 و بعدش میتونم با این کلاس ها روی هر کدوم از قسمت های html متحرک سازی رو انجام بدم , به دستورات زیر دقت کنید:

در دستورات بالا هرکدوم از بلاک هایی که درست کردیم رو به بلاک های html خودمون نسبت میدیم. حالا به توضیح در مورد دستورات Css میپردازم:

دستور transform در css به صورت کلی برای متحرک سازی به کار میره و چند دسته خاصیت کلی داره که به صورت زیر خواهند بود

  • translate: این دستور برای جابه جایی درون صفحه به کار میرود و اشیا مورد نظر را با توجه به جایی که قرار دارند روی محور افقی و عمودی جابه جای میکند. این دستور دو مقدار میپذیرد که می توانند بر حسب پیکسل باشند. شیوه ی استفاده از این دستور translate به صورت زیر می باشد:

  • scale: این دستور باعث تغییر سایز افقی و عمودی اشیا می شود. این دستور می تواند یک مقدار بپذیرد که نشان دهنده سایز اشیا نسبت به سایز اصلی اونها است. سایز اصلی رو با عدد ۱ نشون میدن , این دستور واحد اندازه گیری لازم نداره و فقط کافیه بهش یه عدد به عنوان ورودی بدیم مثلا عدد ۱٫۵ باعث میشه که اشیا یک و نیم برابر سایز اصلی خودشون بشن. شیوه ی استفاده از دستور scale به صورت زیر می باشد:

  • rotate: این دستور باعث چرخیدن اشیا در جهت چرخش عقربه های ساعت میشه , واحد اندازه گیری اون میتونه deg یا درجه باشه , اگه عددی که به صورت درجه میدیم منفی باشه چرخش در خلاف جهت عقربه های ساعت انجام میگیره. شیوه ی استفاده از دستور rotate به صورت زیر خواهد بود:

  • skew: این دستور باعث کشیدگی اشیا میشه. این دستور واحد اندازه گیری رو به صورت deg یا درجه میگیره که اگه مثبت باشه جهت کشیده شدن در جهت عقربه های ساعت خواهد بود و اگه منفی باشه در خلاف جهت عقربه های ساعت کشیدگی صورت خواهد گرفت.

دوستان عزیز وقتی که ما دستورات بالا رو به یک قسمت از صفحه اعمال میکنیم برای اینکه این تغییرات توی یه بازه ی زمانی رخ بدند و شکل خوبی به خودشون بگیرن از دستور transition استفاده میکنیم.

  • transition: وقتی که ما نیاز داریم که بین حالت اولیه یک شی و حالت ثانویه اون یه بازه ی زمانی برای تغییرات از حالت اول به حالت ثانویه ایجاد کنیم از دستور transition استفاده میکنیم. 😀 نحوه ی استفاده از این دستور مثل زیر خواهد بود:

مقادیر برای timing-function به صورت ease, ease-in,ease-out,linear,ease-in-out خواهد بود که در حالت linear باعث میشه اون اشیا ما با سرعت یکنواخت حرکت کنند اما دستورات دیگه باعث حرکت شتابدار میشن , مثلا دستور ease-in باعث حرکت سریع در ابتدا و حرکت کند در انتها خواهد شد.

مقدار delay و duration میتونه بر حسب ثانیه باشه که با s نشون میدیم , و مقدار property هم اون خاصیتی باید باشه که میخوایم اروم اروم در بازه ی زمانی مورد نظر ما تغییر کنه , اگه در قسمت property مقدار all رو بدیم بر روی همه خاصیت ها اعمال میشه . میتونیم خاصیت مورد نظر خودمون رو بدیم مثلا color اگه بدیم باعث میشه تغییرات رنگ در صورت وجود به ارامی در بازه ی زمانی که ما مشخص کردیم انجام بشه. 😀 به همین راحتی

کد نهایی ما در انتها به صورت زیر خواهد شد: (پیش نمایش اون رو میتونید از اینجا ببینید)

دوستان عزیز این دستوراتی که در اینجا ذکر شد متحرک سازی در css رو به صورت ۲D یا دو بعدی انجام میدن , دستورات متحرک سازی به صورت سه بعدی رو هم در آموزش های آینده به شما دوستان عزیز آموزش خواهم داد. امیدوارم این اموزش بدردتون خورده باشه.

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

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. میلاد

    سلام مطالب سایتتونو خیلی دوستدارم تقریبا هر روز سر میزنم ایشالا از سربازی بیای ۴ تا پست جدید بزاری :))
    اقا یک سوالی داشتم چون هیچی ازش نمیدونستم نتوستم تو گوگل چیزی پیدا کنم بعضی از این سایتای شرکتی که پروژه ای میذارن وقتی صفحه رو اسکرول میکنی تعداد پروژه هاش به شمارش در میاد تا رو عدد مورد نظر وایسه یا مثلا نمودار پیشرفت کار از کم به زیاد تغییر میکنه مثل این قالب http://hamyarwp.com/preview/sydney/ اینا چطوری درست میشن ؟؟

    • اگه منظورتون نمودار هست باید بگم که یه کتابخونه ای هست برای رسم نمودار , و تمامی نمودار هایی که با این کتابخونه رسم میشن حالت انیمیشنی دارند! یعنی همینجوری متحرک رسم میشن! این کتابخونه اسمش high chart هست! که میتونید سایتش رو از اینجا (کلیک کنید) ببینید و توی سایتش اسکرول کنید به پایین تا نمودار ها رسم بشن! این کتابخونه رو میتونید رایگان دانلود و استفاده کنید. اما اگه افکت هایی که با اسکرول هستند رو میگید باید بگم که این افکت ها برای سایت ها توسط طراحان UI به صورت اختصاصی طراحی میشن. اما یک سری کتابخونه های اماده هست که میتونید ازشون استفاده کنید و خودتون رو توی دردسر نندازید! کافیه تنظیمشون کنید که با اسکرول شما عمل کنن مثلا اینجا کلیک کنید

می‌خواهید دیدگاهتان را بیان کنید؟