این یک ارسال برای [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29)، Glam Up My Markup: Beaches
چیزی که من ساختم
سعی می کردم روی یک ساحل میزی بسازم که سواحل مختلف را به صورت کارت نشان دهد. می خواستم با کمک بافت ها و رنگ های گرم ظاهری آرام و “ساحلی” به آن بدهم.
نسخه ی نمایشی
من این را فقط برای صفحه نمایش رایانه شخصی ساخته ام (ببخشید که تنبل هستم). بهترین نمایش در 1024×532.
ورودی های صفحه کلید نیز پشتیبانی می شوند:
SpaceBar: To begin exploring.
Left and Right Arrows: To navigate the gallery.
Escape: To exit the gallery and move to landing page.
کد کامل را اینجا ببینید
در نتلیفای نیز میزبانی شده است
سفر
من برای شرکت در چالش های frontend هیجان زده بودم (بله! این اولین بار است :P). وقتی موضوع را دیدم، شروع به غواصی عمیق در انواع تصاویر (Freepik) و فونت‌ها (فونت‌های گوگل و جستجوی گوگل :P) کردم که می‌توانستم آن‌ها را جمع‌آوری کنم تا چیزی شکل بگیرد.
فکر می کردم نشان دادن سواحل مختلف روی کارت های کاغذی ساده و جالب باشد. بنابراین، من وارد Figma شدم و یک صفحه دسکتاپ برای صفحه فرود ساختم.
با توجه به اینکه سواحل مملو از حرکات شاتل طبیعت (امواج، باد و موجودات) هستند، می‌خواستم با کمک GSAP چند تغییر و انیمیشن اضافه کنم. من همچنین رویای گذاشتن خرچنگی را داشتم که به طور تصادفی داخل و خارج شود، اما تصمیم گرفتم از اینکه بتوانم آن را تصور کنم خوشحال باشم. (Laziness-2 Me-0)
وام
تصاویر: Freepik
تصاویر ساحل: تصاویر گوگل
فونت ها: Beach, Josefin Sans
انتقال: GSAP
