Scroll ettikçe
açılan
sinematik klinik.
İzmir merkezli bir implant ve estetik diş kliniğinin Polonya pazarına yönelik iki dilli kurumsal sitesi — açılışta scroll'a bağlanmış 159 karelik sinematik bir video dizisi, kendi yönetim paneli ve tek bir animasyon kütüphanesi kullanmadan yazılmış hareket katmanı.
/01 BRIEF
Klinik, Polonya'dan hasta çekmek istiyordu; rakiplerin siteleri birbirinin aynı şablon sayfalardan oluşuyordu.
Açılışı bir video yerine scroll'a bağlanmış kare dizisiyle kurduk: kliniğin tanıtım videosu 159 kareye ayrılıyor, kullanıcı sayfayı kaydırdıkça canvas üzerinde kare kare oynuyor. Sahne 360vh boyunca sabitleniyor, böylece ziyaretçi videoyu kendi hızında izliyor.
Altında tedavi kartları, hasta video günlükleri, kesintisiz akan yorum sütunları, Google ve Trustpilot puanları, sürükleyerek karşılaştırılan önce/sonra görselleri ve konsültasyon formu yer alıyor. İçeriğin tamamı İngilizce ve Lehçe; klinik kendi panelinden iki dili yan yana düzenliyor.
/02 YAKLAŞIM
Sitede tek bir animasyon kütüphanesi yok — hareketin tamamı vanilla JavaScript ve CSS ile yazıldı.
Kare dizisi requestAnimationFrame ile debounce ediliyor, cihaz çözünürlüğüne göre masaüstü veya mobil kare seti indiriliyor, eksik kare olduğunda en yakın yüklenmiş kareye düşülerek boş ekran engelleniyor. Önce/sonra karşılaştırması layout tetiklemeyen clip-path ile yapılıyor. Erişilebilirlik için prefers-reduced-motion'da süregelen animasyonlar kapanıyor. Form tarafında bal küpü, zaman tuzağı, IP limiti, link filtresi ve Turnstile'dan oluşan beş katmanlı spam koruması var.
Siteye giren hasta, kliniği gelmeden önce geziyor.
Her yüzeyde tutarlı bir görsel dil.
Çalışma, dört hamlede.
Tanıtım videosunun kare dizisine ayrılması ve scroll'a bağlı canvas motoru.
Tedaviler, hasta videoları, yorumlar, önce/sonra ve konsültasyon formu.
EN/PL sözlükleri, dil bazlı slug'lar, hreflang ve İngilizce'ye düşen çeviri katmanı.
Kendi yönetim paneli, SMTP + Turnstile'lı form ve polsmile.com yayını.
Görüş sahibi altyapı üzerine kurulu.
POLSMILE gibi bir brief'iniz mi var?
Bir iş günü içinde yanıtlarız.
Projeye başla ↗