در این مقاله از آموزش المنتور میخواهیم تا یک افکت زیبا به لوگوی سایتمون بدیم و هنگامی که موس روی لوگو قرار گرفت یک افکت متحرک و زیبا ایجاد شود و البته شاید بتوانید در تصویر زیر این موضوع رو به دقت نگاه کنید.
شروع آموزش ساخت لوگوی متحرک در المنتور
ابزارهای مورد نیاز :
- افزونه المنتور رایگان
- المنتور پرو رایگان (دلخواه)
مرحله 1 : در اولین قدم و مرحله باید یک سکشن یا بخش در المنتور ایجاد بکنیم، برای این کار در صفحه ای که با المنتور ویرایش کردید، روی آیکون + در صفحه کلیک کنید تا یک سکشن ایجاد شود.
مرحله 2 : بعد از این که سکشن رو ایجاد کردید باید، یک ردیف 2 ستونه ایجاد بکنید. میتوانید هانند تصویر زیر عمل کنید.
مرحله 3 : ابزارک “تصویر” رو در ستون های ایجاد شده درگ کنید.
ما در این آموزش ترفند هایی رو استفاده کردیم ، ما به دو تصویر نیاز داریم. تصاویر زیر همان چیزی است که من در این آموزش استفاده کردم.
مرحله 4 : در این بخش باید کدهایی css آماده رو با صفحه اضافه کنید. برای این کار روی تصویر کلیک کنید و در تب پیشرفته، روی css سفارشی کلیک کنید و کد های زیر رو در این بخش قرار دهید.
|
1 2 3 4 5 |
selector img:hover{ content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png'); opacity: .50; transition-duration: 3s; } |
خب دوستان کار تموم شد و تونستیم به همین راحتی یک افکت هاور حرفه ای موس در المنتور رو ایجاد بکنیم و در طراحی های خود استفاده بکنیم.
دقت کنید ..
در بالا ما 2 تصویر لوگو رو قرار دادیم و تصویر شماره 1 لوگو اصلی هست و تصویر شماره 2 لوگویی هست که در زمان هاور موس نمایش داده میشود و در کد بالا هم باید در خط 2 در بخش url، آدرس و مسیر تصویر 2 باید قرار داده شود.
نتیجه گیری
در این مقاله ما یک لوگو با افکت هاور موس ایجاد می کنیم و وقتی که کاربر رو لوگو رفت، لوگو یک افکت متحرک ایجاد بکنه و در تصویر اول هم میتوانید پیش نمایش این لوگو رو ببینید. فقط دقت داشته باشید که سوالی در آموزش داشتید حتما در بخش دیدگاه های همین مقاله عنوان کنید تا در کمترین زمان ممکن جواب شما داده شود.
موفق باشید.
۳ دیدگاه دربارهٔ «ساخت لوگوی تغییر شکل در هنگام هاور موس در المنتور;
عالی بود
سایتتون حررررف نداره
تشکر