/* * Kaydırma animasyonları. * * Motor: Trig.js (assets/js/vendor/trig.min.js) — görünüme giren her * [data-trig] öğesine ".trig" sınıfını ekler, çıkınca kaldırır. Yani * animasyonlar her girişte yeniden oynar; bu bilinçli bir tercih. * * Kütüphanenin hazır "trig-animations.css" dosyası KULLANILMIYOR: hedeflediği * öğeleri inline-block'a çeviriyor (kart/ızgara düzenini bozar), fade-up * mesafesi öğe yüksekliğinin %100'ü ve grow efekti scale(0)'dan başlıyor. * Aşağıdaki üç efekt onun yerine geçer. * * Tekrar oynadığı için efektler kısa ve kısa mesafeli tutulmuştur. */ :root { --anim-sure: 0.7s; /* Güçlü yavaşlama (easeOutQuint): hareket hızlı başlar, yumuşak oturur. */ --anim-egri: cubic-bezier(0.22, 1, 0.36, 1); /* Ölçek değişimlerinde hafif aşma — büyümeyi hissedilir kılan şey bu. */ --anim-egri-pop: cubic-bezier(0.34, 1.28, 0.64, 1); --anim-mesafe: 44px; /* "up" efektinin başlangıç ölçeği: öğe hem yükselir hem öne gelir. */ --anim-olcek: 0.92; --anim-kademe: 110ms; } .tume-anim { --anim-gecikme: 0ms; } /* * Henüz tetiklenmemiş öğelerin dinlenme durumu: görünmez. * * Bu satır olmadan öğe ekranın alt kenarından girdiği anda son hâliyle bir kare * boyanıyor, hemen ardından .trig eklenip animasyon baştan başlıyordu; ekranda * "bir görünüp kaybolma" olarak, yani hata gibi okunuyordu. * * Öğe görünümden tamamen çıkmadan .trig kaldırılmadığı için (IntersectionObserver * eşiği 0) üst kenardan çıkarken aniden kaybolma yaşanmaz. * * Sınıf 'e wp_head içindeki satır içi betikle eklenir. Betik hiç * çalışmazsa (JS kapalı) sınıf da olmaz; Trig.js yüklenmez ya da çalışmazsa * 2 saniyede kendini kaldırır — içerik hiçbir senaryoda gizli kalmaz. */ .tume-anim-acik .tume-anim:not(.trig) { opacity: 0; } .tume-anim--up.trig { animation: tume-anim-up var(--anim-sure) var(--anim-egri) var(--anim-gecikme) backwards; } .tume-anim--fade.trig { animation: tume-anim-fade var(--anim-sure) var(--anim-egri) var(--anim-gecikme) backwards; } .tume-anim--zoom.trig { animation: tume-anim-zoom var(--anim-sure) var(--anim-egri-pop) var(--anim-gecikme) backwards; } @keyframes tume-anim-up { from { opacity: 0; transform: translateY(var(--anim-mesafe)) scale(var(--anim-olcek)); } } @keyframes tume-anim-fade { from { opacity: 0; transform: scale(0.96); } } @keyframes tume-anim-zoom { from { opacity: 0; transform: scale(0.8); } } /* * Kart görselleri: kart yükselirken içindeki fotoğraf bir kademe sonra * büyüyerek yerine oturur. Kart çerçevelerinde overflow:hidden olmadığı için * ölçek 1'in ALTINDAN başlar — 1'in üstünden başlasa görsel çerçeveyi taşardı. */ .tume-anim--up.trig img { animation: tume-anim-gorsel calc(var(--anim-sure) + 0.15s) var(--anim-egri-pop) calc(var(--anim-gecikme) + var(--anim-kademe)) backwards; } @keyframes tume-anim-gorsel { from { opacity: 0; transform: scale(0.84); } } /* * Anasayfadaki editör bantları (Bizim Hikayemiz, TEKNOFEST): bant bir bütün * olarak yukarıdan girerken içindeki görsel bir kademe sonra hafifçe büyür. * Sınıfı inc/animasyon.php ekler. */ .tume-anim--bant.trig .wp-block-image img { animation: tume-anim-zoom calc(var(--anim-sure) + 0.2s) var(--anim-egri-pop) var(--anim-kademe) backwards; } /* Davet bandındaki buton, metinden bir kademe sonra gelir. */ .tume-cta-bandi__ic.trig .tume-cta-bandi__buton { animation: tume-anim-up var(--anim-sure) var(--anim-egri) calc(var(--anim-kademe) * 2) backwards; } /* * Parallax — yalnızca hero'nun ızgara dokusunda. Trig.js --trig-px değişkenini * -100px … 100px aralığında verir. (Banner medyasındaki paralaks kaldırıldı: * 230px'lik kutuda fark edilmiyordu, görseli boşuna %20 büyütüyordu.) */ .tume-hero__izgara[data-trig] { /* Doku döşemeli olduğu için kenar sorunu yok; arka plan kaydırılıyor. */ background-position-y: calc(var(--trig-px, 0px) / -2); } @media (prefers-reduced-motion: reduce) { .tume-anim.trig, .tume-anim--up.trig img, .tume-anim--bant.trig .wp-block-image img, .tume-cta-bandi__ic.trig .tume-cta-bandi__buton { animation: none; } .tume-anim-acik .tume-anim:not(.trig) { opacity: 1; } .tume-hero__izgara[data-trig] { background-position-y: 0; } }