وقتی به خیمه شب بازی فکر می کنید، اغلب چراغ های پر جنب و جوش و نمایشگرهای چرخان در پارک های تفریحی را تصور می کنید که خاطرات خوش دوران کودکی شما را به یاد می آورند.

به طور مشابه در برنامه های کاربردی وب، خیمه شب بازی ها با جلب توجه بی دردسر و ایجاد پویایی در پروژه های آنلاین شما، حس بصری پر جنب و جوشی را تزریق می کنند.

به من بپیوندید تا نحوه ساخت یک کامپوننت marquee جذاب در React را تحلیل کنیم.
این راهنمای گام به گام همه را بدون در نظر گرفتن سطح مهارت هدف قرار می دهد، هدف ما این است که تجربه شما را با React لذت بخش و مفید کنیم.

آنچه را پوشش خواهیم داد:

درک اجزای Marquee

مزایای خیمه شب بازی

برنامه ریزی و طراحی مولفه Marquee

نحوه پیاده سازی کامپوننت Marquee

چگونه کامپوننت Marquee را تقویت کنیم

بهترین روش ها و نکات برای توسعه اجزای Marquee

نتیجه

پیش نیازها

مبانی HTML و CSS

مبانی ES6 JavaScript و React

درک اجزای Marquee

خیمه شب بازی بخشی پیوسته از متن یا محتوای بصری (مانند تصاویر) را نشان می دهد که به طور خودکار در جهت افقی حرکت می کند.

اگرچه عنصر رسمی HTML Marquee منسوخ شده است و استفاده از آن به شدت ممنوع است، مفهوم پیمایش، عناصر بی پایان برای گفت ن ذوق به یک صفحه وب هنوز بسیار مورد استفاده است و می توان آن را در بسیاری از وب سایت های مدرن یافت.

این اثر از طریق انیمیشن‌های CSS تحقق می‌یابد و نتیجه انیمیشنی کارآمدتر، روان‌تر و سبک‌تر را ارائه می‌دهد.

یک مثال بصری از کامپوننت marquee از Webflow در زیر نشان داده شده است.

مزایای خیمه شب بازی

آنها دارای یک سری موارد مفید هستند مانند:

جلب توجه : خیمه ها برای جلب توجه به محتوای خاص در یک صفحه وب بسیار عالی هستند. خواه این یک پیشنهاد ویژه، اعلامیه یا محتوای ویژه باشد، یک خیمه متحرک به طور طبیعی توجه را به خود جلب می کند.

جذابیت بصری : گفت ن حرکتی به وب سایت شما جذابیت بصری آن را افزایش می دهد. Marquees می‌توانند به صفحه جان ببخشند و آن را برای کاربران پویاتر و جذاب‌تر کنند.

برجسته کردن اطلاعات مهم : هنگامی که می خواهید بر اطلاعات مهم مانند اخبار فوری، رویدادهای آینده یا پیام های فوری تأکید کنید، خیمه شب بازی راهی موثر برای اطمینان از اینکه کاربران از دست نمی دهند.

تبلیغات رویداد : آنها به ویژه برای تبلیغ رویدادها یا فعالیت های حساس به زمان مفید هستند. ماهیت پیمایش آنها به شما امکان می دهد جزئیات رویداد، تاریخ ها و هایلایت ها را به طور کارآمد نمایش دهید.

به‌روزرسانی‌های Ticker-Style : برای نمایش به‌روزرسانی‌های بی‌درنگ، مانند قیمت سهام، سرفصل‌های اخبار یا فیدهای رسانه‌های اجتماعی، خیمه‌ها قالبی به سبک تیکر ارائه می‌کنند که اطلاعات را به طور مداوم برای کاربران در جریان نگه می‌دارد.

بنرهای تعاملی : آنها می توانند به عنوان بنرهای تعاملی عمل کنند و به کاربران این امکان را می دهند که در حین حرکت روی موارد خاصی کلیک کنند. این می تواند یک راه خلاقانه برای هدایت کاربران به بخش ها یا صفحات مختلف وب سایت شما باشد.

ویترین محصولات پویا : وب‌سایت‌های تجارت الکترونیک می‌توانند با نمایش محصولات جدید یا اقلام برجسته به شیوه‌ای جذاب بصری، از مزیت‌های خیمه‌ای سود ببرند و کاربران را تشویق به کشف پیشنهادات کنند.

