افزودن انیمیشن به سایت خود با استفاده از کتابخانه Hover.css

افزودن انیمیشن به سایت خود با استفاده از کتابخانه Hover.css

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

دموی کتابخانه Hover.css Hover.css یک کتابخانه رایگان برای اعمال انیمیشن روی عناصر مختلف وب از جمله تصاویر، دکمه ها، لوگوها و ... است. این کتابخانه بیش از 40 نوع انیمیشن مختلف را در اختیارتان قرار می دهد که به دسته های انیمیشن های دو بعدی، انیمیشن های Border، انیمیشن های سایه و نور، انیمیشن های نقل قول و انیمیشن های پیچاندن صفحه تقسیم می شوند. راه اندازی برای شروع ابتدا لازم است تا Hover را دانلود کنید و سپس فایل Hover.css را به فایل های پروژه خود اضافه کنید. در انتها نیز باید فایل سی اس اس را به صفحه وب خود لینک دهید که این کار را می بایست داخل تگ head صفحه از طریق تگ link انجام دهید. اضافه کردن انیمیشن به یک عنصر برای اضافه کردن انیمیشن ها به عناصر صفحه کافی است نام افکت انیمیشن را به Class عنصر مورد نظر خود وارد کنید. شما می توانید دموی زنده تمامی انیمیشن ها را در صفحه اصلی Hover.css مشاهده کنید. کافی است اسامی داخل صفحه را با حروف کوچک نوشته و به جای Space از خط فاصله - استفاده کنید. مثال حال برای این که افکت را روی این دکمه اعمال کنید کافی است علاوه بر آدرس دادن به کلاس ظاهر دکمه (در اینجا btn نام دارد)، به کلاس انیمیشن مورد نظر خود نیز دکمه را لینک بدهید. در ادامه می بایست افکت مد نظر خود را به دکمه اضافه کنیم که در اینجا hover-shadow نام دارد. خروجی به صورت زیر خواهد بود:

 افزودن انیمیشن به سایت خود با استفاده از کتابخانه Hover.css

شخصی سازی اگر فایل hover.css را با یک ویرایشگر باز کنید مشاهده می کنید که هر افکت با یکسری تنظیمات پیش فرض آمده است. این تنظیمات به عنصر مورد نظر کمک می کنند تا عملکرد بهتری روی صفحه داشته باشد. در اینجا به یکسری از این تنظیمات اشاره می کنیم که می توانید با عوض کردن آن ها با توجه به نیازهای خود آن افکت را شخصی سازی کنید: display: این مشخصه برای به نمایش در آمدن افکت نیاز است. transform: در این قسمت از CSS3 transforms استفاده شده تا نتیجه را روی موبایل و تبلت بهبود ببخشد. box-shadow: با استفاده از این ویژگی به عناصر سایه شفاف داده شده است تا در موبایل تا تبلت گوشه های عناصر صاف تر به نظر برسند.

سخن پایانی Hover.css یکی دیگر از نمونه های جذاب پیاده سازی CSS3 است که برای بسیاری از این انیمیشن ها از ویژگی های CSS3 استفاده کرده است. توجه داشته باشید شما برای استفاده کامل تر از این کتابخانه لازم است که حتما این انیمیشن ها را برای مرورگرهای قدیمی تر که از این ویژگی ها پشتیبانی نمی کنند بهینه سازی کنید.