{"id":37623,"date":"2026-01-10T19:40:55","date_gmt":"2026-01-10T16:40:55","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37623"},"modified":"2026-01-10T19:40:55","modified_gmt":"2026-01-10T16:40:55","slug":"pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/","title":{"rendered":"Pure CSS ile Chrome’da Paralaks Kayd\u0131rma Efekti Olu\u015fturma"},"content":{"rendered":"

<\/p>\n

Pure CSS ile Chrome’da Paralaks Kayd\u0131rma Efekti Olu\u015fturma<\/h2>\n

Giri\u015f: Paralaks Kayd\u0131rma ve Saf CSS’in G\u00fcc\u00fc<\/h3>\n

Web tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve g\u00f6rsel derinlik katan pop\u00fcler efektlerden biri paralaks kayd\u0131rmad\u0131r. Bu efekt, arka plan \u00f6\u011felerinin \u00f6n plan \u00f6\u011felerine g\u00f6re daha yava\u015f kaymas\u0131 prensibine dayan\u0131r ve bu sayede sayfaya \u00fc\u00e7 boyutlu bir his ve dinamizm kazand\u0131r\u0131r. Geleneksel olarak JavaScript k\u00fct\u00fcphaneleriyle uygulanan paralaks efektleri, g\u00fcn\u00fcm\u00fczde modern CSS \u00f6zelliklerinin geli\u015fimi sayesinde tamamen CSS ile, yani “Pure CSS” olarak da ba\u015far\u0131yla olu\u015fturulabilmektedir. Bu durum, performans\u0131 art\u0131rma, kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltma ve taray\u0131c\u0131 uyumlulu\u011funu geli\u015ftirme gibi \u00f6nemli avantajlar sunar. \u00d6zellikle Chrome gibi modern taray\u0131c\u0131lar, CSS tabanl\u0131 3D d\u00f6n\u00fc\u015f\u00fcmleri ve donan\u0131m h\u0131zland\u0131rmay\u0131 m\u00fckemmel bir \u015fekilde destekleyerek bu t\u00fcr efektlerin ak\u0131c\u0131 bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n

Bu makalede, Pure CSS kullanarak Chrome’da nas\u0131l etkileyici paralaks kayd\u0131rma efektleri olu\u015fturabilece\u011finizi detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Farkl\u0131 teknikleri, her birinin avantaj ve dezavantajlar\u0131n\u0131, gerekli HTML yap\u0131lar\u0131n\u0131 ve CSS kodlar\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z. Ayr\u0131ca, performans optimizasyonlar\u0131, duyarl\u0131 tasar\u0131m yakla\u015f\u0131mlar\u0131 ve Chrome’a \u00f6zel ipu\u00e7lar\u0131 \u00fczerinde durarak, projelerinizde bu efektleri en verimli \u015fekilde kullanman\u0131z\u0131 sa\u011flayacak kapsaml\u0131 bir rehber sunaca\u011f\u0131z.<\/p>\n

Paralaks Kayd\u0131rma Nedir?<\/h3>\n

Paralaks kayd\u0131rma (parallax scrolling), bir web sayfas\u0131n\u0131n farkl\u0131 katmanlar\u0131ndaki \u00f6\u011felerin kayd\u0131rma h\u0131z\u0131yla orant\u0131l\u0131 olarak farkl\u0131 h\u0131zlarda hareket etmesiyle olu\u015fan g\u00f6rsel bir efekttir. \u00d6rne\u011fin, bir web sayfas\u0131nda a\u015fa\u011f\u0131 do\u011fru kayd\u0131r\u0131rken, en \u00f6ndeki metin ve i\u00e7erik katman\u0131 normal h\u0131zda hareket ederken, hemen arkas\u0131ndaki g\u00f6rsel katman daha yava\u015f, en arka plandaki g\u00f6rsel katman ise \u00e7ok daha yava\u015f hareket edebilir. Bu h\u0131z fark\u0131, kullan\u0131c\u0131n\u0131n alg\u0131s\u0131nda bir derinlik hissi yarat\u0131r ve sayfan\u0131n d\u00fcz bir y\u00fczey yerine, katmanlardan olu\u015fan bir alan gibi g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n

Bu efekt, genellikle web sitelerinin “hero” b\u00f6l\u00fcmlerinde, hikaye anlat\u0131m\u0131 odakl\u0131 sayfalarda veya \u00fcr\u00fcn tan\u0131t\u0131m sayfalar\u0131nda kullan\u0131l\u0131r. Amac\u0131, kullan\u0131c\u0131y\u0131 sayfada daha uzun s\u00fcre tutmak, belirli bir mesaja veya g\u00f6rsele dikkat \u00e7ekmek ve genel kullan\u0131c\u0131 deneyimini daha etkile\u015fimli ve ak\u0131lda kal\u0131c\u0131 hale getirmektir.<\/p>\n

Neden Pure CSS ile Paralaks?<\/h3>\n

Ge\u00e7mi\u015fte paralaks efektleri genellikle JavaScript k\u00fct\u00fcphaneleri (\u00f6rne\u011fin, ScrollMagic, Parallax.js) veya \u00f6zel JavaScript kodlar\u0131 arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015ftirilirdi. Ancak, bu yakla\u015f\u0131mlar\u0131n baz\u0131 dezavantajlar\u0131 vard\u0131:<\/p>\n

* Performans Sorunlar\u0131:<\/strong> JavaScript ile DOM manip\u00fclasyonlar\u0131 ve kayd\u0131rma olaylar\u0131n\u0131 dinlemek, \u00f6zellikle karma\u015f\u0131k efektlerde veya d\u00fc\u015f\u00fck g\u00fc\u00e7l\u00fc cihazlarda performans darbo\u011fazlar\u0131na neden olabilir. Taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 me\u015fgul edebilir ve sayfa ak\u0131c\u0131l\u0131\u011f\u0131n\u0131 bozabilir.
\n* Kod Karma\u015f\u0131kl\u0131\u011f\u0131:<\/strong> Ek bir JavaScript k\u00fct\u00fcphanesi entegre etmek veya s\u0131f\u0131rdan JavaScript kodu yazmak, projenin kod taban\u0131n\u0131 art\u0131r\u0131r ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r.
\n* Taray\u0131c\u0131 Uyumlulu\u011fu:<\/strong> Baz\u0131 JavaScript tabanl\u0131 \u00e7\u00f6z\u00fcmler, farkl\u0131 taray\u0131c\u0131larda veya mobil cihazlarda tutars\u0131z davran\u0131\u015flar sergileyebilir.<\/p>\n

Pure CSS yakla\u015f\u0131mlar\u0131 ise bu dezavantajlar\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde ortadan kald\u0131r\u0131r:<\/p>\n

* Donan\u0131m H\u0131zland\u0131rma:<\/strong> Modern taray\u0131c\u0131lar, CSS transform<\/code> ve opacity<\/code> gibi \u00f6zelliklerin animasyonlar\u0131n\u0131 ve ge\u00e7i\u015flerini GPU (Grafik \u0130\u015flem Birimi) \u00fczerinden h\u0131zland\u0131rabilir. Bu, \u00e7ok daha ak\u0131c\u0131 ve performansl\u0131 animasyonlar sa\u011flar.
\n* Daha Temiz Kod:<\/strong> Sadece CSS kullanarak, HTML yap\u0131s\u0131 daha basit kal\u0131r ve JavaScript ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 ortadan kalkar. Bu, projenin daha kolay y\u00f6netilmesini ve bak\u0131m\u0131n\u0131 sa\u011flar.
\n* Taray\u0131c\u0131 Deste\u011fi:<\/strong> CSS’in background-attachment: fixed;<\/code> veya 3D d\u00f6n\u00fc\u015f\u00fcm \u00f6zellikleri, modern taray\u0131c\u0131lar\u0131n tamam\u0131nda geni\u015f bir destek bulur. Chrome \u00f6zelinde bu destek olduk\u00e7a g\u00fc\u00e7l\u00fcd\u00fcr.
\n* Eri\u015filebilirlik:<\/strong> Do\u011fru uyguland\u0131\u011f\u0131nda, Pure CSS paralaks efektleri genellikle JavaScript tabanl\u0131 \u00e7\u00f6z\u00fcmlerden daha eri\u015filebilir olabilir, ancak yine de dikkatli olmak gerekir.<\/p>\n

Bu nedenlerle, Pure CSS ile paralaks efektleri olu\u015fturmak, hem geli\u015ftiriciler hem de son kullan\u0131c\u0131lar i\u00e7in daha iyi bir deneyim sunar.<\/p>\n

Temel Prensipler ve Teknikler<\/h3>\n

Pure CSS ile paralaks kayd\u0131rma efekti olu\u015fturman\u0131n ba\u015fl\u0131ca iki ana tekni\u011fi vard\u0131r:<\/p>\n

1. background-attachment: fixed;<\/code> Kullan\u0131m\u0131:<\/strong> En basit ve en yayg\u0131n y\u00f6ntemdir. Arka plan g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc viewport’a g\u00f6re sabit tutarken, \u00f6n plan i\u00e7eri\u011finin \u00fczerinden kaymas\u0131n\u0131 sa\u011flar. Ger\u00e7ek bir 3D derinlik olmasa da, etkili bir paralaks hissi verir.
\n2. CSS 3D D\u00f6n\u00fc\u015f\u00fcmleri (transform<\/code>, perspective<\/code>) Kullan\u0131m\u0131:<\/strong> Daha geli\u015fmi\u015f ve ger\u00e7ek\u00e7i bir 3D paralaks efekti sa\u011flar. \u00d6\u011feleri Z ekseninde farkl\u0131 mesafelere yerle\u015ftirerek ve buna g\u00f6re \u00f6l\u00e7ekleyerek derinlik yan\u0131lsamas\u0131 yarat\u0131r.<\/p>\n

Bu iki tekni\u011fi ve bunlar\u0131n nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131ca inceleyelim.<\/p>\n

Y\u00f6ntem 1: background-attachment: fixed;<\/code> ile Basit Paralaks<\/h3>\n

Bu y\u00f6ntem, Pure CSS ile paralaks efekti olu\u015fturman\u0131n en kolay ve en yayg\u0131n yoludur. \u00c7al\u0131\u015fma prensibi olduk\u00e7a basittir: bir HTML \u00f6\u011fesinin arka plan g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc taray\u0131c\u0131 penceresine (viewport) g\u00f6re sabit tutarken, bu \u00f6\u011fenin \u00fczerinde veya alt\u0131nda bulunan di\u011fer i\u00e7eriklerin normal \u015fekilde kaymas\u0131na izin verir. Bu, arka plan\u0131n “geride kald\u0131\u011f\u0131” ve \u00f6n plan\u0131n onun \u00fczerinden ge\u00e7ti\u011fi yan\u0131lsamas\u0131n\u0131 yarat\u0131r.<\/p>\n

Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n

Belirli bir b\u00f6l\u00fcme (\u00f6rne\u011fin, bir div<\/code> veya section<\/code> etiketi) bir arka plan g\u00f6r\u00fcnt\u00fcs\u00fc atars\u0131n\u0131z ve bu arka plana background-attachment: fixed;<\/code> stilini uygulars\u0131n\u0131z. Bu \u00f6zellik, arka plan g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fcn kayd\u0131rma ile birlikte hareket etmesini engeller. Di\u011fer CSS \u00f6zellikleri (background-size: cover;<\/code>, background-position: center;<\/code> gibi) g\u00f6r\u00fcnt\u00fcn\u00fcn d\u00fczg\u00fcn bir \u015fekilde yerle\u015fmesini sa\u011flar.<\/p>\n

HTML Yap\u0131s\u0131<\/h4>\n

Bu y\u00f6ntem i\u00e7in genellikle birden fazla b\u00f6l\u00fcmden olu\u015fan bir HTML yap\u0131s\u0131 kullan\u0131l\u0131r. Her paralaks efekti istedi\u011finiz b\u00f6l\u00fcm i\u00e7in ayr\u0131 bir div<\/code> veya section<\/code> etiketi olu\u015fturursunuz.<\/p>\n

\n    
\n        
B\u00f6l\u00fcm Bir<\/h3>\n        
Bu, paralaks efektli ilk b\u00f6l\u00fcmd\u00fcr. Arka plan sabit kal\u0131rken metin kayar.<\/p>\n    <\/div>\n<\/div>\n\n
\n    
\n        
Normal \u0130\u00e7erik<\/h3>\n        
Bu b\u00f6l\u00fcm normal bir \u015fekilde kayar ve herhangi bir paralaks efekti i\u00e7ermez.<\/p>\n        
Daha fazla i\u00e7erik ekleyerek kayd\u0131rma mesafesini art\u0131r\u0131n.<\/p>\n        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n        
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n    <\/div>\n<\/div>\n\n
\n    
\n        
B\u00f6l\u00fcm \u0130ki<\/h3>\n        
\u0130kinci paralaks b\u00f6l\u00fcm\u00fc. Farkl\u0131 bir arka plan g\u00f6r\u00fcnt\u00fcs\u00fcyle derinlik hissini s\u00fcrd\u00fcr\u00fcyoruz.<\/p>\n    <\/div>\n<\/div>\n\n
\n    
\n        
Daha Fazla \u0130\u00e7erik<\/h3>\n        
Web sitenizin di\u011fer k\u0131s\u0131mlar\u0131 bu normal b\u00f6l\u00fcmlerde yer alabilir.<\/p>\n        
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p>\n        
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n    <\/div>\n<\/div><\/code><\/pre>\n
CSS Kodu<\/h4>\n
body, html {\n    margin: 0;\n    padding: 0;\n    font-family: Arial, sans-serif;\n    height: 100%; \/ HTML ve body'nin y\u00fcksekli\u011fi \u00f6nemli <\/em>\/\n    overflow-x: hidden; \/ Yatay kayd\u0131rmay\u0131 engelle <\/em>\/\n}\n\n.parallax-section {\n    position: relative;\n    height: 100vh; \/ Viewport y\u00fcksekli\u011finin %100'\u00fc <\/em>\/\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: white;\n    text-align: center;\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-attachment: fixed; \/ Anahtar \u00f6zellik <\/em>\/\n}\n\n\/ Her paralaks b\u00f6l\u00fcm\u00fc i\u00e7in farkl\u0131 arka plan <\/em>\/\n.parallax-one {\n    background-image: url('https:\/\/picsum.photos\/id\/1040\/1920\/1080'); \/ \u00d6rnek g\u00f6rsel URL <\/em>\/\n}\n\n.parallax-two {\n    background-image: url('https:\/\/picsum.photos\/id\/1043\/1920\/1080'); \/ \u00d6rnek g\u00f6rsel URL <\/em>\/\n}\n\n.normal-section {\n    height: auto; \/ \u0130\u00e7eri\u011fine g\u00f6re y\u00fckseklik <\/em>\/\n    min-height: 50vh; \/ Minimum y\u00fckseklik <\/em>\/\n    background-color: #f4f4f4;\n    color: #333;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.content {\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 20px;\n    background: rgba(0, 0, 0, 0.5); \/ Okunabilirlik i\u00e7in arka plan <\/em>\/\n    border-radius: 8px;\n}\n\n.normal-section .content {\n    background: none;\n    color: #333;\n}\n\nh3 {\n    font-size: 3em;\n    margin-bottom: 20px;\n    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);\n}\n\np {\n    font-size: 1.2em;\n    line-height: 1.6;\n}\n\n\/ Mobil cihazlar i\u00e7in ek d\u00fczenlemeler <\/em>\/\n@media (max-width: 768px) {\n    .parallax-section {\n        background-attachment: scroll; \/ Mobil cihazlarda fixed performans\u0131 d\u00fc\u015f\u00fcrebilir <\/em>\/\n        background-position: center center !important; \/ Fixed kapat\u0131l\u0131nca do\u011fru pozisyon <\/em>\/\n    }\n    h3 {\n        font-size: 2em;\n    }\n    p {\n        font-size: 1em;\n    }\n}<\/code><\/pre>\n
S\u0131n\u0131rlamalar ve Chrome’a \u00d6zel Notlar<\/h4>\n
*   Ger\u00e7ek 3D De\u011fil:<\/strong> Bu y\u00f6ntem, ger\u00e7ek bir 3D derinlik yaratmaz. Sadece arka plan\u0131n sabit kalmas\u0131 yan\u0131lsamas\u0131n\u0131 kullan\u0131r. \u00d6n plan ve arka plan \u00f6\u011feleri aras\u0131ndaki h\u0131z fark\u0131, Z eksenindeki konum fark\u0131ndan kaynaklanmaz.
\n*   Mobil Cihaz Uyumlulu\u011fu:<\/strong> Baz\u0131 mobil taray\u0131c\u0131lar (\u00f6zellikle iOS Safari) background-attachment: fixed;<\/code> \u00f6zelli\u011fini tam olarak desteklemez veya sim\u00fcle edilmi\u015f bir \u015fekilde uygular. Bu durum, paralaks efektinin ak\u0131c\u0131 \u00e7al\u0131\u015fmamas\u0131na veya hi\u00e7 g\u00f6r\u00fcnmemesine neden olabilir. Yukar\u0131daki CSS kodunda oldu\u011fu gibi, medya sorgular\u0131 kullanarak mobil cihazlarda background-attachment: scroll;<\/code> olarak de\u011fi\u015ftirmek iyi bir uygulamad\u0131r.
\n*   Performans:<\/strong> Chrome gibi modern taray\u0131c\u0131larda bu y\u00f6ntem genellikle sorunsuz ve performansl\u0131 \u00e7al\u0131\u015f\u0131r \u00e7\u00fcnk\u00fc fixed<\/code> konumland\u0131rma GPU taraf\u0131ndan h\u0131zland\u0131r\u0131labilir. Ancak, \u00e7ok b\u00fcy\u00fck arka plan g\u00f6rselleri kullanmaktan ka\u00e7\u0131nmak ve g\u00f6rselleri optimize etmek her zaman \u00f6nemlidir.<\/p>\n
Y\u00f6ntem 2: CSS 3D D\u00f6n\u00fc\u015f\u00fcmleri ve perspective<\/code> ile Ger\u00e7ek Paralaks<\/h3>\n
Bu y\u00f6ntem, background-attachment: fixed;<\/code> tekni\u011fine g\u00f6re \u00e7ok daha geli\u015fmi\u015f ve ger\u00e7ek\u00e7i bir 3D paralaks efekti sunar. \u00d6\u011feleri ger\u00e7ekten 3D uzayda konumland\u0131rarak (Z ekseninde ileri veya geri iterek) ve bunlar\u0131 uygun \u015fekilde \u00f6l\u00e7ekleyerek derinlik yan\u0131lsamas\u0131 yarat\u0131r. Bu teknik, taray\u0131c\u0131n\u0131n 3D render yeteneklerinden tam olarak faydalan\u0131r ve genellikle GPU h\u0131zland\u0131rmas\u0131 ile \u00e7ok ak\u0131c\u0131 bir deneyim sunar.<\/p>\n
Temel Konseptler<\/h4>\n
1.  perspective<\/code>:<\/strong> Bu CSS \u00f6zelli\u011fi, bir 3D sahnesinin derinli\u011fini tan\u0131mlar. Genellikle ana kapsay\u0131c\u0131ya uygulan\u0131r ve \u00f6\u011felerin ne kadar uza\u011fa veya yak\u0131na yerle\u015ftirildi\u011fine ba\u011fl\u0131 olarak nas\u0131l k\u00fc\u00e7\u00fclece\u011fini veya b\u00fcy\u00fcyece\u011fini belirler. K\u00fc\u00e7\u00fck bir perspective<\/code> de\u011feri (\u00f6rne\u011fin, 1px<\/code> veya 100px<\/code>), daha belirgin bir 3D efekti yarat\u0131r, \u00e7\u00fcnk\u00fc bak\u0131\u015f a\u00e7\u0131s\u0131 daha yak\u0131nd\u0131r. B\u00fcy\u00fck bir de\u011fer (\u00f6rne\u011fin, 1000px<\/code> veya 2000px<\/code>), daha az belirgin bir 3D efekti yarat\u0131r.
\n2.  perspective-origin<\/code>:<\/strong> Bak\u0131\u015f a\u00e7\u0131s\u0131n\u0131n konumunu belirler. Varsay\u0131lan olarak center center<\/code>‘d\u0131r. center top<\/code> veya left bottom<\/code> gibi de\u011ferler verilebilir.
\n3.  transform-style: preserve-3d;<\/code>:<\/strong> Bu \u00f6zellik, bir \u00f6\u011fenin \u00e7ocuk \u00f6\u011felerinin 3D uzayda konumland\u0131r\u0131lmas\u0131n\u0131 sa\u011flar. E\u011fer bu \u00f6zellik ayarlanmazsa, \u00e7ocuk \u00f6\u011feler d\u00fcz bir \u015fekilde (2D) render edilir ve 3D d\u00f6n\u00fc\u015f\u00fcmleri beklenen etkiyi g\u00f6stermez. Genellikle paralaks gruplar\u0131n\u0131 i\u00e7eren kapsay\u0131c\u0131ya uygulan\u0131r.
\n4.  transform: translateZ();<\/code> ve scale();<\/code>:<\/strong>
\n    *   translateZ(z)<\/code>: Bir \u00f6\u011feyi Z ekseninde z<\/code> birim ileri veya geri hareket ettirir. Pozitif de\u011ferler \u00f6\u011feyi kullan\u0131c\u0131ya yakla\u015ft\u0131r\u0131r, negatif de\u011ferler ise uzakla\u015ft\u0131r\u0131r.
\n    *   scale()<\/code>: Bir \u00f6\u011fenin boyutunu de\u011fi\u015ftirir.
\n    *   Matematiksel \u0130li\u015fki:<\/strong> Bir \u00f6\u011feyi Z ekseninde geri itti\u011finizde (negatif translateZ<\/code>), bak\u0131\u015f a\u00e7\u0131m\u0131zdan uzakla\u015ft\u0131\u011f\u0131 i\u00e7in do\u011fal olarak k\u00fc\u00e7\u00fcl\u00fcr. Paralaks efekti i\u00e7in, bu k\u00fc\u00e7\u00fclmeyi telafi etmek ve \u00f6\u011fenin orijinal boyutunda g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in scale()<\/code> kullan\u0131r\u0131z. Bunun i\u00e7in kullan\u0131lan form\u00fcl: scale = 1 + (-z \/ perspective)<\/code>. \u00d6rne\u011fin, perspective: 1px;<\/code> ve translateZ(-1px);<\/code> ise, scale = 1 + (1 \/ 1) = 2;<\/code> olur. Bu, \u00f6\u011feyi Z ekseninde 1 piksel geri itip, boyutunu 2 kat\u0131na \u00e7\u0131kararak orijinal boyutunda g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n
HTML Yap\u0131s\u0131<\/h4>\n
Bu y\u00f6ntem i\u00e7in daha i\u00e7 i\u00e7e ge\u00e7mi\u015f bir yap\u0131ya ihtiyac\u0131m\u0131z var. Bir ana parallax-container<\/code> i\u00e7erisinde, her biri kendi paralaks katmanlar\u0131n\u0131 bar\u0131nd\u0131ran parallax-group<\/code>‘lar bulunur.<\/p>\n
\n    
\n        
<\/div>\n        
\n            
Ho\u015f Geldiniz<\/h3>\n            
Bu, CSS 3D d\u00f6n\u00fc\u015f\u00fcmleri ile olu\u015fturulmu\u015f bir paralaks efekti \u00f6rne\u011fidir.<\/p>\n        <\/div>\n    <\/div>\n\n    
\n        
\n            
Derinlik Hissi<\/h3>\n            
Farkl\u0131 katmanlar, farkl\u0131 h\u0131zlarda kayarak ger\u00e7ek bir derinlik hissi yarat\u0131r.<\/p>\n            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n            
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n            
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p>\n            
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n        <\/div>\n        
<\/div>\n    <\/div>\n\n    
\n        
<\/div>\n        
\n            
Son B\u00f6l\u00fcm<\/h3>\n            
Bu teknikle web sitelerinize etkileyici g\u00f6rsel efektler katabilirsiniz.<\/p>\n        <\/div>\n    <\/div>\n<\/div><\/code><\/pre>\n
CSS Kodu<\/h4>\n
Bu CSS kodunda, perspective<\/code> de\u011feri 1px<\/code> olarak ayarlanm\u0131\u015ft\u0131r. Bu, Z eksenindeki her 1 pikselin (uzakla\u015fma veya yakla\u015fma) \u00e7ok b\u00fcy\u00fck bir \u00f6l\u00e7ekleme fark\u0131na neden olaca\u011f\u0131 anlam\u0131na gelir. Bu sayede, translateZ(-1px)<\/code> gibi k\u00fc\u00e7\u00fck Z ekseni hareketleri bile g\u00f6zle g\u00f6r\u00fcl\u00fcr bir paralaks etkisi yarat\u0131r.<\/p>\n
body, html {\n    margin: 0;\n    padding: 0;\n    font-family: Arial, sans-serif;\n    height: 100%;\n    overflow: hidden; \/ HTML ve body'de kayd\u0131rmay\u0131 engelle <\/em>\/\n}\n\n\/ Ana kapsay\u0131c\u0131: 3D sahneyi ve kayd\u0131rmay\u0131 y\u00f6netir <\/em>\/\n.parallax-container {\n    height: 100vh;\n    overflow-x: hidden;\n    overflow-y: scroll; \/ Dikey kayd\u0131rmay\u0131 burada sa\u011flar\u0131z <\/em>\/\n    perspective: 1px; \/ 3D derinli\u011fini tan\u0131mlar <\/em>\/\n    perspective-origin: 0 0; \/ Bak\u0131\u015f a\u00e7\u0131s\u0131n\u0131n ba\u015flang\u0131\u00e7 noktas\u0131 <\/em>\/\n}\n\n\/ Her paralaks grubu: Kendi i\u00e7inde 3D katmanlar\u0131 bar\u0131nd\u0131r\u0131r <\/em>\/\n.parallax-group {\n    position: relative;\n    height: 100vh; \/ Her grup viewport y\u00fcksekli\u011finde <\/em>\/\n    transform-style: preserve-3d; \/ \u00c7ocuk \u00f6\u011felerin 3D uzayda kalmas\u0131n\u0131 sa\u011flar <\/em>\/\n}\n\n\/ T\u00fcm paralaks katmanlar\u0131 i\u00e7in ortak stil <\/em>\/\n.parallax-layer {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform-origin: center center; \/ D\u00f6n\u00fc\u015f\u00fcm\u00fcn merkezden yap\u0131lmas\u0131n\u0131 sa\u011flar <\/em>\/\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: white;\n    text-align: center;\n    padding: 20px;\n    box-sizing: border-box; \/ Padding'in geni\u015fli\u011fi etkilememesi i\u00e7in <\/em>\/\n}\n\n\/ Arka plan katman\u0131: En geride, en yava\u015f hareket eder <\/em>\/\n.parallax-layer-back {\n    transform: translateZ(-1px) scale(2); \/ Z ekseninde geri it ve telafi etmek i\u00e7in \u00f6l\u00e7ekle <\/em>\/\n    background-image: url('https:\/\/picsum.photos\/id\/1047\/1920\/1080');\n    background-size: cover;\n    background-position: center;\n    will-change: transform; \/ Performans optimizasyonu <\/em>\/\n}\n.layer-img-2 {\n    background-image: url('https:\/\/picsum.photos\/id\/1044\/1920\/1080');\n}\n\n\/ Orta katman: Normal h\u0131zda hareket eder, genellikle ana i\u00e7erik buradad\u0131r <\/em>\/\n.parallax-layer-base {\n    transform: translateZ(0); \/ Z ekseninde hareket etmez <\/em>\/\n    background: rgba(0, 0, 0, 0.4); \/ \u0130\u00e7eri\u011fin okunabilirli\u011fini art\u0131rmak i\u00e7in <\/em>\/\n    will-change: transform; \/ Performans optimizasyonu <\/em>\/\n}\n\n\/ \u00d6n plan katman\u0131: En \u00f6nde, en h\u0131zl\u0131 hareket eder (iste\u011fe ba\u011fl\u0131) <\/em>\/\n.parallax-layer-foreground {\n    transform: translateZ(1px) scale(0.5); \/ Z ekseninde \u00f6ne getir ve telafi etmek i\u00e7in \u00f6l\u00e7ekle <\/em>\/\n    background: rgba(255, 255, 255, 0.2); \/ \u00d6rnek \u00f6n plan efekti <\/em>\/\n    will-change: transform; \/ Performans optimizasyonu <\/em>\/\n}\n\n\/ \u0130\u00e7erik stilleri <\/em>\/\n.parallax-layer h3 {\n    font-size: 3.5em;\n    margin-bottom: 20px;\n    text-shadow: 2px 2px 6px rgba(0,0,0,0.8);\n}\n\n.parallax-layer p {\n    font-size: 1.3em;\n    line-height: 1.7;\n    max-width: 700px;\n    margin: 0 auto;\n    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);\n}\n\n\/ Chrome'a \u00f6zel kayd\u0131rma \u00e7ubu\u011fu gizleme (iste\u011fe ba\u011fl\u0131) <\/em>\/\n.parallax-container::-webkit-scrollbar {\n    width: 0;\n    background: transparent;\n}\n\n\/ Mobil uyumluluk <\/em>\/\n@media (max-width: 768px) {\n    .parallax-layer h3 {\n        font-size: 2.5em;\n    }\n    .parallax-layer p {\n        font-size: 1.1em;\n    }\n    \/ Mobil cihazlarda 3D paralaks performans\u0131 d\u00fc\u015febilir, basitle\u015ftirme d\u00fc\u015f\u00fcn\u00fclebilir <\/em>\/\n    \/ \u00d6rne\u011fin, t\u00fcm katmanlar\u0131 translateZ(0) yaparak 2D kayd\u0131rmaya \u00e7evirebilirsiniz <\/em>\/\n    .parallax-layer-back,\n    .parallax-layer-foreground {\n        transform: translateZ(0) scale(1);\n        background-attachment: scroll; \/ Gerekirse arka plan\u0131 normale \u00e7evir <\/em>\/\n    }\n    .parallax-layer-base {\n        background: rgba(0, 0, 0, 0.6); \/ \u0130\u00e7erik okunabilirli\u011fini koru <\/em>\/\n    }\n}<\/code><\/pre>\n
Chrome Optimizasyonu ve Performans<\/h4>\n
*   Donan\u0131m H\u0131zland\u0131rma:<\/strong> Chrome, transform<\/code> \u00f6zelliklerini (\u00f6zellikle translateZ<\/code>) GPU \u00fczerinde h\u0131zland\u0131r\u0131r. Bu, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 serbest b\u0131rakarak daha ak\u0131c\u0131 animasyonlar sa\u011flar. will-change: transform;<\/code> \u00f6zelli\u011fini kullanarak taray\u0131c\u0131ya bu \u00f6\u011fenin d\u00f6n\u00fc\u015f\u00fcm\u00fcn\u00fcn de\u011fi\u015fece\u011fini \u00f6nceden bildirebilirsiniz, bu da taray\u0131c\u0131n\u0131n optimizasyonlar yapmas\u0131na yard\u0131mc\u0131 olabilir. Ancak, will-change<\/code>‘i dikkatli kullanmak gerekir; gereksiz yere uygulamak performans sorunlar\u0131na yol a\u00e7abilir. Genellikle, translateZ(0)<\/code> gibi k\u00fc\u00e7\u00fck bir 3D d\u00f6n\u00fc\u015f\u00fcm uygulamak da taray\u0131c\u0131n\u0131n \u00f6\u011feyi kendi katman\u0131na ta\u015f\u0131mas\u0131na ve GPU taraf\u0131ndan h\u0131zland\u0131r\u0131lmas\u0131na neden olur.
\n*   Rasterizasyon ve Katmanlama:<\/strong> Chrome Geli\u015ftirici Ara\u00e7lar\u0131’ndaki “Layers” panelini kullanarak sayfan\u0131n nas\u0131l katmanlara ayr\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rebilirsiniz. Paralaks katmanlar\u0131n\u0131n ayr\u0131 GPU katmanlar\u0131nda olmas\u0131, performans i\u00e7in idealdir.
\n*   Metin Keskinli\u011fi:<\/strong> translateZ()<\/code> uygulanan \u00f6\u011feler bazen metin keskinli\u011finde hafif bir bozulma ya\u015fayabilir. Bu, taray\u0131c\u0131n\u0131n metni bir bit e\u015flem olarak render etmesinden kaynaklan\u0131r. Bu sorunu hafifletmek i\u00e7in text-rendering: optimizeLegibility;<\/code> veya hafif bir text-shadow<\/code> kullanabilirsiniz.
\n*   G\u00f6r\u00fcnt\u00fc Optimizasyonu:<\/strong> Kullan\u0131lan arka plan g\u00f6rsellerinin boyutlar\u0131 ve formatlar\u0131 performans\u0131 do\u011frudan etkiler. WebP gibi modern formatlar ve uygun s\u0131k\u0131\u015ft\u0131rma teknikleri kullanarak dosya boyutlar\u0131n\u0131 d\u00fc\u015f\u00fck tutmak \u00f6nemlidir.<\/p>\n
Y\u00f6ntem 3: scroll-snap<\/code> ile Paralaks Benzeri Etkiler (Ekstra)<\/h3>\n
scroll-snap<\/code> do\u011frudan bir paralaks efekti olmasa da, kayd\u0131rma deneyimini kontrol ederek ve bu deneyimi paralaks d\u00fczenlemeleriyle birle\u015ftirerek benzer bir his yaratabilir. scroll-snap<\/code> \u00f6zelli\u011fi, kullan\u0131c\u0131n\u0131n kayd\u0131rma hareketini belirli noktalara “yakalar” ve sayfay\u0131 o noktalara otomatik olarak hizalar. Bu, tam ekran b\u00f6l\u00fcmler aras\u0131nda ge\u00e7i\u015f yaparken veya hikaye anlat\u0131m\u0131 odakl\u0131 tasar\u0131mlarda olduk\u00e7a etkilidir.<\/p>\n
Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
Bir kayd\u0131rma kapsay\u0131c\u0131s\u0131na scroll-snap-type<\/code> \u00f6zelli\u011fi uygulan\u0131r ve bu kapsay\u0131c\u0131n\u0131n \u00e7ocuk \u00f6\u011felerine scroll-snap-align<\/code> \u00f6zelli\u011fi uygulan\u0131r. Bu, kullan\u0131c\u0131n\u0131n kayd\u0131rmay\u0131 b\u0131rakt\u0131\u011f\u0131nda sayfan\u0131n belirli bir noktaya (\u00f6rne\u011fin, bir b\u00f6l\u00fcm\u00fcn ba\u015f\u0131na) kilitlenmesini sa\u011flar. Bu kilitlenme efekti, paralaks katmanlar\u0131yla birle\u015ftirildi\u011finde daha kontroll\u00fc ve etkileyici bir deneyim sunabilir.<\/p>\n
HTML Yap\u0131s\u0131<\/h4>\n
\n    
\n        
\n            
B\u00f6l\u00fcm Bir<\/h3>\n            
Bu b\u00f6l\u00fcm, kayd\u0131rma sonunda otomatik olarak hizalan\u0131r.<\/p>\n        <\/div>\n    <\/section>\n\n    
\n        
\n            
B\u00f6l\u00fcm \u0130ki<\/h3>\n            
Kayd\u0131rma durdu\u011funda, bir sonraki b\u00f6l\u00fcme yumu\u015fak bir ge\u00e7i\u015f yap\u0131l\u0131r.<\/p>\n        <\/div>\n    <\/section>\n\n    
\n        
\n            
B\u00f6l\u00fcm \u00dc\u00e7<\/h3>\n            
Paralaks efektleriyle birle\u015ftirildi\u011finde, daha etkileyici olabilir.<\/p>\n        <\/div>\n    <\/section>\n<\/div><\/code><\/pre>\n
CSS Kodu<\/h4>\n
body, html {\n    margin: 0;\n    padding: 0;\n    font-family: Arial, sans-serif;\n    height: 100%;\n    overflow: hidden;\n}\n\n.scroll-snap-container {\n    height: 100vh;\n    overflow-y: scroll;\n    scroll-snap-type: y mandatory; \/ Y ekseninde zorunlu kayd\u0131rma yakalama <\/em>\/\n}\n\n.scroll-snap-section {\n    height: 100vh;\n    scroll-snap-align: start; \/ B\u00f6l\u00fcm\u00fcn ba\u015flang\u0131c\u0131na hizala <\/em>\/\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    color: white;\n    background-size: cover;\n    background-position: center;\n}\n\n.section-one {\n    background-image: url('https:\/\/picsum.photos\/id\/1015\/1920\/1080');\n}\n\n.section-two {\n    background-image: url('https:\/\/picsum.photos\/id\/1018\/1920\/1080');\n}\n\n.section-three {\n    background-image: url('https:\/\/picsum.photos\/id\/1025\/1920\/1080');\n}\n\n.scroll-snap-section .content {\n    background: rgba(0, 0, 0, 0.6);\n    padding: 40px;\n    border-radius: 10px;\n    max-width: 800px;\n}\n\n.scroll-snap-section h3 {\n    font-size: 3em;\n    margin-bottom: 20px;\n}\n\n.scroll-snap-section p {\n    font-size: 1.2em;\n    line-height: 1.6;\n}\n\n\/ Chrome'a \u00f6zel kayd\u0131rma \u00e7ubu\u011fu gizleme <\/em>\/\n.scroll-snap-container::-webkit-scrollbar {\n    width: 0;\n    background: transparent;\n}<\/code><\/pre>\n
Bu y\u00f6ntem, \u00f6zellikle tam ekran b\u00f6l\u00fcmler aras\u0131nda ak\u0131c\u0131 ge\u00e7i\u015fler sa\u011flamak ve kullan\u0131c\u0131n\u0131n i\u00e7eri\u011fi ad\u0131m ad\u0131m ke\u015ffetmesini sa\u011flamak i\u00e7in idealdir. scroll-snap<\/code> ile background-attachment: fixed;<\/code> veya 3D d\u00f6n\u00fc\u015f\u00fcm tabanl\u0131 paralaks efektlerini birle\u015ftirerek, daha etkile\u015fimli ve kontroll\u00fc bir deneyim yaratabilirsiniz.<\/p>\n
Performans \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n
Pure CSS ile paralaks efektleri olu\u015ftururken performans\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in dikkat etmeniz gereken baz\u0131 \u00f6nemli noktalar:<\/p>\n
*   G\u00f6r\u00fcnt\u00fc Optimizasyonu:<\/strong> Paralaks efektlerinde kullan\u0131lan arka plan g\u00f6rselleri genellikle tam ekran kaplar ve b\u00fcy\u00fck boyutludur. Bu g\u00f6rsellerin web i\u00e7in optimize edilmesi kritik \u00f6neme sahiptir.
\n    *   Boyutland\u0131rma:<\/strong> G\u00f6rselin ihtiya\u00e7 duyulan maksimum boyutta oldu\u011fundan emin olun, ancak gereksiz yere b\u00fcy\u00fck olmas\u0131n (\u00f6rn. 4K bir g\u00f6rsel yerine 1920px geni\u015fli\u011finde bir g\u00f6rsel yeterli olabilir).
\n    *   S\u0131k\u0131\u015ft\u0131rma:<\/strong> G\u00f6rsel kalitesini \u00e7ok d\u00fc\u015f\u00fcrmeden dosya boyutunu azaltan s\u0131k\u0131\u015ft\u0131rma ara\u00e7lar\u0131 kullan\u0131n (TinyPNG, Compressor.io vb.).
\n    *   Format:<\/strong> WebP gibi modern g\u00f6r\u00fcnt\u00fc formatlar\u0131, JPEG ve PNG’ye g\u00f6re daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunar ve daha h\u0131zl\u0131 y\u00fcklenir.
\n    *   Lazy Loading:<\/strong> G\u00f6rselleri hemen y\u00fcklemek yerine, viewport’a yakla\u015ft\u0131klar\u0131nda y\u00fcklenmelerini sa\u011flay\u0131n (JavaScript gerektirebilir, ancak Lighthouse skorlar\u0131 i\u00e7in \u00f6nemlidir).
\n*   Donan\u0131m H\u0131zland\u0131rma:<\/strong> Taray\u0131c\u0131ya animasyonlar\u0131n\u0131z\u0131 GPU \u00fczerinde \u00e7al\u0131\u015ft\u0131rmas\u0131 i\u00e7in ipu\u00e7lar\u0131 verin.
\n    *   transform<\/code> ve opacity<\/code> gibi \u00f6zellikler zaten GPU h\u0131zland\u0131rmal\u0131d\u0131r.
\n    *   will-change: transform;<\/code> veya will-change: scroll-position;<\/code> gibi \u00f6zellikler, taray\u0131c\u0131n\u0131n \u00f6nceden optimizasyonlar yapmas\u0131n\u0131 sa\u011flar. Ancak, bu \u00f6zelli\u011fi yaln\u0131zca ger\u00e7ekten de\u011fi\u015fecek \u00f6\u011feler i\u00e7in ve k\u0131sa s\u00fcreler i\u00e7in kullan\u0131n, aksi takdirde kaynak t\u00fcketimini art\u0131rabilir.
\n    *   translateZ(0)<\/code> veya translate3d(0,0,0)<\/code> gibi “bo\u015f” bir 3D d\u00f6n\u00fc\u015f\u00fcm, \u00f6\u011feyi kendi kompozisyon katman\u0131na ta\u015f\u0131maya zorlayarak GPU h\u0131zland\u0131rmas\u0131n\u0131 tetikleyebilir.
\n*   Minimum Katman Say\u0131s\u0131:<\/strong> 3D paralaks efektlerinde \u00e7ok fazla katman kullanmak, taray\u0131c\u0131n\u0131n daha fazla i\u015f yapmas\u0131na neden olur. Ger\u00e7ekten ihtiyac\u0131n\u0131z olan minimum katman say\u0131s\u0131n\u0131 kullanmaya \u00e7al\u0131\u015f\u0131n.
\n*   Metin Okunabilirli\u011fi:<\/strong> Arka plan g\u00f6rselleriyle metinler aras\u0131nda yeterli kontrast oldu\u011fundan emin olun. Gerekirse metinlere text-shadow<\/code> veya yar\u0131 saydam bir arka plan ekleyerek okunabilirli\u011fi art\u0131r\u0131n.
\n*   Mobil Uyumluluk ve Duyarl\u0131 Tasar\u0131m:<\/strong>
\n    *   Paralaks efektleri mobil cihazlarda bazen performans sorunlar\u0131na veya istenmeyen davran\u0131\u015flara neden olabilir (background-attachment: fixed;<\/code> gibi). Medya sorgular\u0131 kullanarak mobil cihazlarda paralaks efektlerini devre d\u0131\u015f\u0131 b\u0131rakmay\u0131 veya daha basit bir versiyonunu sunmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. \u00d6rne\u011fin, mobil cihazlarda background-attachment: scroll;<\/code> veya t\u00fcm translateZ<\/code> de\u011ferlerini 0<\/code> yaparak efekti 2D’ye \u00e7evirebilirsiniz.
\n    *   G\u00f6rsellerin farkl\u0131 ekran boyutlar\u0131nda do\u011fru g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in background-size: cover;<\/code> ve background-position: center;<\/code> gibi \u00f6zellikler kullan\u0131n.
\n*   Kayd\u0131rma Performans\u0131:<\/strong> \u00d6zellikle 3D paralaks kullan\u0131rken, kayd\u0131rma olaylar\u0131n\u0131n ak\u0131c\u0131l\u0131\u011f\u0131n\u0131 test edin. Chrome Geli\u015ftirici Ara\u00e7lar\u0131’ndaki Performans paneli, kayd\u0131rma s\u0131ras\u0131nda olu\u015fan kare h\u0131z\u0131n\u0131 (FPS) ve olas\u0131 performans darbo\u011fazlar\u0131n\u0131 izlemek i\u00e7in \u00e7ok de\u011ferli bir ara\u00e7t\u0131r.<\/p>\n
Chrome’a \u00d6zel Notlar ve Sorun Giderme<\/h3>\n
Chrome, modern CSS \u00f6zelliklerini ve 3D d\u00f6n\u00fc\u015f\u00fcmleri olduk\u00e7a iyi destekler. Ancak, baz\u0131 \u00f6zel durumlar veya performans sorunlar\u0131 ortaya \u00e7\u0131kabilir:<\/p>\n
*   GPU H\u0131zland\u0131rmas\u0131:<\/strong> Chrome, transform<\/code> \u00f6zelliklerini (\u00f6zellikle translateZ<\/code>) GPU \u00fczerinde i\u015fleyerek ak\u0131c\u0131 animasyonlar sa\u011flar. Geli\u015ftirici Ara\u00e7lar\u0131’ndaki “Rendering” panelinde “Layer borders” se\u00e7ene\u011fini etkinle\u015ftirerek hangi \u00f6\u011felerin kendi katmanlar\u0131na ayr\u0131ld\u0131\u011f\u0131n\u0131 ve GPU taraf\u0131ndan i\u015flendi\u011fini g\u00f6rebilirsiniz. Paralaks katmanlar\u0131n\u0131z\u0131n ayr\u0131 katmanlarda olmas\u0131, performans\u0131 art\u0131r\u0131r.
\n*   Metin Bulan\u0131kl\u0131\u011f\u0131 (translateZ<\/code> sonras\u0131):<\/strong> Daha \u00f6nce de belirtildi\u011fi gibi, translateZ<\/code> uygulanan \u00f6\u011felerdeki metinler bazen hafif bulan\u0131k g\u00f6r\u00fcnebilir. Bu, taray\u0131c\u0131n\u0131n alt piksel renderlama yerine piksel tabanl\u0131 renderlama yapmas\u0131ndan kaynaklan\u0131r. \u00c7\u00f6z\u00fcm olarak:
\n    *   text-rendering: optimizeLegibility;<\/code>
\n    *   Hafif bir text-shadow<\/code> eklemek.
\n    *   Bazen transform: translateZ(0.001px);<\/code> gibi \u00e7ok k\u00fc\u00e7\u00fck bir de\u011fer kullanmak da i\u015fe yarayabilir, ancak bu her zaman tutarl\u0131 de\u011fildir.
\n*   Kayd\u0131rma \u00c7ubu\u011fu Esteti\u011fi:<\/strong> overflow-y: scroll;<\/code> kulland\u0131\u011f\u0131n\u0131zda, varsay\u0131lan kayd\u0131rma \u00e7ubu\u011fu g\u00f6r\u00fcnecektir. Chrome’da bu kayd\u0131rma \u00e7ubu\u011funu CSS ile \u00f6zelle\u015ftirebilir veya gizleyebilirsiniz (ancak eri\u015filebilirlik a\u00e7\u0131s\u0131ndan gizlemek genellikle \u00f6nerilmez).<\/p>\n
\/ Kayd\u0131rma \u00e7ubu\u011funu gizle (yaln\u0131zca Webkit taray\u0131c\u0131lar i\u00e7in) <\/em>\/\n    .parallax-container::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        background: transparent;\n    }<\/code><\/pre>\n
*   Geli\u015ftirici Ara\u00e7lar\u0131:<\/strong> Chrome Geli\u015ftirici Ara\u00e7lar\u0131, paralaks efektlerinin performans\u0131n\u0131 ve davran\u0131\u015f\u0131n\u0131 anlamak i\u00e7in vazge\u00e7ilmezdir.
\n    *   Performance Paneli:<\/strong> Kayd\u0131rma s\u0131ras\u0131nda kare h\u0131z\u0131n\u0131, layout, paint ve composite s\u00fcrelerini analiz ederek darbo\u011fazlar\u0131 tespit etmenizi sa\u011flar.
\n    *   Layers Paneli:<\/strong> Hangi \u00f6\u011felerin kendi GPU katmanlar\u0131na ayr\u0131ld\u0131\u011f\u0131n\u0131 ve neden ayr\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6sterir.
\n    *   Rendering Paneli:<\/strong> “Paint flashing”, “Layer borders” ve “FPS meter” gibi se\u00e7eneklerle render performans\u0131n\u0131 g\u00f6rsel olarak izleyebilirsiniz.<\/p>\n
Sonu\u00e7<\/h3>\n
Pure CSS ile Chrome’da paralaks kayd\u0131rma efekti olu\u015fturmak, modern web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicili\u011fi ve kullan\u0131c\u0131 deneyimini art\u0131rman\u0131n g\u00fc\u00e7l\u00fc ve performansl\u0131 bir yoludur. \u0130ster background-attachment: fixed;<\/code> ile basit bir derinlik yan\u0131lsamas\u0131, ister CSS 3D d\u00f6n\u00fc\u015f\u00fcmleriyle ger\u00e7ek\u00e7i ve etkileyici bir \u00fc\u00e7 boyutlu sahne yarat\u0131n, CSS’in sundu\u011fu esneklik ve donan\u0131m h\u0131zland\u0131rma yetenekleri sayesinde ak\u0131c\u0131 ve etkileyici sonu\u00e7lar elde edebilirsiniz.<\/p>\n
background-attachment: fixed;<\/code> y\u00f6ntemi, h\u0131zl\u0131 ve kolay bir ba\u015flang\u0131\u00e7 i\u00e7in m\u00fckemmeldir, ancak mobil cihazlarda s\u0131n\u0131rlamalar\u0131 olabilir. CSS 3D d\u00f6n\u00fc\u015f\u00fcmleri (perspective<\/code>, translateZ<\/code>, scale<\/code>) ise daha fazla kontrol ve daha derin bir g\u00f6rsel etki sunar, ancak daha karma\u015f\u0131k bir kurulum gerektirir. Her iki y\u00f6ntemde de performans optimizasyonlar\u0131 (g\u00f6r\u00fcnt\u00fc s\u0131k\u0131\u015ft\u0131rma, will-change<\/code> kullan\u0131m\u0131, minimum katman say\u0131s\u0131) ve duyarl\u0131 tasar\u0131m yakla\u015f\u0131mlar\u0131, projenizin her cihazda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n
Chrome gibi modern taray\u0131c\u0131lar, bu CSS \u00f6zelliklerini m\u00fckemmel bir \u015fekilde destekleyerek geli\u015ftiricilere yarat\u0131c\u0131l\u0131klar\u0131n\u0131 sergilemeleri i\u00e7in geni\u015f bir alan sunar. Geli\u015ftirici ara\u00e7lar\u0131n\u0131 etkin bir \u015fekilde kullanarak performans sorunlar\u0131n\u0131 gidermek ve efekti en iyi \u015fekilde optimize etmek, ba\u015far\u0131l\u0131 bir paralaks uygulamas\u0131n\u0131n anahtar\u0131d\u0131r. Pure CSS ile paralaks, web sitelerinizi daha dinamik, ilgi \u00e7ekici ve unutulmaz hale getirecek g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Pure CSS ile Chrome’da Paralaks Kayd\u0131rma Efekti Olu\u015fturma\nGiri\u015f: Paralaks Kayd\u0131rma ve Saf CSS’in G\u00fcc\u00fc\nWeb tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-37623","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nPure CSS ile Chrome'da Paralaks Kayd\u0131rma Efekti Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pure CSS ile Chrome'da Paralaks Kayd\u0131rma Efekti Olu\u015fturma\" \/>\n<meta property=\"og:description\" content=\"Pure CSS ile Chrome'da Paralaks Kayd\u0131rma Efekti Olu\u015fturma Giri\u015f: Paralaks Kayd\u0131rma ve Saf CSS'in G\u00fcc\u00fc Web tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-10T16:40:55+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Pure CSS ile Chrome’da Paralaks Kayd\u0131rma Efekti Olu\u015fturma\",\"datePublished\":\"2026-01-10T16:40:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/\"},\"wordCount\":3043,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/\",\"name\":\"Pure CSS ile Chrome'da Paralaks Kayd\u0131rma Efekti Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-10T16:40:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pure CSS ile Chrome’da Paralaks Kayd\u0131rma Efekti Olu\u015fturma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Pure CSS ile Chrome'da Paralaks Kayd\u0131rma Efekti Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"Pure CSS ile Chrome'da Paralaks Kayd\u0131rma Efekti Olu\u015fturma","og_description":"Pure CSS ile Chrome'da Paralaks Kayd\u0131rma Efekti Olu\u015fturma Giri\u015f: Paralaks Kayd\u0131rma ve Saf CSS'in G\u00fcc\u00fc Web tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini","og_url":"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-10T16:40:55+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"21 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Pure CSS ile Chrome’da Paralaks Kayd\u0131rma Efekti Olu\u015fturma","datePublished":"2026-01-10T16:40:55+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/"},"wordCount":3043,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/","url":"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/","name":"Pure CSS ile Chrome'da Paralaks Kayd\u0131rma Efekti Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-10T16:40:55+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/pure-css-ile-chromeda-paralaks-kaydirma-efekti-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Pure CSS ile Chrome’da Paralaks Kayd\u0131rma Efekti Olu\u015fturma"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37623"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37623\/revisions"}],"predecessor-version":[{"id":37624,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37623\/revisions\/37624"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}