این یک ارسال برای [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29)، Glam Up My Markup: Beaches
چیزی که من ساختم
این لیست از بهترین سواحل در یک ساحل نمایش داده می شود. همانطور که صفحه پیمایش می شود، اقیانوس مورد قبلی در لیست را پاک می کند و مورد بعدی با عقب نشینی اقیانوس ظاهر می شود.
توجه: این از انیمیشن های مبتنی بر اسکرول استفاده می کند که در حال حاضر فقط در Chrome در دسترس هستند. اگر در مرورگری مشاهده شود که از انیمیشن‌ها پشتیبانی نمی‌کند، صفحه با یک لیست پیمایشی ساده نمایش داده می‌شود، به همین ترتیب برای کاربرانی که گزینه دسترسی به حرکت کاهش‌یافته را در مرورگر خود فعال کرده‌اند نمایش داده می‌شود.
NOTE_2: برای نمایش تلفن همراه بهینه نشده است.
نسخه ی نمایشی
سفر
به محض اینکه دیدم چالش نمایش یک لیست است، می‌دانستم که می‌خواهم چیزی را امتحان کنم که اخیراً در مورد آن بسیار کنجکاو بودم: انیمیشن‌های مبتنی بر اسکرول. بلافاصله فهمیدم که می‌خواهم اقیانوس هر آیتم فهرست را در حین پیمایش صفحه از بین ببرد، اما برای تحقق آن نیاز به آزمایش و تحقیق قابل توجهی در مورد انیمیشن‌های اسکرول بود.
ابتدا، یک نمونه کدپن را بررسی کردم که چند هفته پیش توسط کاربر CodePen، Giana، شیفته آن شده بودم. من تحت تأثیر قرار گرفتم که چگونه اسکرول خود اساساً نامرئی بود و انتقال ها نشان را ربودند. من از این مثال چیزهای زیادی در مورد چیدمان عناصر یاد گرفتم تا به آنها اجازه دهیم بدون اسکرول یکپارچه جابجا شوند. من از این ایده استفاده کردم تا کلمات را در زیر اقیانوس ظاهر و ناپدید کنم. مطمئناً راه‌های ساده‌تری برای تحقق این امر وجود دارد، اما من می‌خواستم راه‌حل‌های فقط CSS را بررسی کنم و درک خود را از انیمیشن‌های اسکرول گسترش دهم.
اگرچه من در ابتدا قصد داشتم متن فهرست ساحلی را طوری جلوه دهم که «روی شن نوشته شده است»، در عوض یک انیمیشن رنگی به آن متن اضافه کردم تا تشخیص انتقال از یک مورد در فهرست به متن را آسان‌تر کنم. بعد. در طول پیمایش لیست، رنگ متن از سبز به آبی تغییر می کند.
بعد موج را اضافه کردم. هنگامی که عناصر انباشته برای محو شدن متن تنظیم شدند، پیاده سازی موج به طرز شگفت انگیزی با متحرک سازی یک عنصر psuedo در هر یک از آنها آسان بود.
هنگامی که آن دو عنصر اصلی کار می‌کردند، تصمیم گرفتم یک تصویر پس‌زمینه ساحلی و یک تصویر را به عنصر شبه اضافه کنم تا به جای استفاده از گرادیان، در واقع مانند یک موج به نظر برسد. من عاشق روشی هستم که تصاویر Unsplash عنصری از واقعیت را اضافه می کنند، در حالی که هنوز عجیب و غریب هستند.
در نهایت، می‌دانستم که باید برای نگرانی‌های مربوط به پشتیبانی مرورگر و دسترس‌پذیری، محافظ‌هایی اضافه کنم. من تمام انیمیشن ها را به آن اضافه کردم @support و @media جستجو می کند تا مطمئن شود اگر کاربر از مرورگری استفاده می کند که از انیمیشن های اسکرول پشتیبانی نمی کند یا اگر کاربر گزینه مرورگر را برای کاهش حرکت انتخاب کرده باشد، صفحه شکسته نمی شود.
-
از آنجایی که این روش پیمایش لیست از عناصر ارتفاع نمای کامل استفاده می کند، در نهایت مجبور شدم عناصر بالایی را در موقعیت ثابت قرار دهم تا قابل مشاهده باشند. برای بهبود طراحی، می‌خواهم در ابتدا نمایان کردن این موارد را بررسی کنم و سپس به خارج از نمای آن پیمایش کنم، و فهرست ساحل را برای پیمایش و متحرک کردن باقی بگذارم. به دلیل نیاز به داشتن عناصر لیست ارتفاع نمای کامل و همچنین امکان اسکرول کردن روی عنصر html که در نهایت باعث حذف سایر عناصر از بالای صفحه می شود، این هنوز یک چالش است.
-
طراحی پاسخگوتر خوب خواهد بود زیرا در حال حاضر تصویر پس زمینه یا واقعا عالی به نظر می رسد یا واقعاً عجیب و غریب در اندازه های مختلف نمای.
-
داشتن یک نشانگر در پایین لیست و همچنین گزینه اسکرول به بالا خوب است.
-
برخی ملاحظات دسترسی برای کاهش حرکت اعمال شده است، اما همیشه موارد بیشتری وجود دارد که باید در نظر گرفته شود، به ویژه اطمینان از اینکه پیمایش صفحه کلید کار می کند و احتمالاً انیمیشن را غیرفعال می کند.
