Abyss, bağımsız yapım oyun stüdyoları, Kickstarter RPG kampanyaları ve Steam mağaza eşlik siteleri için tasarlanmış, dönüşüme hazır bir landing page'dir. Sayfaya yerleştirin, metinleri değiştirin ve bir bundler'a dokunmadan fragman kalitesinde promo sayfanız olsun.
İçinde neler var
- 9 tam tasarlanmış bölüm: hamburger menülü sabit navbar, animasyonlu parçacık canvas'lı ve büyütülmüş filigran'lı tam viewport kahraman, görünüm sırasında animasyon yapan 5 istatistikli sayaç çubuğu, "fragmanı oynat" overlay'li bölünmüş hikaye bölümü, 6 kartlı oynanış özellikleri ızgarası, yatay kaydıran ekran görüntüsü galerisi, elementel parıltılı 4 karakterli kahraman ızgarası, tarama çizgisi overlay'li sinematik fragman banner'ı, $49.99 fiyat işlemeli CTA ve minimal markalı footer.
- Karanlık fantezi paleti — derin mürekkep siyahı (
#04040a), imza karmaşısı (#e8193c), altın vurguları (#f5a623) ve elektrik mavisi aksentler. Her renk bir CSS özel özelliğidir; tüm siteyi üç değişkenden yeniden stillendirebilirsiniz. - Üç yazı tipi sistemi — Orbitron (görüntüleme), Rajdhani (UI/butonlar), Inter (gövde). Google Fonts'dan bir ön bağlı istekte yüklendi; tek bir satırı düzenleyerek kendi web yazı tiplerinizle değiştirin.
- Canlı parçacık kahraman — HTML canvas'ta 80 yüzen karmaşı + altın kızıl ışıltılar, azaltılmış hareket tercihlerine saygı göstererek. Hafif: yaklaşık 30 satır vanilla JS, kütüphane yok.
- Kaydırma tetiklemeli sayaçlar — viewport'a girer girmez istatistik çubuğu sıfırdan hedef değere kadar animasyon yapar. Pürüzsüz, ucuz, grafik kütüphanesi yok.
- IntersectionObserver ortaya çıkma animasyonları her ana blokta — GPU dostu opaklık + çeviri, sıfır düzen sapması.
- 375 px'e kadar duyarlı, üç düşünülü kırılma noktası ile (1024, 900, 640). Telefonlar için hamburger nav, tabletler için yığılmış hikaye ızgarası, küçük ekranlar için daraltılmış özellik ızgarası.
- Fragman modal'ı kapatmak için escape tuşu ve dışarı tıklamak için kapat. YouTube
<iframe>göndermek için bırakın.
Neden satış yapar
Kickstarter, Steam Next Fest veya Indiegogo'daki her karanlık fantezi oyunun, hala bir fragman gibi hissettiren bir promo sayfasına ihtiyacı vardır. Abyss bu notu kutudan çıkar — yüksek kontrast, neon karmaşısı aksentler, oyun kalitesi tipografi — ve bir pazarlama müdürünün geliştirici olmadan düzenleyebileceği tek dosya olarak gönderilir.
Teknik detaylar
- Tek HTML dosyası, yaklaşık 1.030 satır, sıkıştırılmamış ~55 KB
- Sıfır derleme adımı, sıfır çatı, sıfır çalışma zamanı bağımlılığı (yazı tipler Google Fonts'tan ön bağlantılı)
- Vanilla JS yalnızca: kaydırma tetiklemeli nav arka planı, hamburger, modal, ortaya çıkma gözlemcisi, sayaç animasyonu, parçacık canvas döngüsü
- Tamamen semantik —
nav,section,footer, uygunh1/h2hiyerarşisi, hızlı mockup için emoji aracılığıyla açıklayıcı alt-less piktogramlar - Her modern tarayıcıda güvenli — Chrome, Safari, Firefox, Edge'de test edilmiştir
Kimler için
Bir başlatma sayfası hazırlayan bağımsız oyun stüdyoları, RPG gönderen Kickstarter yaratıcıları, oyun alanında bir müşteri için promo mikrosite inşa eden ajanslar ve Unity şablonlarını aşan parlak bir "çok yakında" sayfası isteyen amatör geliştiriciler.
Bir saatten kısa sürede özelleştirme
:rootbloğundaki üç renk değişkenini değiştirin — her kartı, düğmeyi, kenarlığı ve parıltıyı yeniden stillendirir.- Emoji piktogramlarını kendi PNG/SVG sanatınızla değiştirin (bunlar bağımsızdır, sprite haritalar yok).
- İstatistik çubuğundaki sayılarda
data-targetaracılığıyla hedef değerleri değiştirin. - YouTube fragman iframe'inizi modal içine yerleştirerek yer tutucu kartı değiştirin.
- Altı oynanış sütunu, dört karakter ve beş galeri karoseli değiştirin — her biri açıkça yorumlanmış bloklarda yer alır.
Ne alırsınız
- Canlı şifreli HTML demo — satın almadan önce marketplace görüntüleyicide tam sayfayı önizleyin
- Satın alma sırasında tam küçültülmemiş HTML kaynağı
- 12 ay küçük güncellemeler (hata düzeltmeleri, tarayıcı uyumluluk ayarlamaları)
- 48 saat içinde e-posta desteği
Demo kopyası, ABYSS adlı kurgusal karanlık fantezi RPG'si için yer tutucudur. Her satır — oyun adı, istatistik numaraları, karakter açıklamaları, fiyatlandırma — aynı dosyadan düzenlenebilir. Bunu kendi başlatmanız için iskele olarak işlem görün.