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

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