Kaydırmayla 3B çarşı
bazaar.html’de bir baharat dükkânının 3B modeli model-viewer ile gösteriliyor; kaydırdıkça kamera beş sahne boyunca hareket ediyor.
Tarihi Yarım Ada
Mısır Çarşısı merkezli, İstanbul’un Tarihi Yarımadası’nı kaydırmayla ilerleyen bir 3B dükkân sahnesi ve ekibin kendi fotoğraflarıyla anlatan çok sayfalı web sitesi.
15HTML sayfasıCanlı · GitHub Pages
01 — Genel bakış
Bir çarşıyı ekrana taşımak.
- Ders
- Web Tasarım · Işık Üniversitesi
- Sayfa
- 15 HTML sayfası
- Yayın
- GitHub Pages
- İçerik dili
- Türkçe
Işık Üniversitesi Web Tasarım dersi için ekip olarak hazırladığımız, İstanbul’un Tarihi Yarımadası’nı Mısır Çarşısı merkezinde anlatan çok sayfalı bir web sitesi.
Sitede çarşının hikâyesi, ürünler, galeri, gazete tarzı bir makale, turlar, ziyaretçi yorumları, videolar, SSS ve iletişim sayfalarının yanı sıra Ayasofya, Topkapı Sarayı, Yerebatan Sarnıcı ve Galata Kulesi için ayrı sayfalar var. Fotoğrafların tamamı ekibe ait; stok görsel kullanılmadı.
02 — Benim rolüm
Projedeki rolüm
Bu 5 kişilik bir ders projesi: Fatih Erdoğan, Erva Aksoy, İrem Arslan, Kadir Keleş ve Tuğçe Topçu. Site ekip çalışmasının ortak ürünü olduğu için bireysel katkıları burada ayrıştırmıyorum.
Bu sayfadaki teknik açıklamalar, projenin herkese açık README dosyasına ve kaynak koduna dayanıyor.
03 — Öne çıkan özellikler
Neler yapabiliyor?
Ziyaretçi yorumları
Kategori sekmeleri ve JavaScript verisinden üretilen bir kaydırıcı (içerik proje için yazılmış örnek metinler).
Turlar sayfası
IntersectionObserver ile kaydırınca beliren bölümler ve yumuşak kaydırma.
Saf CSS carousel & menü
Ana sayfadaki carousel ve yan menü JavaScript kullanmadan, yalnızca CSS ile (checkbox hack) çalışıyor.
Tarihi yapılar
Ayasofya, Topkapı Sarayı, Yerebatan Sarnıcı ve Galata Kulesi için ayrı sayfalar.
Özgün fotoğraflar
Tüm fotoğraflar ekibin kendi çekimleri; web için yeniden boyutlandırılıp optimize edildi. Duyarlı (responsive) yerleşim.
04 — Teknoloji & mimari
Nasıl kurulu?
Temel
Animasyon & 3B
Diğer
Mimari
05 — Mühendislik notları
Kaydırma, bir kamera hareketine dönüşüyor.
Kaydırmayla yönetilen kamera
3B modelin camera-orbit ve camera-target öznitelikleri GSAP ScrollTrigger (scrub) ile sayfadaki beş bölüme bağlı. Kullanıcı kaydırdıkça kamera üst raflara yaklaşıyor, alt raflara iniyor, yan profile dönüyor ve geniş açıyla bitiyor.
JavaScript’siz etkileşim
Ana sayfadaki carousel ve yan menü yalnızca CSS ile çalışıyor; JavaScript kapalı olsa da site gezilebilir kalıyor.
Veriden üretilen yorumlar
Yorumlar sayfasındaki sekmeler ve kaydırıcı, JavaScript’te tutulan veriden oluşturuluyor; yeni içerik eklemek için HTML’e dokunmak gerekmiyor.
Gizlilik ve özgün içerik
Fotoğraflar ekibin kendi çekimleri; yayındaki sürümde ekip üyelerinin fotoğrafları gizlilik için yer tutucu avatarlarla değiştirildi.
06 — Sonuçlar & rakamlar
Rakamlarla
15HTML sayfası
5kamera sahnesi
4tarihi yapı sayfası
0stok görsel
07 — Ekran görüntüleri