تاکید بر فراخوان : اگر پیام‌های دعوت به اقدام خاصی دارید، استفاده از آن‌ها می‌تواند برجسته باشد و اطمینان حاصل کند که مورد توجه قرار نمی‌گیرد.

شکستن یکنواختی : در صفحات طولانی یا محتوای ثابت، یک خیمه زیبا طراحی شده می تواند یکنواختی را بشکند و عنصر شگفتی را اضافه کند و تجربه کاربر را جالب تر کند.

تطبیق پذیری : آنها همه کاره هستند و می توان آنها را متناسب با سبک ها و تم های مختلف سفارشی کرد و آنها را به ابزاری انعطاف پذیر برای طراحان وب تبدیل می کند که به دنبال ایجاد رابط های کاربری منحصر به فرد و به یاد ماندنی هستند.

برنامه ریزی و طراحی مولفه Marquee

قبل از شروع کدنویسی، مهم است که مؤلفه خود را برنامه ریزی و طراحی کنید و عواملی مانند:

تعریف محتوا : به وضوح محتوایی را که می خواهید در مؤلفه نمایش دهید مشخص کنید. این می تواند شامل متن، تصاویر یا ترکیبی از هر دو باشد.

سرعت پیمایش : سرعت پیمایش مورد نظر را تعیین کنید. سرعت بهینه برای خوانایی و جذابیت بصری را در نظر بگیرید.

طراحی بصری : ترسیم کنید یا تجسم کنید که چگونه می خواهید به نظر برسد. در مورد رنگ‌ها، فونت‌ها و هر استایل اضافی تصمیم بگیرید تا با طرح کلی طراحی خود هماهنگ شوید.

رفتار در انتهای پیمایش : وقتی به انتهای موقعیت اسکرول رسید، رفتار آن را در نظر بگیرید. تصمیم بگیرید که آیا باید به طور مداوم حلقه بزند، به جلو و عقب بازگردد یا یک حالت پایانی خاص داشته باشد.

تعامل کاربر : در صورت وجود، برای هر گونه تعامل با کاربر برنامه ریزی کنید. این می‌تواند شامل توقف موقت شناور یا اجازه دادن به کاربران برای کلیک کردن بر روی آیتم‌های داخل صفحه نمایش باشد.

طراحی پاسخگو : مطمئن شوید که جزء شما به گونه ای طراحی شده است که پاسخگو باشد و به طور یکپارچه با اندازه ها و دستگاه های مختلف صفحه نمایش سازگار شود.

ملاحظات تست : چالش ها یا تنظیمات بالقوه مورد نیاز در مرحله آزمایش را پیش بینی کنید. برای نحوه عملکرد آن در مرورگرها و دستگاه های مختلف برنامه ریزی کنید.

دسترس‌پذیری : دسترسی‌پذیری را در نظر داشته باشید، و اطمینان حاصل کنید که کاربران با ناتوانی‌های مختلف همچنان می‌توانند به محتوای آن دسترسی داشته باشند و آن را درک کنند.

نحوه پیاده سازی کامپوننت Marquee

برای پیاده سازی کامپوننت، با ایجاد یک محیط React با Vite شروع کنید.

 npm create vite@latest

پس از آن به فهرست پروژه خود بروید، بسته های لازم را نصب کرده و سرور توسعه دهنده را راه اندازی کنید.

در مرحله بعد، عناصر موکاپ JSX را برای کامپوننت خود ایجاد کنید.

 export default function App() { return ( <div className=" main__container"> <h1>My Marquee</h1> <section className=" "> <h2>Default Behaviour</h2> <div className="marquee"> <ul className="marquee__content"> <div className=" marquee__item"> <img src={AndroidLogo} alt="" /> </div> <div className=" marquee__item"> <img src={BehanceLogo} alt="" /> </div> <div className=" marquee__item"> <img src={GoogleLogo} alt="" /> </div> <div className=" marquee__item"> <img src={InstagramLogo} alt="" /> </div> <div className=" marquee__item"> <img src={PaypalLogo} alt="" /> </div> <div className=" marquee__item"> <img src={SpotifyLogo} alt="" /> </div> </ul> <ul aria-hidden="true" className="marquee__content"> <div className=" marquee__item"> <img src={AndroidLogo} alt="" /> </div> <div className=" marquee__item"> <img src={BehanceLogo} alt="" /> </div> <div className=" marquee__item"> <img src={GoogleLogo} alt="" /> </div> <div className=" marquee__item"> <img src={InstagramLogo} alt="" /> </div> <div className=" marquee__item"> <img src={PaypalLogo} alt="" /> </div> <div className=" marquee__item"> <img src={SpotifyLogo} alt="" /> </div> </ul> </div> </section> </div> ); }

