نمایش انیمیشن سفارشی هنگام کلیک با ماوس در سایت

سلام رفیق! حالت چطوره؟ 🧐 امیدوارم هر جا هستی، حال دلت حسابی خوب و پرانرژی باشه 🙂

تاحالا برات پیش اومده که وارد یه سایتی بشی و با هر کلیک ماوس، یه افکت یا انیمیشن بامزه ظاهر بشه؟ این جور افکت‌های کوچیک شاید ساده به نظر بیان، ولی واقعاً می‌تونن یه سایت معمولی رو به یه تجربه تعاملی و جذاب تبدیل کنن. باعث می‌شن کاربر حس کنه با یه محیط زنده و پویا روبروئه، نه صرفاً یه صفحه خشک و ثابت.

اگه دوست داری همچین قابلیت جالبی رو به سایتت اضافه کنی – اونم بدون نیاز به دانش پیچیده برنامه‌نویسی – جای درستی اومدی! تو این مقاله قراره بهت یاد بدم که چطور با چند حرکت ساده، یه انیمیشن سفارشی برای کلیک چپ ماوس طراحی و پیاده‌سازی کنی. پس این مقاله رو از دست نده و تا پایان این آموزش از سایت رایا وردپرس همراه من باش 🙂💗

🙂 کلیک ماوس و نقش طلایی اون در تجربه کاربری

هر بار که کاربر روی قسمت های مختلف سایتت کلیک می‌کنه، در واقع داره با محتوای تو ارتباط برقرار می‌کنه. این یه فرصت طلاییه تا تجربه‌ای خاص و به‌یادموندنی براش بسازی.

نمایش انیمیشن سفارشی هنگام کلیک ماوس می‌تونه:

×

آکاردئون خفن به سبک دیوار بساز!

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

• توجه کاربر رو به بخش‌های مهم جلب کنه
• بازخورد بصری جذابی به تعامل‌ها بده
• به هویت بصری برندت قدرت ببخشه
• یه حس مدرن و حرفه‌ای به سایتت بده

در واقع، همین جزئیات ریز هستن که یه سایت معمولی رو از یه وب‌سایت خاص و به‌یادموندنی جدا می‌کنن. حالا که می‌دونیم چرا این قابلیت ارزشمنده، بریم ببینیم برای پیاده‌سازی‌اش چه چیزهایی لازم داریم.

✨ نمایش انیمیشن سفارشی هنگام کلیک با ماوس در سایت

خب، نوبتی هم باشه نوبت اجرای کاره! 💪
با این قابلیت جذاب، هر بار که کاربر روی سایتت کلیک می‌کنه، یه انیمیشن دلخواه، درست همون‌جایی که کلیک شده ظاهر می‌شه و بعد از چند لحظه به‌آرومی ناپدید می‌شه. 🖱️

🧐 برای شروع کارمون چی لازم داریم؟

قدم 1: یه فایل انیمیشن JSON نیازه

اولین چیزی که نیاز داری، یه فایل انیمیشن با فرمت JSON هست. این فایل رو می‌تونی از سایت‌هایی مثل LottieFiles بگیری یا خودت درست کنی. من تو این آموزش از یه فایل نمونه استفاده می‌کنم که لینکش رو برات پایین میزارم و میتونی دانلود کنی:

×

ایجاد دکمه کپی در کلیپ‌ بورد فقط با المنتور و بدون افزونه جانبی

مطالعه

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

🔄 نکته مهم

هیچ اجباری نیست که حتماً از همین انیمیشنی که ما استفاده کردیم، استفاده کنی 😉
می‌تونی خیلی راحت خودت یه انیمیشن جذاب‌تر و مطابق سلیقه‌ت با فرمت JSON پیدا کنی و جایگزینش کنی. ✨

×

طراحی یک باکس تبلیغاتی جذاب در المنتور

مطالعه

برای این کار، کافیه عبارت «click animation» رو توی سایت‌هایی مثل LottieFiles یا IconScout سرچ کنی. 🔍 کلی انیمیشن آماده و رایگان اونجا منتظرته!

در ضمن🎓یه مقاله جدا هم نوشتیم درباره اینکه چطور انیمیشن‌های لوتی رو به صورت رایگان دانلود و استفاده کنیم — یه نگاه بندازی ضرر نمی‌کنی! 👀📥

قدم 2: بارگذاری فایل انیمیشن در کتابخانه وردپرس

