Acrobatic Preloader

🔗https://codepen.io/jkantner/pen/VwrYggy
#️⃣#code
🆔@IR_javascript

شمارنده قیمت

این شمارنده قیمت به شما امکان می دهد قیمت را با استفاده از نقاط مشخص شده روی اعداد تنظیم کنید. شما می توانید نوار لغزنده را به طور مستقیم به نقطه دلخواه خود بکشید یا روی هر نقطه از مقیاس کلیک کنید.

🔗https://codepen.io/konstantindenerz/pen/zYJzvEQ
#️⃣#code
🆔@IR_javascript

Revealing Slider

🔗https://codepen.io/Prakash286/pen/RwgPPba
#️⃣#code
🆔@IR_javascript

Old Film Effect

🔗https://codepen.io/josetxu/pen/yLjwOwQ
#️⃣#code
🆔@IR_javascript

Social share button

🔗https://codepen.io/yancy/pen/qyMdod
#️⃣#code
🆔@IR_javascript

Preloader
🔗https://codepen.io/lexadio19/pen/vYJbmrE
#️⃣#code
🆔@IR_javascript

Skating bunny

🔗https://codepen.io/Yakudoo/pen/poqazQo
#️⃣#code
🆔@IR_javascript

Draw With WebGL Flowers 2

🔗https://codepen.io/ksenia-k/pen/RwqrxBG
#️⃣#code
🆔@IR_javascript

نوار پیشرفت انیمیشنی
پیاده‌سازی این نوار پیشرفت بسیار ساده است و فقط به دو مرحله نیاز دارد:

1. استایل‌دهی CSS:

در این مرحله باید ظاهر نوار پیشرفت را با استفاده از CSS تعیین کنیم. این شامل رنگ، اندازه و شکل نوار می‌شود. همچنین باید انیمیشنی را به خود نوار اضافه کنیم تا ظاهر بارگیری جذاب‌تر شود.

2. کد جاوا اسکریپت برای انیمیشن:

در این پیاده‌سازی، ما بارگیری را از 0٪ تا 80٪ نشان می‌دهیم تا به طور واضح اثر پر شدن روان را نشان دهیم.

🔗https://codepen.io/katrin_profrontend/pen/ZENvOYV

#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

نوار پایین متحرک
مجموعه‌ای از نوارهای پایین متحرک که با استفاده از CSS و JavaScript پیاده‌سازی شده‌اند.

🔗https://codepen.io/chrisbautista/pen/NWXjqLN

#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

Neural Noise

افکت پس‌زمینه‌ای که به پلازما شبیه است. پرتوهای نور با حرکت موس جابجا می‌شوند اما به کلیک‌ها واکنش نمی‌دهند.

🔗https://codepen.io/ksenia-k/pen/vYwgrWv
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

اانیمیشن صفحه لغو اشتراک

تعاملی صفحه لغو اشتراک GSAP.


🔗https://codepen.io/agathaco/pen/NyQgQX
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

دکمه‌های با افکت درخشش

مجموعه‌ای از انیمیشن‌های CSS برای دکمه‌ها که با استفاده از دکمه‌های رادیویی بین آن‌ها جابه‌جا می‌شوند.

🔗https://codepen.io/simeydotme/pen/BaeZJqd
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

دکمه Gooey با فیلتر SVG

یک دکمه اورجینال با افکت کشسان (الاستیک) هنگام هاور کردن و تغییر رنگ.

🔗https://codepen.io/simeydotme/pen/pomRJeE
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

فروت لوپر: SVG

انیمیشن جعبه با استفاده از GSAP.

🔗https://codepen.io/johnjoeparrot/pen/yLdRwrp
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

ایجاد موج
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

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

🔗https://codepen.io/hexagoncircle/pen/KwPpdBZ
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

نتیجه چه خواهد بود؟

"🤦‍♂️".substr(0,2);
"🤦‍♂️".substr(2,3);

#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

چارچوب الکتریکی (Electric Frame)

🔗https://codepen.io/BalintFerenczy/pen/KwdoyEN
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

اگر یک جدول را از مرورگر کپی کنید، می‌توانید آن را مستقیم در Excel یا Google Sheets جای‌گذاری کنید و همه چیز مثل یک محدودهٔ واقعی کار خواهد کرد.

اما مسیر برعکس کار نمی‌کند: اگر داده‌ای را از Google Sheets کپی کنید و بخواهید در مرورگر بچسبانید، جدول به متن ساده تبدیل می‌شود و همهٔ ساختارش از بین می‌رود.

این موضوع گاهی مشکل‌ساز است، مخصوصاً وقتی:

یک فرم با چندین فیلد دارید که شبیه جدول است،

داده‌های شما در Google Sheets هستند،

و تنها هدف شما این است که بدون تایپ کردن تک‌تک خانه‌ها، همهٔ داده‌ها را وارد فرم کنید.

راه‌حل: شنود رویداد جای‌گذاری و توزیع خودکار داده‌ها

می‌توان با جاوااسکریپت یک listener روی رویداد paste اضافه کرد و داده‌های کپی‌شده را از کلیپ‌بورد خواند، سپس آن‌ها را به ترتیب در فیلدهای فرم قرار داد. نمونهٔ ساده:

document.addEventListener("paste", function (e) {
  // گرفتن داده‌ها از کلیپ‌بورد
  const text = e.clipboardData.getData("text");
  
  // تبدیل متن به آرایهٔ دو بعدی: سطرها و ستون‌ها
  const rows = text.trim().split(/\r?\n/).map(r => r.split("\t"));

  // گرفتن همهٔ inputهای فرم
  const inputs = [...document.querySelectorAll("input")]; 
  let index = 0;

  // پر کردن inputها به ترتیب داده‌ها
  for (const row of rows) {
    for (const cell of row) {
      if (inputs[index]) {
        inputs[index].value = cell;
        index++;
      }
    }
  }

  // جلوگیری از رفتار پیش‌فرض مرورگر
  e.preventDefault();
});

نتیجهٔ کار

با این کد:

می‌توانید یک محدوده از Google Sheets را کپی کنید،

سپس با Ctrl+V در مرورگر بچسبانید،

و داده‌ها به‌صورت خودکار در فیلدهای فرم پخش می‌شوند، درست مانند کاری که Excel انجام می‌دهد.

به عبارتی، تجربهٔ کاربر مثل تجربهٔ Excel یا Sheets خواهد بود و نیازی به وارد کردن تک‌تک سلول‌ها نیست.

نمونه عملی

می‌توانید نمونهٔ آماده را اینجا مشاهده کنید:

🔗https://codepen.io/alinaki/pen/KwzvEeX
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript