لوگوی وبسایت
تمام آموزش های وبسایت رایگان می باشد ، پس از صفحات مختلف سایت دیدن فرمایید .

چطور دکمه های محو شونده برای تصویر بسازیم ؟

سلام  دوستان امیدوارم حالتون خوب باشد . در این آموزش قرار است که یک دکمه محو شونده و یک سری توضیحات با انیمیشن برای یک تصویر بسازیم .

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

http://mhr-developer.com/demos/hoveringbutton/

دانلود “سورس دکمه محو شونده” hoveringbutton.zip – Downloaded 111 times – 87 KB

ایجاد یک پرونده و آماده سازی

ابتدا یک پرونده به نام index.html میسازیم و انکودینگ آن را روی UTF-8 قرار میدهیم ، حالا تگ های پیشنیاز HTML را وارد میکنیم . ( ما کد های CSS رو درون فایل index.html میزنیم و فایل .css نمیسازیم )

توجه کنید که کد های reset سی اس اس را هم قرار دادیم .

خوب حالا نوبت ساخت div ها هست . ما یک div اصلی با کلاس div-list-holder میسازیم که وظیفه ی نگه داری ایتم های ما را دارد .

 و استایل زیر با بهش نسبت میدهیم .

من overflow:hidden کردم تا ارتفاع متناسب با المنت های درونی تغییر کند ( یک نوع clearfix )

حالا باید ایتم های مان را طراحی کنیم ولی قبل از آن بهتر است کمی درباره کارمان صحبت کنیم …

طریقه نمایش دکمه های محو شونده روی عکس

برای این کار ما یک div داریم که عرض و ارتفاع ان دقیقا برابر با عرض و ارتفاع ایتم ما هست و کل آن را میپوشاند . المنت های مد نظرمان را در آن قرار میدهیم و در حالت عادی مقدار opacity آن را برابر ۰ میکنیم ، اما تعریف میکنیم که اگر موس بر روی المان اصلی ایتم ما آمد ، مقدار opacity آن ۱ شود .

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

طراحی المان اصلی ایتم ها

ابتدا ما المان ایتم ها را با HTML میسازیم . این المان شامل یک تصویر ، یک توضیحات ( <p></p> ) هست و یک div که قرار است نقش نگه دارنده محتویاتی که قرار است هنگام hover شدن نمایش داده شوند را اجرا کند .

حالا نوبت آن است که کد های CSS را به المانمان دهیم .

المان ایتم ما آماده هست و حالا نوبت استایل دادن div مربوط به دکمه ها هست .

باید به چند نکته توجه کرد . من برای اینکه حالت انیمیشن به المان ها بدهم چند کار کردم . به المان اصلی هاور مان transition دادم که حالت fadeIn و fadeOut پیدا کند .

مقدار bottom و right تگ p هاور ما که قرار است مشخصات محصول را در خود جای دهد را عددی مختلف با حالت عادی قرار دادم که بعد از هاور شدن ، مقدار عادی را به آن بدهم که باعث متحرک سازی آن شود . لطفا به کد های css زیر توجه کنید :

الان حالت انیمیشن برای تگ p ظاهر شده است .

شاید برایتان سوال ایجاد شود ..

چرا من از position:absolute استفاده کردم ؟ من برای استایل راحت دادن و هم پوشانی المان هاورمان ، از این پوزیشن استفاده کردم ، همچنین باید توجه کنید که المان اصلی ایتم ما باید دارای position:relative باشد تا المان هاور را دقیقا در خود جای دهد .

چرا مقادیر right و bottom را تغییر دادید ؟ این بخش سلیقه ایی است . شما میتوانید اصلام مقدار right را تغییر ندهید تا انیمیشن حالت ستونی پیداکند ، بستگی به سلیقه شما دارد .

خوب با JQuery چطور پیاده سازی کنیم ؟ آموزش ساخت این دکمه ها به صورت حرفه ایی تر در آینده با استفاده از JQuery قرار خواهد گرفت ..

اگر سوالی داشتید بر بخش نظرات قرار دهید تا در اولین فرصت ، به آن ها رسیدگی کنیم .

دانلود “سورس دکمه محو شونده” hoveringbutton.zip – Downloaded 111 times – 87 KB

بر چسب های پست : , , ,
3 دیدگاه برای “چطور دکمه های محو شونده برای تصویر بسازیم ؟”
  1. behrooz گفت:

    سلام چجوری کد داخل مطلبتون مینویسید از افزونه ی خاصی استفاده می کنید

  2. مهراد گفت:

    خیلی خوب بود

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ورود به حساب کاربری
بستن این پنجره