سایت صنعتی
طراحی سایت شرکت سندبلاست و رنگ سازه فلزی
یک سایت صنعتی که در همان صفحهی اول نشان میدهد کارِ شرکت چیست — تیرآهن زنگزده جلوی چشم شما سندبلاست میشود و رنگ میخورد. بدون حتی یک عکس.
مشکل چه بود؟
شرکتهای صنعتی معمولاً یا اصلاً سایت ندارند، یا یک صفحهی قدیمی دارند که هیچکس بازش نمیکند. مشتری این شرکتها هم آدم عادی نیست — مدیر پروژهای است که میخواهد در ده ثانیه بفهمد شما این کار را بلدید یا نه، و بعد زنگ بزند.
پس هدف سایت یک چیز بیشتر نبود: رساندن بازدیدکننده به صفحهی تماس.
چی ساختم؟
یک سایت ده صفحهای فارسی و راستبهچپ برای یک شرکت سندبلاست و رنگ سازههای فلزی: خانه، خدمات، نمونهکارها، تماس، و یک بلاگ با پنج مقالهی واقعی.
ظاهرش عمداً «آلومینیوم صیقلی روی زمینهی گرافیتی» است — گوشههای کاملاً تیز، بدون هیچ گردی، و تیترها با یک گرادیان فلزی که مستقیم روی متن بریده میشود. این کار با CSS انجام شده، نه با عکس؛ پس در هر بزرگنمایی تیز میماند و هیچ فایلی اضافه دانلود نمیشود.
چطور کار میکند؟
صفحهی اول روی صفحه قفل میشود و با اسکرول شما یک صحنه اجرا میشود:
- یک تیرآهن زنگزده ثابت ایستاده
- یک بالابر قیچی از سمت راست وارد میشود
- ماسه با فشار به تیرآهن میخورد و زنگ را میبَرد
- فلز تمیز زیرش پیدا میشود
- بالابر برمیگردد و پشت سرش رنگ نهایی مینشیند
همهی این صحنه شکلهای کشیدهشده (SVG) است، حدود ۴۰ کیلوبایت، بدون حتی یک عکس. دلیلش ساده بود: روش اپل برای این کار، پخش کردن صد و بیست عکس پشت سر هم است. چنین مجموعهای از یک تیرآهن مشخص، در هیچ سایت عکس رایگانی وجود ندارد و تا وقتی مشتری واقعی اجازهی فیلمبرداری ندهد هم ساخته نمیشود.
حرکت بالابر و محو شدن زنگ با یک معادلهی خطی مشترک کنترل میشوند، نه دو انیمیشن جدا. برای همین زنگ همیشه دقیقاً زیر نازل پاک میشود. اگر به یکی از آن دو منحنی شتابدار میدادم، ماسه شروع میکرد به تمیز کردن جایی که هنوز به آن نرسیده — و چشم این را فوراً میگیرد.
سه قانونی که رعایت شد
- زیر ۷۶۸ پیکسل، قفل شدن خاموش میشود. روی موبایل، نوار آدرس هنگام اسکرول جمع میشود و نقطهی شروع قفل زیر انگشت کاربر جابهجا میشود. نتیجهاش پرش تصویر است. موبایل همان صحنه را به شکل سادهتر میبیند.
- با «کاهش حرکت» انیمیشن کامل خاموش میشود. حرکت وابسته به اسکرول برای بعضیها سرگیجه و میگرن میآورد. این سایت تقریباً تماماً از همین حرکت ساخته شده، پس این تنظیم اختیاری نبود.
- بدون جاوااسکریپت هم سالم است. اگر اسکریپت نرسد، بازدیدکننده تیرآهن رنگشدهی نهایی را میبیند — یعنی بهترین حالت، نه یک قاب خالی.
با چه ابزارهایی
HTML و CSS خام، بدون فریمورک. برای انیمیشن GSAP و افزونهی ScrollTrigger، و Lenis برای نرم کردن اسکرول. فونت وزیرمتن روی همان دامنه میزبانی میشود — نه گوگل فونت، چون در ایران قابل اعتماد نیست.
نتیجه
سایتی که روی موبایل هم روان است، بدون جاوااسکریپت هم خوانا میماند، و در هر صفحهاش یک راه مستقیم به دکمهی تماس دارد.
همهی صفحهها فعلاً از گوگل مخفیاند (noindex).
دلیلش این است که این شرکت واقعی نیست و شمارهاش کار نمیکند؛ اگر کسی با جستوجوی
«سندبلاست چیست؟» به آن برسد، به شمارهای زنگ میزند که جواب نمیدهد.
پنج مقالهی بلاگ با همین حساب کامل و درست نوشته شدهاند تا
روزی که سایت برای یک شرکت واقعی راه بیفتد، آماده باشند.