feat(welcome): Hoşgeldin / scrollytelling karşılama ekranı#44
Merged
Conversation
…k-arkası toggle - İlk yükleme: tema CSS boyamadan önce uygulanır (head inline script) → açılışta gün/gece geçiş animasyonu oynamaz. Saat 06–20 gündüz / 20–06 gece; ilk açılışta sabitlenir (refresh değiştirmez). - Giriş animasyonları (.welcome-intro from-state + transition; RAF + setTimeout fallback): logo üstten, hero aşağıdan (uzatıldı), gündüz güneş parlayarak + bulutlar yandan, gece ay opaklaşarak + yıldızlar üstten inip parlayarak. - Toggle: güneş/ay artık toprağın ARKASINA batıp arkadan doğar (z-index 2 < soil 3, batış translateY 96vh, occlusion ile gizlenir). - Fix: toggle z-index düşünce topbar/hero tıklamayı kapatıyordu → pointer-events none (login butonu auto) ile güneş/ay yeniden tıklanabilir. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…eştir - Yaprak beyaz gölgesi: rotasyon yönü yaprağın eğimine ters'ti → çevrildi + üst yüzeye taşındı - Çıkma/girme: .popped'tan z-index:4 kaldırıldı → filiz toprağın ARKASINDA (z-index 2) kalır; yükseliş -15% → yüz+gövde+kol höyük üstünde belirir, alt gövde gömülü (groundhog) → 'perde önü' değil - Model ~%11 küçültüldü (280x327 → 248x290) - Gözler imleci hafifçe takip eder (#welcomeFilizPupilL/R + mousemove; initWelcomeFilizEyes) - Geri gömülme süresi 3sn → 5sn (filiz.js) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Hover wave: kollar vücuttan ayrık (translateX) + abartısız (25°), omuz pivotu (view-box) → savurmaz - waveArm/waveArmL: simetrik (sağ negatif / sol ayna pozitif), tek geçiş - İlk çıkış selamı (greetWave): açılışta Filiz otomatik çıkar + sağ eliyle başın sağ-üstünde sağ-sol yay çizerek 'merhaba' sallar, sonra geri gömülür (tıklama gerektirmez) - welcomeFilizGreeting() + main.js açılışta tetikler; popFiliz re-bury 5sn Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Tıklama akıllı (filizInteract): gömülüyken çık+selam; çıkmışken LOVE — küçük kol salınımı + göz kırpma + kafa üstünde kalp (seviliyormuş gibi). Çıkmak için tık ≠ love - hover wave kaldırıldı (çıkıştan sonra selamı eziyordu); welcome SVG'ye kalpler eklendi - Çıkış: kol açma yok → sadece gövde yükselir, sonra sağ el selamı - Selam (greetWave): el sağa kaydırıldı; .popped+.greeting tek mutation + animation-delay 1.4s + both fill → 'el birkaç px kalkıp başa ışınlanıp tekrar sallama' glitch'i giderildi - Büyük kalp both fill → animasyon sonu başlangıç-pozisyonuna ışınlanma giderildi - Otomatik açılış selamı init başına alındı (await'lerden bağımsız) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Sıralı sun/moon: yönlü transition-delay → güneş tam toprağın arkasına girince ay çıkar (artık eşzamanlı değil), tersinir; bulutlar güneşle, yıldızlar ayla senkron - Smooth gökyüzü: günbatımı + gece overlay katmanları opacity crossfade ile gündüz→günbatımı→gece yavaşça (anlık renk değişimi yok), tersinir - Gecikmeler .welcome-cycle (yalnız kullanıcı toggle'ında, JS ekler) ile kapılı → ilk açılış (entrance) animasyonları etkilenmez Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ll düzelt Mekanik: kamera toprağa dalar — SABİT ölçek (büyütme yok). Doğal scroll'da yüzey (pin 100vh) yukarı kayıp çıkar, kahverengi toprak-içi (underground 200vh, koyulaşan gradient) ekranı doldurur → derinleşiriz. Filiz yüzeyle çıkıp solar. - pin: sticky → relative (kamera dalsın diye doğal akış) - underground: kahverengi gradient (#4e3119→#281a0d), 200vh = derinlik mesafesi - seam dikişsiz: soil dibi rengi eşit (#4e3119) + -8px bindirme + z-index 4 (Filiz'in soil altından yeşil sızması örtüldü) - Filiz pop topraktan ÇIKIŞ geri (z-index 2, soil 3 arkasında); wrapper passthrough → buried/popped z-index iç Filiz'de geçerli - scroll'da Filiz öne ani-beliriş kaldırıldı Toplam scroll: 300vh (1 ekran yüzey + 2 ekran toprak-içi). 3 dosya. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…cky pin) Yay/döndürme kaldırıldı. Mekanik: act1 (200vh) içinde pin STICKY → ekran tamamen toprak olana dek sahne TUTULUR (slider kaymaz); --rise ile toprak grubu (höyük + dolgu + Filiz) DÜZ yukarı kayar (translate, ölçek sabit). rise 1'de %100 #4e3119 + pin serbest → underground'a dikişsiz inilir. Başlık/logo solarak kaybolur. - index.html: .welcome-act1 sarmalı + .welcome-soil-fill (höyük arkası, gökyüzü önü) - welcome.css: arc bloğu sil; pin sticky; soil/fill/filiz-rise translateY(--rise*-100vh); topbar/hero opacity+translate fade; hero animation both→backwards (fade'i ezmesin) - main.js: --rise = clamp(scrollTop / (act1 - 1 ekran), 0, 1) Mod-bağımsız (gündüz=gece dolum). Toplam scroll 400vh. Doğrulandı: rise 0 birebir, 0.5 sticky+düz, 1 tam dolum (boşluksuz), derin dikişsiz, pop arkadan çıkış. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ylı yan giriş Faz 2: underground artık tam-ekran "sahne"ler. Her özellik bir sahne; kaydırınca scroll-snap ile kameraya oturur, kart bir yandan + açıklama KARŞIDAN yaylı (overshoot) girer (zigzag: sol/sağ dönüşümlü). Intro + 5 özellik + CTA. İçerik/alt boşluk kırpıldı, toprak gradient'i yumuşatıldı (üst/alt farkı azaldı). - index.html: .wu-scene'ler (intro, 5 özellik [kart+açıklama], CTA); zigzag data-side - welcome.css: scroll-snap proximity; sahne layout (row/row-reverse); .wu-desc; yaylı reveal (.from-l/r/b + cubic-bezier overshoot 1.56); mobil dikey yığma; gradient smooth - main.js: IntersectionObserver yön sınıfı (data-side) + toggle (re-trigger) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Dolum ödülü (#2): intro başlığı dolu toprağın üstünde --rise'a bağlı belirir (ayrı boş intro sahnesi kaldırıldı); act1 200vh→150vh (hafif çekince dolar) - JS yaylı snap: dolum bölgesinde scroll durunca başlığa/yüzeye overshoot ile oturur (tersinir); yüzey solması sıkılaştırıldı (çift-başlık çakışması yok) - Sahneler 100vh→80vh; reveal 0.75s→0.5s (punchy yay easing) - Toprak-altı DEKOR: kökler (geçişi süsler), sevimli solucan (yüzlü), uyuyan köstebek (zzz), filizlenen tohumlar, çakıllar + ince doku → boşluğu doldurur Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…tmeler Navigasyon: native scroll yerine FULLPAGE — her kaydırma/swipe/ok = tam 1 sayfa (yüzey→başlık→5 özellik→CTA), easeOutCubic ile smooth. Tek jest=tek sahne (momentum kilidi + garanti açılış → takılmaz). Sağda yan nav-dot'lar (toprakta görünür, tıkla→ o sahneye atla). Kart giriş/çıkışı zigzag yandan + çarpıcı yay (önceki geldiği gibi çıkar). Dekor: 5 farklı kök tasarımı, düzeltilmiş solucan ağzı, mantar/kurtçuk/su damlası, derinlikle taşlaşma (kayalar) + kristal/mineral (derin katman). Gradient nazik kademeli. Düzeltmeler: - Hard-refresh'te yüzey başlığı dolumda toprağın ÖNÜNDE kalıyordu → giriş animasyonu hero'nun çocuklarına taşındı; hero'nun scroll-fade opacity'si artık soldurur - Filiz pop'taki toprak-saçma (dirt) animasyonu kaldırıldı Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…u kartların arkasından çıkar - 5 özellik kartı dikey "ikon+başlık → mini-görsel → alt-bilgi" yapısına büyütüldü (~110px → ~260px) - Her karta özelliğe-özgü mini-görsel (workflow ile paralel tasarlandı, --accent renkli): - 💧 nem: 24-saat sparkline + kuru eşik + %22 - 🚿 sulama: ≈240 L + damla pip + su-dolum çubuğu - 🦠 hastalık: yaprak + leaf_rust + %84 güven halkası - 🌱 gübre: N-P-K çubuk grafik (80/40/50 kg/ha) - 🔔 bildirim: 3-satır liste (kritik/orta/tamam noktaları) - Koyu/derin toprakta kontrast: kart tabanı güçlendirildi (accent %24 + beyaz %7 + koyu taban + parlak kenar) - 7 dekor öğesi kartların/CTA'nın arkasından dikey boşluklara taşındı (kök, mantar, damla, köstebek, kaya, 2 çakıl) - Sonuç: 5 kart + CTA = 0 dekor çakışması (gerçek-dinlenme pozisyonunda ölçülerek doğrulandı) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Özet
Login öncesi tam-ekran karşılama/scrollytelling deneyimi: kullanıcı yüzeyden toprağın altına "dalar", SFDAP'ın 5 özelliğini mini-görsellerle keşfeder, CTA ile giriş yapar.
Akış
Teknik
Vanilla JS ES-module + CSS, build-less. Scroll-bağlı
--risecustom property; özel fullpage scroll-hijack navigasyon. 11 commit.Test notu
Hareketler görünür tarayıcıda doğrulanmalı (gizli sekmede animasyonlar duraklar). Sonraki iyileştirmeler için ayrı yol haritası hazırlandı (kaydırma ipucu, kalıcı "Giriş Yap", reduced-motion, klavye/odak).