اسکرول نرم به المنت‌ها با متد scrollIntoView

یکی از زیباترین افکت‌هایی که می‌تونی به سایتت اضافه کنی، اسکرول نرم هست. وقتی کاربر روی یه لینک کلیک می‌کنه، صفحه به جای پرش ناگهانی، به‌صورت نرم و روان به المنت مورد نظر اسکرول می‌شه. بیا ببینیم چطور این کار رو انجام بدیم.
؛ 🎯 scrollIntoView چیه؟ scrollIntoView یک متد در JavaScript هست که المنت مورد نظر رو در ناحیه قابل مشاهده مرورگر قرار می‌ده. این متد از قدیمای Web API هست ولی با گزینه behavior: 'smooth' قابلیت اسکرول نرم بهش اضافه شده.

JS:

const links = document.querySelectorAll('.link');

links.forEach((item) => {
 item.addEventListener('click', (e) => {
  e.preventDefault();

  let id = item.getAttribute('href');
  let formattierID = id.substring(1);
  let section = document.getElementById(formattierID);

  section.scrollIntoView({
   behavior: 'smooth',
  });
 });
});

💎 @Htmlcss_channels  | #HTML #css #JavaScript

CSS Grid Crash Course


💎 @Htmlcss_channels  | #HTML #css #JavaScript

🔅 Light to Dark mode in CSS



💎 @Htmlcss_channels  | #HTML #css #JavaScript

5 کتاب عالی توی سطوح مختلف برای جاوا اسکریپت 🔥

Eloquent JavaScript (4th Edition)
بهترین کتاب برای یادگیری جاوااسکریپت از پایه با تمرین‌های کاربردی.
You Don't Know JS Yet
مجموعه‌ای عمیق برای درک مفاهیم داخلی و پیشرفته جاوااسکریپت.
JavaScript: The Definitive Guide (7th Edition)
مرجع جامع و کامل برای یادگیری و مراجعه در تمام سطوح.
JavaScript: The Good Parts
آموزش نوشتن کد تمیز و استفاده از بخش‌های قدرتمند زبان.
Secrets of the JavaScript Ninja (2nd Edition)
مناسب برنامه‌نویسان متوسط تا حرفه‌ای برای تسلط بر تکنیک‌های پیشرفته و الگوهای حرفه‌ای.


💎 @Htmlcss_channels  | #HTML #css #JavaScript

تا حالا از AI خواستی برات یک سایت طراحی کنه و آخرش با همون ترکیب همیشگی روبه‌رو شدی؟
گرادیان بنفش، سه‌تا کارت کنار هم، متن‌های بزرگ و یک ظاهر که انگار قبلاً صد بار دیدیش؟ 😅

اینجاست که Taste Skill وارد می‌شه.


پست بعدی رو ببینید 🔻

💎 @Htmlcss_channels  | #HTML #css #JavaScript

🔺مهارت Taste Skill یک مجموعه دستورالعمل برای ابزارهای کدنویسی مبتنی بر هوش مصنوعیه که کمک می‌کنه رابط کاربری‌های حرفه‌ای‌تر، منسجم‌تر و کمتر کلیشه‌ای بسازن.

در واقع خودش فریم‌ورک یا کتابخانه UI نیست؛ یک فایل راهنماست که AI قبل از طراحی و کدنویسی می‌خونه و بر اساسش تصمیم می‌گیره:

• چه فونت و ترکیب‌بندی‌ای مناسب پروژه‌ست
• فاصله‌گذاری‌ها و رنگ‌ها چطور انتخاب بشن
• انیمیشن‌ها چقدر و کجا استفاده بشن
• طراحی چطور با هویت برند هماهنگ بمونه
• از چه الگوهای تکراری و بی‌دلیلی دوری بشه

مثلاً به AI یادآوری می‌کنه که هر صفحه‌ای به گرادیان بنفش، کارت‌های شیشه‌ای یا داشبورد نمایشی نیاز نداره!

این ابزار با سرویس‌ها و ایجنت‌هایی مثل Cursor، Claude Code، Codex، Windsurf، v0 و چند ابزار دیگه قابل استفاده‌ست و به فریم‌ورک خاصی هم محدود نیست.

برای نصب نسخه اصلی می‌تونید از این دستور استفاده کنید:

"npx skills add github.com/Leonxlnx/taste… --skill "design-taste-frontend""

بعد از نصب، AI فایل "SKILL.md" رو می‌خونه و موقع طراحی رابط کاربری، قواعدش رو در نظر می‌گیره.

در مجموع، اگه با AI سایت می‌سازید ولی از خروجی‌های تکراری و بیش‌ازحد «AI‌طور» خسته شدید، Taste Skill می‌تونه مثل یک طراح هنری یا منتقد طراحی کنار ایجنت کدنویسی‌تون عمل کنه.

🔗 tasteskill.dev

📍https://github.com/Leonxlnx/taste-skill

#هوش_مصنوعی #طراحی_رابط_کاربری #برنامه_نویسی #طراحی_وب



💎 @Htmlcss_channels  | #HTML #css #JavaScript

برای انیمیشن‌های سایت لازم نیست هر بار از صفر شروع کنید.

سایتِ OriginKit بیشتر از ۲۵۰ کامپوننت انیمیشنی آماده داره؛

انتخاب می‌کنی و کدش رو مستقیم می‌بری داخل پروژه.

برای React و Framer قابل استفاده‌ست، به ابزارهای کدنویسی AI هم وصل می‌شه و رایگانه.

https://www.originkit.dev/



#هوش_مصنوعی #طراحی_رابط_کاربری #برنامه_نویسی #طراحی_وب



💎 @Htmlcss_channels  | #HTML #css #JavaScript

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

برای ساختن کارت‌ها، نویگیشن و فرم‌ها، چک‌لیست‌های دقیق و مرحله‌به‌مرحله میده، طوری که دیگه هیچ‌وقت جزئیات ریز و مهم رو از قلم نمی‌ندازی.

checklist.design


💎 @Htmlcss_channels  | #HTML #css #JavaScript

اگه برای ساختن لودر دیگه ایده‌ای نداری، یه نفر Text Streaming، In-line Loaderها و Image Loaderها رو به‌صورت متن‌باز منتشر کرده.

https://generativeloaders.com

همشون رایگانه برای نصبش اینو اجرا کنید:

npm install generative-loaders

💎 @Htmlcss_channels  | #HTML #css #JavaScript

یه اکستنشن خوب به اسم postmate جایگزین بی دردسر postman

تقریبا همه‌چی رو ساپورت می‌کنه GraphQL و WebSocket خیلی بی دردسره.

marketplace.visualstudio.com/items?itemName=PostMate-lab.postmate


💎 @Htmlcss_channels  | #HTML #css #JavaScript

با Three.js میشه سایت‌های تعاملی سه‌بعدی ساخت که نور، آب‌وهوا، دوربین و مدل‌های 3D رو مستقیم داخل مرورگر کنترل می‌کنن.

این پروژه برای ساخت مدل‌ها از Claude Code و برای تکسچر و صدا از Higgsfield استفاده کرده.

Three.js: https://threejs.org/


💎 @Htmlcss_channels  | #HTML #css #JavaScript