نحوه محو کردن تصاویر روی Mouseover در وردپرس (ساده و آسان)
آیا می خواهید تصاویر را روی ماوس در وردپرس محو کنید؟
اکنون، میتوانید ماوس را روی هر تصویر مشخصی ببرید تا انیمیشن محو را در عمل ببینید.
با محو کردن تصاویر برجسته روی ماوس، می توانید سایت خود را چشم نوازتر و جذاب تر کنید، بدون اینکه تک تک تصاویر را در وبلاگ یا وب سایت وردپرس خود متحرک کنید.
img.wp-post-image:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
در اینجا، به سادگی ماوس خود را روی «Add Your Custom Code» قرار دهید.
پس از انجام این کار، روی دکمه “به روز رسانی” یا “انتشار” کلیک کنید تا کد کوتاه فعال شود. سپس میتوانید از آن صفحه، صفحه یا منطقه آماده ابزارک دیدن کنید تا اثر محو شدن روی ماوس را ببینید.
افزودن انیمیشن محو شدن تصویر به تصاویر ویژه
با این اوصاف، اجازه دهید به شما نشان دهیم که چگونه در وردپرس روی تصاویر خود یک محو شدن اضافه کنید.
افزودن Image Fade در Mouseover به تمام تصاویر وردپرس
یک انیمیشن محو یا محو ساده زمانی که کاربر موس خود را روی یک تصویر میبرد، میتواند سایت شما را جذابتر کند. همچنین بازدیدکنندگان را تشویق میکند تا با محتوای شما تعامل داشته باشند، که میتواند آنها را برای مدت طولانیتری در سایت شما نگه دارد.
اگر میخواهید جلوههای نمایش ماوس تصویر بیشتری اضافه کنید، راهنمای ما در مورد نحوه افزودن جلوههای شناور تصویر در وردپرس را ببینید.
امتیاز: متحرک کردن هر تصویر، متن، دکمه و موارد دیگر
راه های مختلفی برای استفاده از انیمیشن های CSS در وردپرس وجود دارد، اما افزودن افکت شناور به تصاویر بسیار موثر است. انیمیشن محو به این معنی است که تصاویر شما به آرامی ظاهر می شوند یا زمانی که بازدیدکنندگان روی آنها قرار می گیرند ناپدید می شوند.
این کار افراد را تشویق می کند تا با تصاویر شما تعامل داشته باشند و حتی می تواند یک عنصر داستان سرایی به صفحه اضافه کند. برای مثال، تصاویر مختلف ممکن است با حرکت بازدیدکننده در صفحه محو شوند.
امیدواریم این مقاله به شما در یادگیری نحوه محو کردن تصاویر بر روی موس در وردپرس کمک کرده باشد. همچنین ممکن است بخواهید راهنمای ما در مورد نحوه انتخاب بهترین نرم افزار طراحی وب و انتخاب های متخصص ما از بهترین افزونه های بازشو وردپرس را ببینید.
پس از آن، ادامه دهید و قطعه را با همان فرآیندی که در بالا توضیح داده شد، زنده کنید.
انیمیشنها راه آسانی برای جذابتر کردن وبسایت شما هستند و حتی میتوانند توجه بازدیدکنندگان را به مهمترین محتوای صفحهتان، مانند لوگوی وبسایت یا دعوت به عمل، جلب کنند.
پس از آن، به بخش «درج» بروید، اما این بار «کد کوتاه» را انتخاب کنید.
گزینه دیگر اضافه کردن انیمیشن های محو به تصاویر برجسته یا ریز عکس های پست است. اینها تصویر اصلی پست هستند و اغلب در کنار عنوان در صفحه اصلی، صفحات آرشیو و سایر قسمت های مهم وب سایت شما ظاهر می شوند.
اگر هر یک از این اعداد را تغییر دادید، مطمئن شوید که آنها را در تمام ویژگی ها (webkit، moz، ms و o) تغییر داده اید، بنابراین افکت محو شدن در هر مرورگر یکسان به نظر می رسد.
با WPCode، حتی مبتدیان می توانند کد وب سایت خود را بدون خطر اشتباهات و اشتباهات تایپی ویرایش کنند که می تواند باعث بسیاری از خطاهای رایج وردپرس شود.
در ویرایشگر SeedProd، به سادگی روی محتوایی که می خواهید متحرک سازی کنید کلیک کنید و سپس برگه Advanced را در منوی سمت چپ انتخاب کنید.
اما این بار کد زیر را به ویرایشگر اضافه کنید:
خبر خوب این است که WPCode به شما امکان می دهد کدهای کوتاه سفارشی ایجاد کنید. شما می توانید این کد کوتاه را در هر صفحه ای قرار دهید و وردپرس فقط در آن صفحه افکت های محو را نشان می دهد.
برای انجام این کار، به سادگی یک قطعه کد سفارشی ایجاد کنید و کد انیمیشن محو را طبق همان فرآیندی که در بالا توضیح داده شد، اضافه کنید. سپس، روی دکمه «ذخیره قطعه» کلیک کنید.
پس از فعال سازی، به قطعه کد » افزودن قطعه.
جلوههای محو یک راه سرگرمکننده برای جذابتر کردن تصاویر است، اما راههای زیادی برای استفاده از انیمیشنها در وردپرس وجود دارد. به عنوان مثال، ممکن است از انیمیشنهای فلیپباکس برای نشان دادن متن هنگامی که بازدیدکننده روی یک تصویر قرار میگیرد، استفاده کنید، یا از جلوههای زوم استفاده کنید تا کاربران بتوانند عکس را با جزئیات بیشتری کاوش کنند.
پس از آن، به سادگی یک انیمیشن را از منوی کشویی «انیمیشن ورودی» انتخاب کنید، که شامل طیف گسترده ای از جلوه های محو مختلف است.
برای اطلاعات بیشتر، لطفاً راهنمای ما در مورد نحوه ایجاد صفحه فرود با وردپرس را ببینید.
در نهایت بر روی “ذخیره قطعه” کلیک کنید تا قطعه CSS زنده شود.
در ویرایشگر کد، قطعه کد زیر را اضافه کنید:
با در نظر گرفتن این موضوع، ممکن است بخواهید از جلوه های محو فقط در یک صفحه یا پست خاص استفاده کنید.
پس از آن، به کادر «درج» بروید و «درج خودکار» را انتخاب کنید. سپس، منوی کشویی “Location” را باز کرده و “Site Wide Header” را انتخاب کنید.
پس از آن، شما آماده اسکرول به بالای صفحه هستید و روی دکمه “غیر فعال” کلیک کنید، بنابراین به “فعال” تغییر می کند.
اکنون میتوانید به هر صفحه، پست یا منطقه آماده برای ابزارک بروید و یک بلوک جدید «کد کوتاه» ایجاد کنید. سپس، به سادگی کد کوتاه WPCode را در آن بلوک قرار دهید.
اگر این مقاله را دوست داشتید، لطفاً در کانال یوتیوب ما برای آموزش های ویدیویی وردپرس مشترک شوید. شما همچنین می توانید ما را در پیدا کنید توییتر و فیس بوک
سپس میتوانید ادامه دهید و برای گسترش بخش «افکتهای انیمیشن» کلیک کنید.
برخلاف برخی انیمیشنهای دیگر، تصویر محو شده روی افکت ماوس ظریف است، بنابراین تأثیر منفی بر تجربه خواندن بازدیدکننده یا هر بهینهسازی تصویری که انجام دادهاید، نخواهد داشت.
برای شروع، عنوانی را برای قطعه کد سفارشی تایپ کنید. این می تواند هر چیزی باشد که به شما کمک کند قطعه را در داشبورد وردپرس شناسایی کنید.
پس از آن، می توانید ادامه دهید و با استفاده از همان فرآیندی که در بالا توضیح داده شد، قطعه کد را زنده کنید.
اگر میخواهید جلوههای مختلف را امتحان کنید، SeedProd بیش از 40 انیمیشن دارد که میتوانید به تصاویر، متن، دکمهها، ویدیوها و موارد دیگر اضافه کنید. شما حتی می توانید تمام بخش ها و ستون ها را تنها با چند کلیک متحرک کنید.
برای اطلاعات بیشتر در مورد نحوه قرار دادن کد کوتاه، لطفاً راهنمای ما در مورد نحوه اضافه کردن کد کوتاه در وردپرس را ببینید.
این قطعه کد زمانی که کاربر ماوس خود را روی آن قرار می دهد، هر تصویر را به مدت 2 ثانیه محو می کند. برای اینکه تصویر آهستهتر محو شود، کافی است «2s ease» را با عدد بالاتر جایگزین کنید. اگر می خواهید عکس را سریعتر محو کنید، از «1s ease» یا کوچکتر استفاده کنید.
همچنین میتوانید با تغییر دادن مقدار «Opacity» را بیشتر یا کمتر کنید opacity:0.6 خط
وقتی ظاهر شد، روی “Use Snippet” کلیک کنید.
اکنون، اگر ماوس را روی هر تصویری در وب سایت وردپرس خود قرار دهید، افکت محو شدن را در عمل مشاهده خواهید کرد.
افزودن انیمیشن های محو تصویر به صفحات جداگانه
وقتی از قطعه راضی بودید، به بخش «درج» بروید. WPCode میتواند کد شما را به مکانهای مختلف اضافه کند، مانند بعد از هر پست، فقط frontend یا فقط مدیر.
برای افزودن یک افکت محو شدن به تمام تصاویر خود، روی «درج خودکار» کلیک کنید. سپس، منوی کشویی “Location” را باز کرده و “Site Wide Header” را انتخاب کنید.
اولین کاری که باید انجام دهید این است که افزونه رایگان WPCode را نصب و فعال کنید. برای جزئیات بیشتر، راهنمای گام به گام ما در مورد نحوه نصب افزونه وردپرس را ببینید.
این یک کد کوتاه ایجاد میکند که میتوانید آن را به هر صفحه، پست یا منطقه آماده برای ویجت اضافه کنید.
استفاده از افکت محو شدن برای هر تصویر میتواند حواستان را پرت کند، بهخصوص اگر یک وبسایت عکاسی، یک فروشگاه عکس استوک یا هر سایت دیگری که تصاویر زیادی دارد راهاندازی میکنید.
.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
ساده ترین راه برای افزودن افکت محو شدن به تمام تصاویر خود استفاده از WPCode است. این افزونه رایگان به شما این امکان را می دهد که به راحتی کدهای سفارشی را در وردپرس بدون نیاز به ویرایش فایل های تم خود اضافه کنید.
برای افزودن یک انیمیشن محو به تصاویر کوچک پست خود، به سادگی یک قطعه کد سفارشی جدید را با همان فرآیندی که در بالا توضیح داده شد ایجاد کنید.
ما باید CSS سفارشی را به وردپرس اضافه کنیم، بنابراین منوی کشویی “Code Type” را باز کرده و “CSS Snippet” را انتخاب کنید.
در این مقاله به شما نشان خواهیم داد که چگونه یک افکت تصویر محو شده بر روی ماوس در وردپرس اضافه کنید.
