Beşikdüzü Asansör — Tanıtım Sitesi
Sitenin ilk planında asansör kabini siz kaydırdıkça sayfada aşağı iniyordu.
Rol
Sistemde görsel fikrin önce geldiği tek parça. Konsepti ve kurallarını ben yazdım, sayfa bir bina kesiti, hareket ağır ve seyrek; yapımı ve ön basım hattını yapay zekâ kodlama ajanlarıyla yürüttüm.
Stack
Overview
Sitenin ilk planında asansör kabini siz kaydırdıkça sayfada aşağı iniyordu. Yeniden tasarım bunu tersine çevirdi. Sayfayla birlikte hareket eden kabin, yanınızdan geçen herhangi bir şeyden farksız. Yayındaki sürüm tam tersini yapıyor: kabin sağdaki kuyuda sabit duruyor ve katlar onun yanından geçiyor, cam bir asansörün içinden göründüğü gibi. Başlıktaki nokta matris gösterge hangi katta olduğunuzu söylüyor, sağdaki düğme paneli sizi bölümler arasında gezdiriyor. Sayfa hiç API çağırmıyor, hiçbir şey saklamıyor ve düz HTML olarak önceden basılıyor; herhangi bir betik gelmeden çiziliyor. Platformun gerçekten yayında olan tek parçası.
Neler yapıyor
- ISabit bir kabin ve yanından kayan katlar; sayfa bir binanın kesit çizimi
- IIBaşlıkta kat rehberini açan nokta matris kat göstergesi
- IIISağda bölümler arasında yolculuk yaptıran kumanda paneli
- IVStili gömülü statik HTML olarak önceden basılıyor; ilk çizim için JavaScript gerekmiyor
- VAnalitik yok, üçüncü taraf betik yok, yazı tipleri sitenin kendisinden geliyor
Ekranlar
Teknik notlar
- ISayfadaki tek parallax karşı ağırlık ve orada olmasının sebebi gerçek makinede de olması. Sabit kabinin yanından sayfanın ortasında, ters yönde ve kaydırma hızının iki katıyla, kuyunun orta noktasına göre aynalanmış olarak geçiyor. Geri kalan her şey ya sayfayla kayıyor ya yerinde duruyor. Seyrek hareket bir kuraldı; site azaltılmış hareket ayarına baştan sona uyuyor.
- IIDerleme üç adım: istemci paketi, aynı uygulamanın Node'da çalışan sunucu tarafı kopyası ve bitmiş sayfayı CSS'i gömerek index.html'e yazan bir ön basım adımı. Kapı animasyonu saf CSS; betik gelmeden de oynuyor. React sonra zaten var olan bir sayfayı canlandırıyor.
- IIIAsset ve yazı tipi dosyaları adlarında içerik özeti taşıyor ve bir yıl önbelleklenebiliyor; önbelleksiz sunulan tek dosya index.html. İletişim numaraları tek bir yapılandırma modülünde; firma bir hattı değiştirdiğinde değiştirilecek tam olarak tek bir yer var.
Neler öğrendim
Bu sitenin daha eski bir prototipi tarayıcıda Babel çalıştırıyordu, üstünde bir ayar paneli ve on dokuz QA ekran görüntüsü taşıyordu ve yayınlanan uygulama hiçbirine başvurmuyordu. Depoda haftalarca durdu. Emek verdiğiniz bir şeyi silmek olması gerekenden zor; silmem Eylül'ü buldu.