این شامل یک هدر برای کامپوننت، رفتار کامپوننت و داده‌های کامپوننتی است که قرار است متحرک شود.

مهم است که داده ها را در کامپوننت کپی کنید زیرا برای دستیابی به اثر تکراری استفاده می شود. با این حال، ما فهرست دوم را در ابتدا با استفاده از ویژگی aria-hidden='true' مخفی می کنیم.

برای اینکه از نظر بصری جذاب تر شود، این سبک ها را اضافه کنید.

 body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; padding: 2rem; width: 100%; min-height: 100vh; font-size: 1rem; line-height: 1.5; } * { box-sizing: border-box; } h1 { font-size: 2rem; font-weight: 600; line-height: 1.2; margin-block: 2rem 1rem; text-align: center; } h2 { font-size: 1.25rem; font-weight: 600; } section { margin-block: 3rem; } .main__container { max-width: 1000px; margin-inline: auto; background: rgb(124, 145, 175); padding: 3rem; } /* Marquee styles */ .marquee { --gap: 1rem; position: relative; display: flex; overflow: hidden; user-select: none; gap: var(--gap); border: 2px dashed lightgray; } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; } .marquee__content img { max-width: 2rem; width: 100%; object-fit: contain; } .marquee__content > * { flex: 0 0 auto; color: white; background: #e8daef; margin: 2px; padding: 1rem 2rem; border-radius: 0.25rem; text-align: center; } .marquee__item { display: flex; justify-content: center; align-items: center; } ul { padding-left: 0; }

در حال حاضر، کامپوننت شما باید به این شکل باشد.

برای متحرک سازی این مؤلفه، با تعریف فریم های کلیدی CSS سفارشی شروع کنید.

 @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } }

توجه : فاصله استفاده شده همان فاصله بین آیتم های خیمه ای است.
سپس، آن فریم های کلیدی را به یک کلاس اختصاص دهید.

 /* Enable animation */ .enable-animation .marquee__content { animation: scroll 10s linear infinite; }

در نهایت آن کلاس را به عنصر بخش خود اضافه کنید.

 <section className="enable-animation">

و با آن، جزء شما باید در حال حاضر متحرک باشد.

چگونه کامپوننت Marquee را تقویت کنیم

این مؤلفه فراتر از انیمیشن های بی نهایت معمولی است (همانطور که در بالا نشان داده شده است)، اغلب دارای برخی عملکردهای اضافی مانند:

Pause on Hover : در حالی که استفاده از خیمه می تواند برای نمایش پویاتر دسته ای از محتوا مفید باشد، سرعت انیمیشن یا موقعیت اطلاعات مربوط به کاربر ممکن است مشکلاتی ایجاد کند، به خصوص برای خوانندگان کند.

برای رفع این مشکل، می‌توانید یک عملکرد مکث را اجرا کنید تا وقتی کاربر روی آن قرار می‌گیرد، آن را متوقف کنید. فقط کد CSS را در زیر اضافه کنید.

 /* Pause on hover */ .marquee:hover .marquee__content { animation-play-state: paused; }

و با آن، در حالت شناور مکث می کند.

Reverse on Double Tap: در موردی که کاربر اطلاعات مهمی را ارسال کرده و می‌خواهد بدون منتظر ماندن برای بازگرداندن انیمیشن حلقه‌ای آن را ببیند، مهم است که وسیله‌ای برای دستیابی به آن فراهم کنید.

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

برای پیاده سازی این، با ایجاد حالت انیمیشن معکوس شروع کنید.

 const [reverseAnimation, setReverseAnimation] = useState(false);

یک تابع برای تغییر وضعیت انیمیشن ایجاد کنید.

 const handleDoubleClick = () => { setReverseAnimation((prev) => !prev); };

پس از آن، قانون کلاس CSS را برای معکوس کردن انیمیشن ایجاد کنید.

 /* Reverse animation */ .marquee--reverse .marquee__content { animation-direction: reverse !important; }

