تخم‌مرغ شانسی انیمیشنی برای سایت : کد آماده + پاپ‌آپ تخفیف بدون افزونه

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

نتیجه نهایی که بدست می آورید:

egg
0%

معرفی تخم‌مرغ شانسی سایت

این تخم‌مرغ شانسی یک عنصر گیمیفیکیشن جذاب است که کاربران را تشویق به کلیک سریع و تعامل با سایت می‌کند.
ویژگی‌ها:

  • انیمیشن ملایم و جذاب

  • رنگ‌های شاد و قابل سفارشی

  • پاپ‌آپ تخفیف یا هدیه بعد از شکستن

  • بدون نیاز به افزونه

  • کاملاً سبک و بهینه برای سرعت سایت

این کد را می‌توانید در هر صفحه سایت با HTML Widget المنتور یا در قالب سایت‌های HTML قرار دهید:

 
 

html

				
					<div id="egg-container">
  <img decoding="async" id="egg" src="egg.png" alt="تخم‌مرغ شانسی سایت" />
  <div id="crack-count">0%</div>
</div>
				
			

css

				
					<style>
#egg-container {
  position: relative;
  width: 200px;
  margin: auto;
  cursor: pointer;
  text-align: center;
}

#egg {
  width: 100%;
  transition: transform 0.1s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#crack-count {
  position: absolute;
  bottom: -30px;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  color: #555;
}
</style>
				
			

js

				
					<script>
let clicks = 0;
const maxClicks = 50; // تعداد کلیک برای شکستن

const egg = document.getElementById("egg");
const counter = document.getElementById("crack-count");

egg.addEventListener("click", () => {
  clicks++;
  egg.style.transform = "scale(0.95)";
  setTimeout(() => egg.style.transform = "scale(1)", 80);

  const percent = Math.min(100, Math.floor((clicks / maxClicks) * 100));
  counter.textContent = percent + "%";

  if (clicks >= maxClicks) {
    egg.src = "egg-broken.png";
    counter.textContent = "شکست! 🎉";
    setTimeout(() => {
      if (typeof elementorProFrontend !== "undefined") {
        elementorProFrontend.modules.popup.showPopup({ id: 123 }); // جایگزین با آیدی پاپ‌آپ شما
      }
    }, 400);
  }
});
</script>
				
			

راهنمای استفاده مرحله به مرحله

  • عکس تخم‌مرغ سالم (egg.png) و شکسته (egg-broken.png) را در سایت خود آپلود کنید.

  • کد HTML بالا را در المنتور HTML Widget صفحه مورد نظر قرار دهید.

  • آیدی پاپ‌آپ المنتور پرو خود را جایگزین 123 کنید.

  • اگر می‌خواهید هایلایت آبی کلیک حذف شود، CSS داخل “<style> ” اعمال شده و نیازی به تغییر ندارد.

  • maxClicks را برای تعیین تعداد کلیک لازم برای شکستن تخم‌مرغ تغییر دهید.

نکات مهم و پیشنهادات حرفه‌ای

  • مطمئن شوید پاپ‌آپ Display Condition درست تنظیم شده باشد.

  • برای بهبود UX، صدا یا افکت ترک خوردن می‌توانید اضافه کنید.

  • تصاویر تخم‌مرغ بهتر است PNG با بک‌گراند شفاف یا JPG با کیفیت بالا باشد.

  • این کد کاملاً سبک است و روی سرعت سایت تاثیری منفی ندارد.

  • اگر می‌خواهید بازدیدکننده در موبایل تجربه بهتری داشته باشد، از نسخه ۳D یا انیمیشن CSS ساده استفاده کنید.

مناسبت‌های ایده‌آل برای استفاده از تخم‌مرغ شانسی

  • جشن‌ها و اعیاد ملی و مذهبی

    • نوروز، شب یلدا، عید فطر، کریسمس، هالووین

    • مثال: تخم‌مرغ با تم یلدایی + پاپ‌آپ تخفیف آجیل و انار

  • روزهای خاص فروشگاهی

    • جمعه سیاه (Black Friday)، روز ولنتاین، روز مادر/پدر

    • مثال: پاپ‌آپ تخفیف ۱۰٪ روی محصولات منتخب

  • مناسبت‌های فصلی و کمپین‌های بازاریابی

    • تابستان، پاییز، زمستان، بهار

    • مثال: تخم‌مرغ با رنگ‌های فصلی و افکت انیمیشنی

  • رویدادهای آنلاین و مسابقات

    • تولد سایت، کمپین‌های جمع‌آوری ایمیل، قرعه‌کشی‌ها

انواع سایت هایی که این طرح برایشان مناسب است

  • فروشگاه‌های آنلاین / eCommerce

    • فروشگاه پوشاک، لوازم آرایشی، محصولات دیجیتال، خوراکی

    • هدف: افزایش تعامل و ارائه کد تخفیف

  • سایت‌های آموزشی و دوره‌های آنلاین

    • دوره‌ها، وبینارها، کتاب‌های الکترونیک

    • هدف: تشویق کاربر به ثبت‌نام یا دانلود منابع رایگان

  • وب‌سایت‌های سرگرمی و بلاگ‌ها

    • وب‌سایت‌های بازی، سرگرمی، هنر و گرافیک

    • هدف: افزایش زمان حضور کاربر و جذاب کردن تجربه UX

  • سایت‌های شرکتی با کمپین‌های ویژه

    • معرفی محصول جدید، کمپین CSR، کمپین‌های تبلیغاتی

    • هدف: جلب توجه بازدیدکننده و تعامل مستقیم

  • سایت‌های فست‌فود و رستوران‌ها

    • ارائه تخفیف لحظه‌ای یا جایزه رایگان با کلیک روی تخم‌مرغ

چرا این طرح مؤثر است

  • کاربر را به کلیک کردن و تعامل فعال تشویق می‌کند

  • تجربه کاربری جذاب و گیمیفیکیشن ایجاد می‌کند

  • قابل سفارشی‌سازی برای مناسبت‌ها و برندینگ است

  • بدون افزونه سبک و بهینه برای سرعت سایت

جدیدترین دانلودی های بارنگ

5 1 رای
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
قدیمی‌ترین
تازه‌ترین بیشترین رأی
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها

WPamooz

یلـــــدات مبارک

کد تخفیف ویژه یلدا: YALDA

0
افکار شما را دوست داریم، لطفا نظر دهید.x