ایجاد انیمیشن چیدمان کارت ها روی هم هنگام اسکرولسلام رفیق خلاق! 👋 آمادهای که وبسایتت رو به یه اثر هنری متحرک تبدیل کنی؟امروز قراره با یه ترفند خفن توی طراحی وب آشنا بشیم که نهتنها کاربرات رو میخکوب میکنه، بلکه خودت هم از نتیجهش انگشت به دهن میمونی! 🤯 دیگه
توجه: برای مشاهده تمام کدهای استفاده شده در این آموزش، نیاز به تهیه 🌟 اشتراک ویژه دارید.
ایجاد انیمیشن چیدمان کارت ها روی هم هنگام اسکرول
سلام رفیق خلاق! 👋 آمادهای که وبسایتت رو به یه اثر هنری متحرک تبدیل کنی؟
امروز قراره با یه ترفند خفن توی طراحی وب آشنا بشیم که نهتنها کاربرات رو میخکوب میکنه، بلکه خودت هم از نتیجهش انگشت به دهن میمونی! 🤯 دیگه دوران انیمیشنهای تکراری و خستهکننده ایستا تموم شده؛ وقتشه یه افکت پویا و تعاملی رو به سایتت اضافه کنیی که با هر اسکرول، جادوی خودش رو نشون بده. 🎩
🎯 تو این آموزش قراره یه سکشن خفن و تعاملی بسازیم که شامل چندتا باکس کارت خوشگل و حرفهایه. وقتی کاربر شروع میکنه به اسکرول کردن، این کارتها به شکل یه دسته ورق جادویی از کنار (راست به چپ یا چپ به راست) روی هم قرار میگیرن! 😍 یه افکت خاص و متفاوت که حس مدرن بودن و پویایی رو به سایتت تزریق میکنه.
🚀 بهترین قسمت ماجرا چیه؟ اینکه اصلاً لازم نیست یه کدنویس حرفهای باشی تا این افکت شگفتانگیز رو بسازی! با کمک المنتور – اون صفحهساز محبوب و راحت – برای طراحی اولیه، و استفاده از قدرت انیمیشنی GSAP بههمراه افزونه ScrollTrigger، همه چیز رو مرحلهبهمرحله با هم پیاده میکنیم. 😎 پس کمربندتو ببند و آماده شو، چون این آموزش قراره سایتت رو از یه ظاهر ساده به یه تجربه کاربری حرفهای و چشمگیر تبدیل کنه! 💪✨
ایجاد انیمیشن چیدمان کارت ها روی هم هنگام اسکرول با GSAP
💡 قبل از اینکه بریم سراغ مراحل ساخت این سکشن خفن، بد نیست یه معرفی کوچیک از ابزارهایی که قراره باهاشون کار کنیم داشته باشم؛ چون اسم GSAP و ScrollTrigger رو آوردیم.
📦 GSAP(مخفف GreenSock Animation Platform) یه کتابخونه قدرتمند جاوااسکریپتیه که کمک میکنه انیمیشنهای تعاملی و پیشرفته بسازی؛ دقیقاً همونهایی که توی سایتهای مدرن میبینی و عاشقشون میشی! ⚙️ از اون طرف، ScrollTrigger یه افزونه جانبی برای GSAP هست که بهت این امکان رو میده انیمیشنهایی طراحی کنی که با اسکرول کردن صفحه فعال میشن. یعنی میتونی حرکت، چرخش، محو شدن، یا هر نوع افکتی رو به اسکرول کاربر گره بزنی و یه تجربه کاربری کاملاً داینامیک و چشمنواز خلق کنی! 🎯
حالا که با اینا آشنا شدی وقتشه بریم سر وقت اصل داستان و ماجرا یعنی نحوه پیاده سازی و ایجاد اون سکشن خفنمون.
مرحله ۱: ایجاد سکشن یا بخش جدید در المنتور
اولین قدم، ساختن یه برگه جدید توی المنتوره. نگران نباش، سادهتر از چیزیه که فکرش رو میکنی:
یه سکشن جدید بساز و نوع کانتینرش رو (فلکس باکس) Flexbox Container انتخاب و جهتش رو افقی تنظیم کن. این میشه زمین بازی اصلی ما!
عرض محتوا (Content Width) رو روی Boxed (جعبه ای) تنظیم کن و اندازهش رو 1200px بذار تا همهچیز مرتب و جمعوجور باشه.
حداقل ارتفاع (Min Height) رو بذار 100VH (یعنی کل ارتفاع صفحه نمایش کاربر) تا فضای کافی برای خلاقیت داشته باشیم. حالا اگه دلت خواست، برو به تب استایل و پسزمینه مشکی یا گرادیان خفن بهش بده تا کارتها بیشتر به چشم بیان.
داخل این کانتینر والد، دو تا کانتینر دیگه (در کنار هم) اضافه کن:
کانتینر متن: برای عنوان یا توضیحات بخش (مثلاً “مجله آموزشی رایا وردپرس”).
کانتینر کارت: جایی که قراره کارتهامون روی هم قرار بگیرن.
برای کانتینر متن، توی بخش طرح بندی (Layout) گزینه Justify Content رو روی Center بذار تا همهچیز وسطچین و شیک بشه. بعدش ویجتهای عنوان، متن یا حتی دکمه رو بنداز داخلش و استایلشون رو به سلیقه خودت تنظیم کن. ✍️
🔧 قبل از ادامه مراحل، باید ساختار رو مرتب کنیم و کانتینرها رو به درستی نامگذاری کنیم تا توی کدنویسی و اعمال انیمیشنها بعداً سردرگم نشیم.
۱. منوی ناوبری المنتور رو باز کن (همون آیکون سه تا لوزی روی هم).
۲. وارد تب ساختار (Structure) شو. ۳. حالا کانتینر اصلی سکشن مورد نظر رو پیدا کن و اسمش رو بذار parent این کانتینر والد ماست. 4. کانتینری که متن یا عنوان داخلشه رو text-content نامگذاری کن. 5. و کانتینری که قراره کارتهامون توش قرار بگیرن رو هم card-content بذار.
🧠 این اسمگذاریها کمک میکنه که راحتتر بتونیم آموزش رو پیش ببریم و کانتینرها رو باهم قاطی نکنیم.
مرحله ۲: پر کردن ستون سمت راست با محتوای متنی
حالا که چهارچوب اصلی آماده شده، وقتشه که تو ستون سمت راست محتوای متنی و توضیحات خودمون رو وارد کنیم و تو ستون سمت چپ کارتها رو قرار بدیم.
برای ستون سمت راست، ویجتهای سربرگ، ویرایشگر متن و دکمه رو از پنل ابزارکها پیدا کن و بنداز داخل ستون. 😎 حالا میتونی متن و رنگبندی استایلش رو طبق سلیقه خودت تغییر بدی و بهش یه جلوه خاص بدی! 🎨✨
حواست باشه که برای کانتینر متن (یعنی همون کانتینر text-content)، توی بخش Layout گزینه Justify Content رو روی Center بذار تا همهچیز وسطچین و شیک بشه! 😏👌
مرحله 3: پر کردن ستون سمت چپ با کارت ها
حالا که ستون سمت راست رو تنظیم کردیم، نوبت به ستون سمت چپ (همون کانتینر card-content) میرسه که قراره کارتهای جذابمون رو داخلش بچینیم. برای این کار، یک کانتینر جدید داخل کانتینر اصلی کارتها (که قبلاً ایجاد کردیم) اضافه کن. این کانتینر جدید میشه اولین کارت ما! 😍
حالا در منوی ناوبری، نام این کانتینر داخلی رو به card تغییر بده تا راحتتر بتونیم پیداش کنیم.
حواست باشه که ابعاد کارتها رو به خوبی تنظیم کنی. عرض و حداقل ارتفاع کانتینر داخلی کارت رو ۳۵۰ پیکسل تنظیم کن. این طوری کارتها فضای کافی دارن که راحت و خوشگل کنار هم قرار بگیرن و طراحی مرتب و شیک بشه! ✨
حالا وقتشه که زیبایی کارت رو بیشتر کنیم! از قسمت Style یه پسزمینه گرادیان (رنگی یا ترکیبی از رنگها) به کارتت بده تا جلوه ویژهای پیدا کنه. 🌈 همچنین میتونی یه Border Radius (شعاع حاشیه) هم به کارتها بدی تا گوشههاش گرد بشه و ظاهری نرمتر پیدا کنن.
داخل همین کانتینر کارت، ویجتهای مختلفی مثل آیکون و سربرگ رو اضافه کن و استایل و محتوا رو طبق سلیقه خودت تنظیم کن. مثلاً کارتها رو برای موضوعاتی مثل سئو، گرافیک، توسعه اپلیکیشن و غیره طراحی کن.
در تنظیمات طرح بندی کانتینر داخلی card محتوا رو تراز کن و فاصله بین ردیف ها یا همون شکاف رو 40 پیکسل در نظر بگیر.
کانتینر card رو ۴ بار تکثیر کن تا چندین کارت مشابه داشته باشی! برای این کار، کافیه روی کانتینر کارت کلیک کنی و گزینه Duplicate رو بزنی. حالا، محتوای هر کارت رو تغییر بده و برای هرکدوم یه رنگ گرادیان متفاوت برای پسزمینه انتخاب کن. اینطوری مجموعهای از کارتهای متنوع و جذاب خواهی داشت🔥
مرحله 4: ایجاد چرخش و زاویه برای هر کارت
برای اینکه کارتامون از محور Y کمی زاویه داشته باشن و همه پشت هم روی هم قرار نگرفته باشن که یکیشون دیده بشه باید کمی کارتامون رو زوایه بدیم برای اینکار باید به تب پیشرفته هر المان card بری و از قسمت تبدیل زاویه چرخش رو متناسب با سلیقه ات یا طبق ویدیو تنظیم کنی 🙂
مرحله 5: تعریف کلاس برای کارت ها و کانتینرها
قبل از اینکه بریم سراغ اضافه کردن انیمیشن، باید به المنتهامون یه سری کلاس بدیم تا GSAP بدونه دقیقاً باید با کدوما کار کنه. یه جورایی داریم بهش نقشه میدیم!
🔹 از بخش Advanced > CSS Classes توی تنظیمات هر کانتینر:
به سکشن اصلی (همون parent) کلاس tca-parent-section رو بده.
به کانتینر کارتها کلاس tca-card-content بده.
به هر کارت تکی هم کلاس tca-card بده.
این تگگذاریها، کار GSAP رو خیلی راحتتر میکنه و باعث میشه انیمیشنهامون دقیق و بدون دردسر اجرا بشن.
مرحله 6: اضافه کردن انیمیشن قرارگیری کارت ها روی هم هنگام اسکرول صفحه
حالا وقتشه که به کارتها حرکت بدیم! 😎 میخواهیم به کارتها انیمیشن بدیم تا وقتی صفحه رو اسکرول میکنیم، کارتها روی هم قرار بگیرن و یه افکت جذاب ایجاد بشه. آمادهای؟! 👇
یه سکشن جدید درست زیر سکشن اصلی (parent) اضافه میکنیم. حالا داخل این سکشن، ویجت HTML رو از پنل المنتور پیدا کرده و داخلش قرار میدیم. حالا وقتشه کدهای مربوط به انیمیشن رو داخل این ویجت بذاریم!
🔒
محتوای ویــــژه
این محتوا فقط برای اعضای ویژه قابل مشاهده است. برای دسترسی به تمام آموزشهای اختصاصی رایا وردپرس، عضو ویژه شوید.
تبریک! 🎊 حالا کارتها هنگام اسکرول، مثل جادو روی هم قرار میگیرن و یه افکت حرفهای به سایتت میدن. 😍
اما اگه دیدی اسکرول درست کار نمیکنه، نگران نباش:
🛠️ یه سکشن خالی با ارتفاع حداقل 100VH پایین صفحه اضافه کن تا فضای کافی برای اسکرول داشته باشی. 🔒 بعدش برو سراغ Advanced > Layout کانتینر و مقدار Overflow رو روی Hidden بذار. این کار باعث میشه المانهایی که بیرون میزنن قشنگ قایم شن و طراحیت مرتب و تمیز بمونه.
و تمام! حالا با یه افکت چشمنواز و حرفهای، سایتت حسابی متفاوت و خاص شده! 💪💫
📽️ ویدیو آموزش ایجاد انیمیشن چیدمان کارت ها روی هم هنگام اسکرول
🔒
محتوای ویــــژه
این محتوا فقط برای اعضای ویژه قابل مشاهده است. برای دسترسی به تمام آموزشهای اختصاصی رایا وردپرس، عضو ویژه شوید.
اگه از مطالب سایت استفاده کردی و کارت رو راه انداخته، میتونی با یه حمایت کوچیک
بهمون انگیزه بدی تا با قدرت کار تولید محتوای خفن تر و جذاب تر رو پیش ببریم 😉🥰
ارسال نظر ( 0 نظر تایید شده )