برای اینکه بتونی از انیمیشن موردنظرت استفاده کنی، اول باید فایلش رو تو سایتت بارگذاری کنی. اگه با وردپرس و المنتور کار می‌کنی، خیالت راحت باشه چون این کار خیلی ساده‌ست! 😎👇

اما یه نکته مهم ⚠️
وردپرس به‌صورت پیش‌فرض اجازه آپلود فایل‌های JSON رو نمی‌ده و احتمالاً با این خطا مواجه می‌شی:
“با عرض پوزش، شما مجاز به بارگذاری این نوع پرونده نیستید.”

🛠️ راهکار چیه؟ این مراحل رو برو تا بتونی فایل JSON انیمیشنت رو در کتابخانه وردپرس آپلود کنی:

×

ترجمه متن پیام های خطا در فرم المنتور: حرفه‌ ای ها اینطور فرم‌ ها را فارسی می‌ کنند

مطالعه

1️⃣ وارد پیشخوان وردپرس شو.
2️⃣ یه برگه جدید بساز.
3️⃣ روی دکمه ویرایش با المنتور کلیک کن.
4️⃣ در صفحه المنتور، ویجت Lottie رو پیدا کن و بکش بنداز تو صفحه.
5️⃣ حالا فایل JSON انیمیشنت رو تو همین ویجت آپلود کن.
6️⃣ بعد از آپلود، میتونی از کتابخانه وردپرس، لینک فایل JSON رو کپی کنی.
7️⃣ این لینک رو یه گوشه نگه دار، چون قراره توی کدی که در ادامه بهت میگم، ازش استفاده کنیم.

قدم 3: اضافه کردن اسکریپت انیمیشن کلیک ماوس

خب! حالا که لینک فایل انیمیشن JSON رو داری، وقتشه اون کدی رو اضافه کنیم که باعث می‌شه انیمیشن هنگام کلیک ماوس نمایش داده بشه. برای این کار باز هم از المنتور کمک می‌گیریم. 💻✨

مراحل رو قدم‌به‌قدم دنبال کن:

×

ایجاد دکمه کپی در کلیپ‌ بورد فقط با المنتور و بدون افزونه جانبی

مطالعه

1️⃣ برو به پیشخوان وردپرس
2️⃣ از منوی سمت راست، وارد بخش المنتور سپس کدهای سفارشی (Custom Code) شو

3️⃣ روی دکمه افزودن جدید (Add New) کلیک کن
4️⃣ یه عنوان برای کدت بذار، مثلاً: "click animation" تا بعداً راحت پیداش کنی
5️⃣ حالا اسکریپتی که پایین برات گذاشتم رو کپی کن و توی بخش کد (Code) پیست کن

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

6️⃣ تو تنظیمات نمایش، انتخاب کن که این کد توی کل سایت اجرا بشه و موقعیت کد رو هم تگ پایانی body انتخاب کن.

7️⃣ در نهایت، کد رو ذخیره و فعال کن ✅

×

ایجاد افکت زوم و چرخش تصویر در المنتور

مطالعه

⚠️ نکته مهم:
توی این کد، اونجایی که نوشته path: '...'، باید لینک فایل انیمیشن JSONت رو بین ' ' قرار بدی — همون لینکی که از طریق ویجت Lottie در المنتور گرفتی و گفتیم نگهش دار. 🔗

همچنین، با تغییر مقدار containerSize می‌تونی اندازه آیکون انیمیشن رو با توجه به طراحی سایتت کوچیک‌تر یا بزرگ‌تر کنی. اینطوری ظاهر انیمیشن دقیقاً مطابق سلیقه و استایل سایتت می‌شه!

حرف آخر

دیدن چقدر راحت تونستی با چند تا قدم ساده، یه افکت جذاب برای کلیک ماوس سایتت اضافه کنی؟ حالا دیگه سایت تو یه قدم جلوتر از بقیه است و مطمئن باش کاربرا از این توجه به جزئیاتت خوششون میاد.

×

ایجاد افکت زوم و چرخش تصویر در المنتور

مطالعه

اگه سوالی داشتی یا به مشکلی خوردی، نگران نباش. تو کامنت‌ها ازم بپرس، با کمال میل کمکت می‌کنم.

امیدوارم این آموزش برات مفید باشه و حسابی ازش استفاده کنی.

×

ایجاد هاور افکت زوم و محو شدن (Blur) باکس در المنتور

مطالعه