چگونه توی وبسایتمون از انیمیشن چهارشنبه سوری استفاده کنیم ؟

انفجار

بعد از ورود به برگه و ویرایش از طریق المنتور باید ویچت html رو به برگمون اضافه کنیم.

ویجت Html رو به سکشن اضافه میکنیم.

کد های بخش Html

<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>

سپس از بخش پیشرفته و Css سفارشی کد های Css رو اضافه میکنیم.

کد های بخش CSS

body {
  background: 
    linear-gradient(#0007, #0000),
    #123;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

@keyframes firework {
  0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}

/* @keyframes fireworkPseudo {
  0% { transform: translate(-50%, -50%); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}
 */
.firework,
.firework::before,
.firework::after
{
  --initialSize: 0.5vmin;
  --finalSize: 45vmin;
  --particleSize: 0.2vmin;
  --color1: yellow;
  --color2: khaki;
  --color3: white;
  --color4: lime;
  --color5: gold;
  --color6: mediumseagreen;
  --y: -30vmin;
  --x: -50%;
  --initialY: 60vmin;
  content: "";
  animation: firework 2s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  width: var(--initialSize);
  aspect-ratio: 1;
  background: 
    /*
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
    */
    
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
    
    /* bottom right */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
    
    /* bottom left */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
    
    /* top left */
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
    
    /* top right */
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
    ;
  background-size: var(--initialSize) var(--initialSize);
  background-repeat: no-repeat;
}

سپس روی بروز رسانی کلیک میکنیم.

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

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

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

با استفاده از ویجت HTML، می‌توانید:

• فرم‌های سفارشی ایجاد کنید.
• اسکریپت‌های جاوا اسکریپت را برای افزودن انیمیشن یا تعامل به وب‌سایت خود اضافه کنید.
• کدهای iFrame را برای نمایش محتوای وب‌سایت‌های دیگر جاسازی کنید.
• عناصر HTML سفارشی مانند جداول، دکمه‌ها و منوها را طراحی کنید.
• بخش‌های پویا را به وب‌سایت خود اضافه کنید که با اطلاعات پایگاه داده یا API ها تغییر می‌کنند.

مزایای استفاده از ویجت HTML المنتور:

• انعطاف‌پذیری: این ویجت به شما امکان می‌دهد تقریباً هر نوع محتوای HTML یا اسکریپتی را به وب‌سایت خود اضافه کنید.
• کنترل دقیق: شما می‌توانید به طور کامل بر ظاهر و عملکرد کدهای خود کنترل داشته باشید.
• سادگی: استفاده از این ویجت بسیار آسان است و نیازی به دانش برنامه‌نویسی پیشرفته نیست.

نکاتی برای استفاده از ویجت HTML المنتور:

• از کدهای تمیز و معتبر استفاده کنید.
• مراقب امنیت کدهای خود باشید.
• از ویجت HTML فقط برای اضافه کردن کدهای ضروری استفاده کنید.
• قبل از انتشار تغییرات خود، آنها را به طور کامل تست کنید.

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

رو خریداری کنید.

اگر میخوای یاد بگیری که چگونه میتونیم به سایتمون فونت اضافه کنیم میتونی از آموزش جلسه چهاردهم استفاده کنید.