بحران آتنا: یک بازی باکیفیت ساخته شده با جاوااسکریپت

بحران آتنا یک بازی استراتژی نوبت به نوبت تجاری است که در فروشگاه استیم در دسترس است، اما حالا موتور و ابزارهای آن به صورت متن‌باز [Open Source] منتشر شده‌اند.

🔗https://cpojer.net/posts/athena-crisis-open-source
#️⃣#code
🆔@IR_javascript

Firefly Button

🔗https://codepen.io/ShaeSco/pen/xxeeeam
#️⃣#code
🆔@IR_javascript

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