هی کدگذاران!
این یک برنامه خوب برای کسانی است که سفر طراحی UI/UX خود را با HTML، CSS و JS آغاز کرده اند.
بنابراین اجازه دهید شما را در فرآیند ایجاد یک انیمیشن اسکرول زیبا برای Apple AirPods با استفاده از HTML، CSS و جاوا اسکریپت راهنمایی کنم. .
این انیمیشن راهی سرگرم‌کننده و جذاب برای نمایش هدفون‌های نمادین اپل است و مطمئناً مخاطبان شما را تحت تأثیر قرار می‌دهد. بیایید شیرجه بزنیم!
اگر می خواهید آن را بررسی کنید، این ویدیو است:
https://www.youtube.com/watch?v=BY7GayueTk0
HTML
ابتدا با کد HTML شروع می کنیم. ما یک ساختار سند پایه HTML5 با یک برچسب عنوان و دو پیوند به فایل های CSS و جاوا اسکریپت خود داریم. در بدنه، ما یک عنصر بوم با کلاس “airpod-scrolling” داریم. این عنصر بوم برای نمایش انیمیشن ما استفاده خواهد شد.
CSS
بعد، ما باید عناصر HTML خود را با CSS استایل کنیم. ارتفاع عناصر HTML و بدنه را به ترتیب روی 100 و 400 ولت ساعت قرار دادیم تا فضای کافی برای اسکرول در اختیار ما قرار گیرد. رنگ پس زمینه بدنه را روی مشکی قرار می دهیم تا ظاهری براق ایجاد کنیم. در نهایت، عنصر بوم خود را با استفاده از موقعیت یابی مطلق در مرکز صفحه قرار می دهیم و تبدیل می کنیم.
جاوا اسکریپت
اکنون به هیجان انگیزترین بخش این پروژه یعنی کد جاوا اسکریپت می رسیم. ابتدا، ما برخی از متغیرها، از جمله عنصر HTML، عنصر canvas و موضوع متن بوم را اعلام می کنیم. ما همچنین تابع قاب فعلی را اعلام می کنیم که یک شاخص را به عنوان آرگومان می گیرد و URL تصویر قاب مربوطه را برمی گرداند.
در مرحله بعد، متغیر تعداد فریم را اعلام می کنیم که تعداد کل فریم های انیمیشن ما است. ارتفاع و عرض عنصر بوم را متناسب با اندازه فریم هایمان تنظیم می کنیم. ما یک شی تصویر جدید ایجاد می کنیم و منبع آن را روی اولین فریم در انیمیشن خود قرار می دهیم. سپس این تصویر را روی بوم می کشیم.
تابع updateImage تصویر روی بوم را بر اساس شاخص قاب فعلی به روز می کند. ما شاخص فریم را بر اساس موقعیت اسکرول کاربر محاسبه می کنیم و برای به روز رسانی بوم، یک فریم انیمیشن درخواست می کنیم.
در نهایت، تابع preloadImages را اعلام می کنیم که تمام فریم های انیمیشن ما را در حافظه پنهان مرورگر بارگذاری می کند. این تابع زمانی فراخوانی می شود که صفحه بارگیری می شود تا از عملکرد روان در طول انیمیشن اطمینان حاصل شود.
کد نویسی سرگرم کننده است، پس به کدنویسی ادامه دهید، به یادگیری ادامه دهید تا دفعه بعد شما را ببینم 🙂