سپس تابع هندلر را به کامپوننت وصل کنید.

 <div className="marquee" onDoubleClick={handleDoubleClick}> <ul className="marquee__content"> <div className=" marquee__item"> <img src={AndroidLogo} alt="" /> </div> <div className=" marquee__item"> <img src={BehanceLogo} alt="" /> </div> <div className=" marquee__item"> <img src={GoogleLogo} alt="" /> </div> <div className=" marquee__item"> <img src={InstagramLogo} alt="" /> </div> <div className=" marquee__item"> <img src={PaypalLogo} alt="" /> </div> <div className=" marquee__item"> <img src={SpotifyLogo} alt="" /> </div> </ul> <ul aria-hidden="true" className="marquee__content"> <div className=" marquee__item"> <img src={AndroidLogo} alt="" /> </div> <div className=" marquee__item"> <img src={BehanceLogo} alt="" /> </div> <div className=" marquee__item"> <img src={GoogleLogo} alt="" /> </div> <div className=" marquee__item"> <img src={InstagramLogo} alt="" /> </div> <div className=" marquee__item"> <img src={PaypalLogo} alt="" /> </div> <div className=" marquee__item"> <img src={SpotifyLogo} alt="" /> </div> </ul> </div>

در نهایت، کلاس معکوس را به صورت مشروط به مؤلفه‌ای اضافه کنید که با دوبار کلیک کردن، انیمیشن را معکوس می‌کند.

 <div className={`marquee ${reverseAnimation && "marquee--reverse"}`} onDoubleClick={handleDoubleClick}>

حالا با دوبار کلیک کردن روی کامپوننت؛

Pause/Play on Space Bar کلیک کنید : یکی دیگر از قابلیت‌هایی که می‌توان برای بهبود UX اضافه کرد، به‌ویژه برای کاربران صفحه‌کلید، توقف یا پخش آن با فشار دادن کلید فاصله است. این کارکرد نحوه عملکرد ویدیوها در وب را تقلید می کند و به بهبود دسترسی برای کاربران کمک می کند.

برای پیاده سازی این کار، با ایجاد یک وضعیت برای ذخیره وضعیت مکث فعلی انیمیشن شروع کنید.

 const [isAnimationPaused, setIsAnimationPaused] = useState(false);

سپس قانون CSS را برای حالت مکث ایجاد کنید.

 /* Pause animation */ .marquee--paused .marquee__content { animation-play-state: paused !important; }

