برخلاف برخی انیمیشن‌های دیگر، تصویر محو شده روی افکت ماوس ظریف است، بنابراین تأثیر منفی بر تجربه خواندن بازدیدکننده یا هر بهینه‌سازی تصویری که انجام داده‌اید، نخواهد داشت.
پس از آن، به بخش «درج» بروید، اما این بار «کد کوتاه» را انتخاب کنید.
پس از فعال سازی، به قطعه کد » افزودن قطعه.
اگر این مقاله را دوست داشتید، لطفا در ما مشترک شوید کانال یوتیوب برای آموزش ویدیویی وردپرس. شما همچنین می توانید ما را در پیدا کنید توییتر و فیس بوک.
منبع: https://www.wpbeginner.com/wp-themes/fade-images-mouseover-wordpress/
آیا می خواهید تصاویر را روی ماوس در وردپرس محو کنید؟
برای انجام این کار، به سادگی یک قطعه کد سفارشی ایجاد کنید و کد انیمیشن محو را طبق همان فرآیندی که در بالا توضیح داده شد، اضافه کنید. سپس، روی دکمه «ذخیره قطعه» کلیک کنید.
برای اطلاعات بیشتر در مورد نحوه قرار دادن کد کوتاه، لطفاً راهنمای ما در مورد نحوه اضافه کردن کد کوتاه در وردپرس را ببینید.
در ویرایشگر SeedProd، به سادگی روی محتوایی که می خواهید متحرک سازی کنید کلیک کنید و سپس برگه Advanced را در منوی سمت چپ انتخاب کنید.
گزینه دیگر اضافه کردن انیمیشن های محو به تصاویر برجسته یا ریز عکس های پست است. اینها تصویر اصلی پست هستند و اغلب در کنار عنوان در صفحه اصلی، صفحات آرشیو و سایر قسمت های مهم وب سایت شما ظاهر می شوند.
اکنون، اگر ماوس را روی هر تصویری در وب سایت وردپرس خود قرار دهید، افکت محو شدن را در عمل مشاهده خواهید کرد.
با این اوصاف، اجازه دهید به شما نشان دهیم که چگونه در وردپرس روی تصاویر خود یک محو شدن اضافه کنید.
در اینجا، به سادگی ماوس خود را روی «Add Your Custom Code» قرار دهید.
برای افزودن یک افکت محو شدن به تمام تصاویر خود، روی «درج خودکار» کلیک کنید. سپس، منوی کشویی “Location” را باز کرده و “Site Wide Header” را انتخاب کنید.
خبر خوب این است که WPCode به شما امکان می دهد کدهای کوتاه سفارشی ایجاد کنید. شما می توانید این کد کوتاه را در هر صفحه ای قرار دهید و وردپرس فقط در آن صفحه افکت های محو را نشان می دهد.
اکنون می‌توانید به هر صفحه، پست یا منطقه آماده برای ابزارک بروید و یک بلوک جدید «کد کوتاه» ایجاد کنید. سپس، به سادگی کد کوتاه WPCode را در آن بلوک قرار دهید.
با محو کردن تصاویر برجسته روی ماوس، می توانید سایت خود را چشم نوازتر و جذاب تر کنید، بدون اینکه تک تک تصاویر را در وبلاگ یا وب سایت وردپرس خود متحرک کنید.
استفاده از افکت محو شدن برای هر تصویر می‌تواند حواس‌تان را پرت کند، به‌خصوص اگر یک وب‌سایت عکاسی، یک فروشگاه عکس استوک یا هر سایت دیگری که تصاویر زیادی دارد راه‌اندازی می‌کنید.
اکنون، می‌توانید ماوس را روی هر تصویر مشخصی ببرید تا انیمیشن محو را در عمل ببینید.
پس از آن، به سادگی یک انیمیشن را از منوی کشویی «انیمیشن ورودی» انتخاب کنید، که شامل طیف گسترده ای از جلوه های محو مختلف است.
در نهایت بر روی “ذخیره قطعه” کلیک کنید تا قطعه CSS زنده شود.
اما این بار کد زیر را به ویرایشگر اضافه کنید:
انیمیشن‌ها راه آسانی برای جذاب‌تر کردن وب‌سایت شما هستند و حتی می‌توانند توجه بازدیدکنندگان را به مهم‌ترین محتوای صفحه‌تان، مانند لوگوی وب‌سایت یا دعوت به عمل، جلب کنند.
ما باید CSS سفارشی را به وردپرس اضافه کنیم، بنابراین منوی کشویی “Code Type” را باز کرده و “CSS Snippet” را انتخاب کنید.
این یک کد کوتاه ایجاد می‌کند که می‌توانید آن را به هر صفحه، پست یا منطقه آماده برای ویجت اضافه کنید.
با WPCode، حتی مبتدیان می توانند کد وب سایت خود را بدون خطر اشتباهات و اشتباهات تایپی ویرایش کنند که می تواند باعث بسیاری از خطاهای رایج وردپرس شود.
وقتی ظاهر شد، روی “Use Snippet” کلیک کنید.
برای اطلاعات بیشتر، لطفاً راهنمای ما در مورد نحوه ایجاد صفحه فرود با وردپرس را ببینید.
در ویرایشگر کد، قطعه کد زیر را اضافه کنید:
وقتی از قطعه راضی بودید، به بخش «درج» بروید. WPCode می‌تواند کد شما را به مکان‌های مختلف اضافه کند، مانند بعد از هر پست، فقط frontend یا فقط مدیر.
این کار افراد را تشویق می کند تا با تصاویر شما تعامل داشته باشند و حتی می تواند یک عنصر داستان سرایی به صفحه اضافه کند. برای مثال، تصاویر مختلف ممکن است با حرکت بازدیدکننده در صفحه محو شوند.
امیدواریم این مقاله به شما در یادگیری نحوه محو کردن تصاویر بر روی موس در وردپرس کمک کرده باشد. همچنین ممکن است بخواهید راهنمای ما در مورد نحوه انتخاب بهترین نرم افزار طراحی وب و انتخاب های متخصص ما از بهترین افزونه های بازشو وردپرس را ببینید.
برای شروع، عنوانی را برای قطعه کد سفارشی تایپ کنید. این می تواند هر چیزی باشد که به شما کمک کند قطعه را در داشبورد وردپرس شناسایی کنید.
پس از آن، به کادر «درج» بروید و «درج خودکار» را انتخاب کنید. سپس، منوی کشویی “Location” را باز کرده و “Site Wide Header” را انتخاب کنید.
این قطعه کد زمانی که کاربر ماوس خود را روی آن قرار می دهد، هر تصویر را به مدت 2 ثانیه محو می کند. برای اینکه تصویر آهسته‌تر محو شود، کافی است «2s ease» را با عدد بالاتر جایگزین کنید. اگر می خواهید عکس را سریعتر محو کنید، از «1s ease» یا کوچکتر استفاده کنید.
پس از آن، می توانید ادامه دهید و با استفاده از همان فرآیندی که در بالا توضیح داده شد، قطعه کد را زنده کنید.
در این مقاله به شما نشان خواهیم داد که چگونه یک افکت تصویر محو شده بر روی ماوس در وردپرس اضافه کنید.
پس از آن، ادامه دهید و قطعه را با همان فرآیندی که در بالا توضیح داده شد، زنده کنید.
جلوه‌های محو یک راه سرگرم‌کننده برای جذاب‌تر کردن تصاویر است، اما راه‌های زیادی برای استفاده از انیمیشن‌ها در وردپرس وجود دارد. به عنوان مثال، ممکن است از انیمیشن‌های فلیپ‌باکس برای نشان دادن متن هنگامی که بازدیدکننده روی یک تصویر قرار می‌گیرد، استفاده کنید، یا از جلوه‌های زوم استفاده کنید تا کاربران بتوانند عکس را با جزئیات بیشتری کاوش کنند.
اگر می‌خواهید جلوه‌های نمایش ماوس تصویر بیشتری اضافه کنید، راهنمای ما در مورد نحوه افزودن جلوه‌های شناور تصویر در وردپرس را ببینید.
یک انیمیشن محو یا محو ساده زمانی که کاربر موس خود را روی یک تصویر می‌برد، می‌تواند سایت شما را جذاب‌تر کند. همچنین بازدیدکنندگان را تشویق می‌کند تا با محتوای شما تعامل داشته باشند، که می‌تواند آنها را برای مدت طولانی‌تری در سایت شما نگه دارد.
پس از آن، شما آماده اسکرول به بالای صفحه هستید و روی دکمه “غیر فعال” کلیک کنید، بنابراین به “فعال” تغییر می کند.
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;
}
اولین کاری که باید انجام دهید این است که آن را نصب و فعال کنید پلاگین WPCode رایگان. برای جزئیات بیشتر، راهنمای گام به گام ما در مورد نحوه نصب افزونه وردپرس را ببینید.
اگر می خواهید جلوه های مختلف را امتحان کنید، پس SeedProd دارای بیش از 40 انیمیشن است که می توانید به تصاویر، متن، دکمه ها، فیلم ها و موارد دیگر اضافه کنید. شما حتی می توانید تمام بخش ها و ستون ها را تنها با چند کلیک متحرک کنید.
راه های مختلفی برای استفاده از انیمیشن های CSS در وردپرس وجود دارد، اما افزودن افکت شناور به تصاویر بسیار موثر است. انیمیشن محو به این معنی است که تصاویر شما به آرامی ظاهر می شوند یا زمانی که بازدیدکنندگان روی آنها قرار می گیرند ناپدید می شوند.
.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. این افزونه رایگان به شما این امکان را می دهد که به راحتی کدهای سفارشی را در وردپرس بدون نیاز به ویرایش فایل های تم خود اضافه کنید.
همچنین می‌توانید با تغییر دادن مقدار «Opacity» را بیشتر یا کمتر کنید opacity:0.6 خط
با در نظر گرفتن این موضوع، ممکن است بخواهید از جلوه های محو فقط در یک صفحه یا پست خاص استفاده کنید.
سپس می‌توانید ادامه دهید و برای گسترش بخش «افکت‌های انیمیشن» کلیک کنید.
برای افزودن یک انیمیشن محو به تصاویر کوچک پست خود، به سادگی یک قطعه کد سفارشی جدید را با همان فرآیندی که در بالا توضیح داده شد ایجاد کنید.
پس از انجام این کار، روی دکمه “به روز رسانی” یا “انتشار” کلیک کنید تا کد کوتاه فعال شود. سپس می‌توانید از آن صفحه، صفحه یا منطقه آماده ابزارک دیدن کنید تا اثر محو شدن روی ماوس را ببینید.