ایجاد افکت حرکتی بر روی عکس با CSS

شاید توی بعضی سایتا دیده باشید که وقتی موس رو روی عکسا می برید یه سری اتفاقات خاصی میوفته مثلا عکس به صورت سه بعدی می چرخه یا تغییر میکنه. این کارا رو میشه هم با جاوا اسکریپت و هم با CSS انجام داد و اینجا سعی دارم یه سری نمونه کد براتون بزارم که توی سایتا یا پروژه های خودتون ازش استفاده کنید:

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

دموی افکت سوم رو میتونید اینجا ببینید

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

مرحله ی دوم: نوشتن دستورات CSS برای استایل دهی و حرکت دادن به تصویر

مدل دوم: توی این مدل عکس به صورت اسلاید به طرف پایین حرکت میکنه تا متن یا همون تایتلی که برای عکس در نظر گرفته شده نمایش داده بشه

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

مرحله دوم نوشتن دستورات CSS برای استایل دهی و متحرک سازی های مربوط به عکس

مدل سوم: در این مدل عکس به صورت سه بعدی میچرخه تا متن یا توضیحات مربوط به عکس دیده بشه.

مرحله اول ایجاد ساختار html برای مدل خودمون

مرحله دوم نوشتن دستورات مربوط به استایل دهی و چرخش عکس که همه با CSS انجام خواهد شد

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

 

Cool CSS3 Image Hover Effects
Cool CSS3 Image Hover Effects
cool CSS3 image hover effects.zip
Version: 1.0
43.0 KiB
217 Downloads
اطلاعات بیشتر
به اشتراک بگذارید: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. درود…به به
    بابا چرا وب سایتت به روز نمی کنید…انگار وب سایتت ولش کردید 😀
    مطلب خوبی می زارید….
    این مطلب عالی بود خدایش شاید توی طراحی های دیگه از این استفاده کنم….
    موفق باشید….

  2. programmer

    میشه لطفا توضیح بدید که در bootstrap چجوری میشه افکت سوم رو پیاده سازی کرد؟

    • کدهای مثال رو کپی و پیست کنید . این کدها مستقل از بوت استرپ هست. اگه متوجه نشدید بگید بیشتر توضیح بدم

  3. سلام
    ممنون از مطالب خوبتون، یک بکگراند میخوام درست کنم که یک تصویر مداوم از پایین به بالا برود اگر منبع یا آموزشی سراغ دارید ممنون میشم معرفی کنید.
    سپاس

    • سلام میتونید از animation keyframes توی css استفاده کنید 😀 ساختش خیلی راحته! توی سایت اموزشش رو قرار میدم براتون. موفق باشید.

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