پس از آن، یک افکت ایجاد کنید که با هر بار فشار دادن کلید فاصله، حالت isAnimationPaused را به روز می کند.

 useEffect(() => { const handleKeyPress = (event) => { if (event.code === "Space") { setIsAnimationPaused((prev) => !prev); } }; document.addEventListener("keydown", handleKeyPress); // Clean-up function when component unmounts return () => { document.removeEventListener("keydown", handleKeyPress); }; }, []);

به این ترتیب، وضعیت بر اساس فشارهای کاربر، بین true و false جابجا می شود.
در نهایت، کلاس مکث شده را به صورت پویا به کامپوننت خود اضافه کنید.

 <div className={`marquee ${reverseAnimation && "marquee--reverse"} ${ isAnimationPaused && "marquee--paused"}`} onDoubleClick={handleDoubleClick}>

و با این کار، هر بار که کلید فاصله را فشار می‌دهید، مؤلفه شما مکث می‌کند و دوباره پخش می‌شود.

بهترین روش ها و نکات برای توسعه اجزای Marquee

برخی از بهترین روش هایی که در هنگام ساخت این مولفه باید در نظر گرفته شوند عبارتند از:

Lazy Loading Images : در مواردی که خیمه شب بازی شما دارای تعداد زیادی تصاویر با کیفیت بالا است که می تواند بزرگ باشد، ضروری است که آنها را قبل از ساخت کامپوننت بهینه کنید.
بارگذاری تنبل مرورگر را از بارگیری تصاویر تا زمانی که نیاز باشد به تعویق می‌اندازد (الزامی است که در نمای نمایش نشان داده شوند) و زمان بارگذاری کلی صفحه را کاهش می‌دهد.

برای رسیدن به این هدف، ویژگی loading='lazy' به تصاویر خود اضافه کنید.

 <ul className="marquee__content"> <div className=" marquee__item"> <img src={AndroidLogo} alt="" loading="lazy" /> </div> <div className=" marquee__item"> <img src={BehanceLogo} alt="" loading="lazy" /> </div> <div className=" marquee__item"> <img src={GoogleLogo} alt="" loading="lazy" /> </div> <div className=" marquee__item"> <img src={InstagramLogo} alt="" loading="lazy" /> </div> <div className=" marquee__item"> <img src={PaypalLogo} alt="" loading="lazy" /> </div> <div className=" marquee__item"> <img src={SpotifyLogo} alt="" loading="lazy" /> </div> </ul> <ul aria-hidden="true" className="marquee__content"> <div className=" marquee__item"> <img src={AndroidLogo} alt="" loading="lazy" /> </div> <div className=" marquee__item"> <img src={BehanceLogo} alt="" loading="lazy" /> </div> <div className=" marquee__item"> <img src={GoogleLogo} alt="" loading="lazy" /> </div> <div className=" marquee__item"> <img src={InstagramLogo} alt="" loading="lazy" /> </div> <div className=" marquee__item"> <img src={PaypalLogo} alt="" loading="lazy" /> </div> <div className=" marquee__item"> <img src={SpotifyLogo} alt="" loading="lazy" /> </div> </ul>

سرعت انیمیشن ذهن‌آمیز : هنگام اجرای انیمیشن، حفظ تعادل دقیق از نظر سرعت بسیار مهم است. سرعت انیمیشن باید از نظر بصری جذاب باشد و توجه کاربر را بدون کاهش خوانایی یا ایجاد ناراحتی به خود جلب کند.
این مستلزم تحلیل دقیق سرعت حرکت محتوا در سراسر صفحه است.
با توجه به سرعت انیمیشن و یافتن تعادل مناسب، تجربه کلی کاربر را افزایش می دهید و آن را به عنصری موثر و لذت بخش در وب سایت خود تبدیل می کنید.

به کاربرانی با حساسیت حرکتی فکر کنید : طراحی فراگیر به معنای در نظر گرفتن نیازها و ترجیحات کاربران مختلف، از جمله کاربران دارای حساسیت حرکتی است. برخی از کاربران ممکن است حرکت کمتری را به دلیل شرایطی مانند اختلالات دهلیزی یا صرفاً برای راحتی شخصی ترجیح دهند.
برای پشتیبانی از این کاربران، می‌توانید از عبارت prefers-reduced-motion media در جزء خود استفاده کنید.

 /* Pause animation when reduced-motion is set */ @media (prefers-reduced-motion: reduce) { .marquee__content { animation-play-state: paused !important; } }

مستندسازی مناسب : مستندات واضحی در مورد اینکه کاربران چگونه می‌توانند از مؤلفه شما به طور مؤثر استفاده کنند ارائه دهید تا برای استفاده از آن مشکلی نداشته باشند یا تمام آپشن های آن را از دست ندهند. استفاده از برچسب ها در اطراف قطعه یا یک پنجره بازشو برای ارائه دستورالعمل های کوتاه در مورد استفاده از آن را در نظر بگیرید.

نتیجه

راهنمای شما برای React Marquee Components کامل است! از برنامه ریزی تا اجرا، شما به ایجاد عناصر اسکرول پویا برای پروژه های وب خود پرداخته اید.

به یاد داشته باشید، این مولفه چیزی فراتر از حرکت است - این یک داستان تعاملی است. خواه به اشتراک گذاری اطلاعات مهم، تبلیغ رویدادها یا تزریق پویایی، خیمه شب بازی شما یک گفت نی همه کاره به جعبه ابزار شما است.

اما این سفر تازه شروع است. سرعت ها را تنظیم کنید، حساسیت ها را در نظر بگیرید و بهترین شیوه ها را برای اصلاح خیمه شب بازی خود بکار بگیرید. اجازه دهید خلاقیت جریان داشته باشد و ممکن است داستان‌های پیمایشی شما تأثیری ماندگار بر جای بگذارند.

تجربه کاربری را در اولویت قرار دهید، پیشرفت‌ها را آزمایش کنید و اجازه دهید توسعه‌تان در چشم‌انداز وب بدرخشد. پیمایش مبارک!

اطلاعات تماس

می خواهید به من وصل شوید یا با من تماس بگیرید؟ در صورت تمایل به من در مورد موارد زیر ضربه بزنید:

توییتر: @jajadavid8

لینکدین: دیوید جاجا

ایمیل: Jajadavidjid@gmail.com

خبرکاو