✨ انیمیشن ورود المنت‌ها فقط با CSS

یادته وقتی یه کارت یا مودال رو با JS به صفحه اضافه می‌کردی، انیمیشن ورودش کار نمی‌کرد؟ 😅
دلیلش این بود که مرورگر برای المنتی که تازه ساخته شده «حالت قبلی» نداشت تا ازش انیمیت کنه.

@starting-style
دقیقاً همین حالت اولیه رو بهش می‌ده:

.card {
  opacity: 1;
  transform: none;
  transition: opacity .4s, transform .4s;

  @starting-style {
    opacity: 0;
    transform: translateY(20px);
  }
}

یعنی المنت موقع اولین رندر از حالت داخل @starting-style شروع می‌کنه و نرم به استایل اصلی می‌رسه. روی dialog و popover هم عالی جواب می‌ده 👌

💡 نکته مهم:
برای انیمیشنِ خروج (مثلاً رسیدن به display: none) باید transition-behavior: allow-discrete هم اضافه کنی. مرورگرهای مدرن پشتیبانی می‌کنن، ولی قبل از استفاده توی پروژه اصلی، Can I Use رو چک کن.

📤 برای دوستی که هنوز انیمیشن ورود رو با JS می‌نویسه فوروارد کن!

@awat_dev

حتما در کنار چیز های که الان دارید یاد میگیرید، میتونید web performance هم یادبگیرید

@awat_dev

معرفی کتابخانه AOS

کتابخانه AOS (Animate On Scroll) برای ساخت انیمیشن هنگام اسکرول در صفحات وب استفاده میشه.

با چند خط کد می‌تونی المان‌های سایت رو هنگام اسکرول با افکت‌های جذابی مثل "fade"، "zoom" و "slide" نمایش بدی.

نحوه استفاده:

<div data-aos="fade-up">
    Hello World
</div>

و در JavaScript:

AOS.init();

ساده، سبک و کاربردی برای جذاب‌تر کردن رابط کاربری سایت.

@awat_dev

دوستانی که با sass کار میکنید.
دیگه لازم نیست دستی خودتون بیاید rem رو محاسبه کنید و بنویسید.
یک فانکشن تعریف میکنید و پیکسل رو به rem تبدیل میکنه.
یعنی شما براساس همون پیکسل کارکنید مشکلی نیست چون این تابع به rem تبدیلش میکنه
ورودی رو بر اساس پیکسل میدی و اون خروجی رو با rem اعمال میکنه

@awat_dev

سورس کد پروژه

سورس کد فرم Login

سلام، خسته نباشید 🌱
یه نکته‌ی کوچیک راجع به Tailwind CSS می‌خواستم بگم که شاید به کارتون بیاد.

توی طراحی معمولاً برای هر سکشن یا بخشی که می‌خوایم پیاده‌سازی کنیم، یه Width، Height و... مشخص شده که معمولاً بر اساس Pixel هست.

حالا برای تبدیل این مقدارها به مقادیر Tailwind، معمولاً می‌تونیم از مقادیر موجود توی داکیومنت خود Tailwind استفاده کنیم؛ ولی خب بعضی وقتا ممکنه داکیومنت برامون باز نشه، بهش دسترسی نداشته باشیم یا اصلاً حوصله‌ی باز کردنش رو نداشته باشیم 😄

اینجا یه راه خیلی ساده داریم 👇

مثلاً فرض کنید عرض سکشن ما 250px هست و می‌خوایم مقدار مناسبش رو برای Tailwind پیدا کنیم.

کافیه 250 رو تقسیم بر 4 کنیم:

250 ÷ 4 = 62.5

پس مقدار Tailwind ما میشه:

w-62.5

البته بسته به نیازتون می‌تونید مقدار رو گرد کنید و از "w-62" یا مقدار دقیق‌تر استفاده کنید.

🔸 دلیلش هم اینه که مقیاس پیش‌فرض Tailwind معمولاً بر اساس هر واحد = 0.25rem هست که در تنظیمات پیش‌فرض، معادل 4px در نظر گرفته میشه.

پس به‌صورت خلاصه:

Pixel ÷ 4 = مقدار Tailwind

مثلاً:

100px → 25
200px → 50
250px → 62.5
400px → 100

یه ترفند ساده‌ست، ولی وقتی زیاد با Tailwind کار کنید، خیلی به دردتون می‌خوره. 🚀

تیلویند یا بوت‌استرپ؟
یکی از انتخاب‌های همیشگی در شروع پروژه‌های فرانت‌اند 👇

Bootstrap
• کامپوننت‌های آماده

• شروع سریع‌تر

• مناسب پنل‌ها و رابط‌های استاندارد

• یادگیری اولیه ساده‌تر

ــــ

Tailwind CSS
• آزادی بیشتر در طراحی

• مبتنی بر کلاس‌های Utility

• مناسب طراحی‌های اختصاصی

• کنترل بیشتر روی ظاهر کامپوننت‌ها



پس کدوم رو انتخاب کنیم؟
اگر سرعت و کامپوننت‌های آماده برات مهم‌تره بوت استرپ واسه توعه.

اگر آزادی طراحی و ساخت UI اختصاصی می‌خوای تیلویند انتخاب توعه.


در نهایت، هیچ‌کدوم برای همه پروژه‌ها «بهتر» نیست؛ انتخاب درست به نیاز پروژه بستگی داره.

🚀 ۴ سایت برای دموهای آماده JavaScript

اگر برای پروژه‌های فرانت‌اند دنبال ایده و نمونه‌کد آماده هستید، این ۴ سایت را ببینید:

🔹 CodePen
دموهای متنوع HTML، CSS و JavaScript

🌐 https://codepen.io/

🔹 JSFiddle
تست و اجرای سریع کدهای JavaScript

🌐 https://jsfiddle.net/

🔹 Codrops
انیمیشن‌ها و افکت‌های حرفه‌ای برای وب

🌐 https://tympanus.net/codrops/

🔹 Three.js Examples
دموهای جذاب سه‌بعدی و WebGL

🌐 https://threejs.org/examples/


@awat_dev