Modern CSS, güçlü işlevleri ve olağanüstü yetenekleriyle web geliştirmeyi yeniden tanımladı. CSS, web sayfalarını son derece etkileşimli ve cazip hale getirmek için göze çarpan seçenekler sunan, her amaca uygun bir araçtır. Tasarımdaki esneklik, hızlı özelleştirme, mükemmel stil seçenekleri veya gelişmiş Kullanıcı Arayüzü (UI) olsun — CSS, tüm web geliştirme ve stil ihtiyaçları için uçtan uca çözümler sunar. Her şeyden önce, CSS ve HTML kullanarak, aksi takdirde JavaScript kullanarak yorucu olacak animasyon ve efektleri sadece birkaç satır kod yazarak ekleyebilirsiniz.
Bu kılavuzda, Chrome'da CSS ile bir parallax kaydırma efekti oluşturma adımlarında size rehberlik edeceğiz.
Gereksinimler
Bu öğreticiyi takip etmek için temel düzeyde HTML ve CSS bilgisine sahip olmalısınız.
Adım 1: Yeni Bir Proje Oluşturun
Komut satırı arayüzünü kullanarak yeni bir proje klasörü ve dosyaları oluşturarak başlayalım. Terminalinizi açın ve yeni bir proje klasörü oluşturmak için aşağıdaki komutu yazın:
|
1 |
mkdir css-parallax |
Use the cd komutunu kullanarak dizini css-parallax klasörüne değiştirin:
|
1 |
cd css-parallax |
Ardından, tüm HTML kodlarını koyacağımız css-parallax klasöründe bir HTML dosyası oluşturun. Dosyayı index.html olarak adlandırın ve nano komutunu kullanarak açın:
|
1 |
nano index.html |
Once we have our index.html dosyamız hazır olduğunda, devam edelim ve giriş HTML kodlarını ekleyerek web sayfasını yapılandıralım.
Adım 2: Temel HTML Yapısı
Bu adımda, HTML kodlarını ekleyerek web sayfamızı tasarlayacağız. index.html dosyasına aşağıdaki kod satırlarını ekleyin:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Parallax Kaydırma Efekti ile CSS</title> </head> <body></body> </html> |
Web sayfalarımızın temel yapısını kurduktan sonra, ikisi arka plan resimleri ve biri statik düz arka plan için olmak üzere üç bölüm (section) sınıfı oluşturun. Ardından, <body> etiketine aşağıdaki kod satırlarını ekleyin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>Parallax Kaydırma Efektinden Önce</h1> </section> <section class="section static"> <h1>Parallax Kaydırmaya Hoş Geldiniz</h1> </section> <section class="section parallax bg2"> <h1>Parallax Kaydırma Efektinden Sonra</h1> </section> </main> ... </body> |
HTML kodlarını <body> etiketine eklemek, html. dosyamızın temel kurulumunu tamamlar. Gelecek adımlarda CSS'i tanıtacağız ve her biri için stil seçeneklerini tanımlayacağız.
Adım 3: CSS'e Giriş
CSS dosyasını ekleyerek ve parallax efektini oluşturarak web sitesini stillendirelim. İlk olarak, css-parallax paralaks kaydırma efektini oluşturmak için gereken tüm CSS kodlarını koyacağımız klasör. Bundan sonra, styles.css dosyasını css-parallax klasörünüzün içine nano komutunu kullanarak ekleyin:
|
1 |
nano styles.css |
Web sayfamızı .wrapper sınıfı ile başlayarak şekillendireceğiz. .wrapper sınıfı, tüm sayfa için perspektif ve kaydırma özelliklerini ayarlar. Wrapper sınıfı ile başlayın ve yüksekliğini, taşmasını (overflow) ve perspektifini belirtin. Paralaks kaydırma efektinin çalışması için wrapper yüksekliğini sabit bir değere ayarlayın. Bu kılavuzda, ekranın görünüm alanının tam yüksekliğini elde etmek için 100vh kullanarak görünüm alanı değerini ayarladık. vh değerini proje ihtiyaçlarınıza göre değiştirebilirsiniz. Ardından, overflow-x özelliğini hidden olarak ayarlayarak ekranın yatay kaydırma çubuğunu devre dışı bırakın. Ayrıca, perspective özellik değerini 3px olarak belirtin. styles.css dosyası sınıfına aşağıdaki kod satırlarını ekleyelim:
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Adım 4: .section Sınıfı için Stil Ekleme
Wrapper sınıfının yanına, .section sınıfı için stiller ekleyin. .section sınıfı, ana bölümler için boyut, görüntüleme ve metin özelliklerini tanımlar. Konumu relative olarak ayarlayarak, alt öğe .parallax::after ile üst öğe .section arasında göreceli bir konumlandırma hizalayın. Ekranın görünüm alanının tam yüksekliğini elde etmek için view-height(vh) değerini 100 olarak tutun. Diğer parametreleri ihtiyaçlarınıza göre ekleyin, değiştirin ve şekillendirin.
Inside your styles.css dosyanızın içine, wrapper sınıfının yanına aşağıdaki kodu ekleyin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
Ardından, paralaks efektini oluşturmak ve harekete geçirmek için bir sözde öğe (pseudo-element) ekleyip şekillendireceğiz.
Adım 5: .parallax Sınıfı için Stiller Ekleme
Bu adımda, .parallax sınıfına bir sözde öğe ekleyeceğiz. Bu sözde öğe, öğenin son alt öğesi olacak ve paralaks efektini başlatmaktan sorumlu arka plan resmine bir ::after sözde öğesi ekleyecektir. Kodun ilk yarısında, sözde öğenin temel görüntüleme özellikleri ve konumlandırması ayarlanır. Diğer yarısında ise, translateZ() CSS işlevini kullanarak transform özelliğini ekleyeceğiz ve bunu (-1px) olarak tutacağız. Ayrıca, dikey yığınlamayı kontrol etmek için bir z-index ekleyin.
Aşağıdaki kodu .section sınıfının altına ekleyin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000; } .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
Adım 6: Her Bölüm için Resim ve Arka Plan Ekleme
Statik bölümün arka plan resimlerine ve arka plan rengine son CSS özelliklerini ekleyelim. .static bölümüne düz bir arka plan rengi ekleyerek başlayın. Arka plan rengini aqua olarak ayarlayın ve .parallax::after sınıfından sonra aşağıdaki kodu ekleyin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
The .static sınıfı, görseli olmayan statik bölüme bir arka plan ekler. .parallax sınıfıyla birlikte, arka plan görsellerini barındırmak için tasarlanmış benzersiz sınıflara sahiptir. Arka plan görsellerinin URL'lerini sırasıyla .bg1 ve .bg2 sınıflarına ekleyin.
Bu eğitimde, Unsplash üzerinden rastgele görseller kullanıyoruz. Ayrıca Pixapay, Placekitten ve Pexels gibi diğer web sitelerinden de görseller kullanabilir ve bunları dilediğiniz gibi özelleştirebilirsiniz. Aşağıdaki kodu .static sınıfına ekleyin:
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
Adım 7: CSS'i HTML ile Bağlama
Parallax kaydırma efekti için tüm kodları eklediğimize göre, şimdi styles.css dosyasını index.html dosyasına bağlayalım::
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS ile Parallax Kaydırma Efekti</title> </head> ... |
Open index.html dosyasını Adım 2'de oluşturduğumuz haliyle Chrome tarayıcısında açın:
Sonuç
Bu eğitimde, temel bir kurulum kullanarak çalışan bir web sayfası oluşturma adımlarını inceledik. Deneyebileceğiniz pek çok başka ilginç seçenek ve özelleştirme seçeneği bulunmaktadır. Öğrenmenizi eğlenceli ve heyecan verici hale getirmek için gölge efektleri eklemeyi, görsel kaydırmayı değiştirmeyi ve diğer ayarlamaları yapmayı deneyebilirsiniz.
Web geliştirme konularına daha derinlemesine dalmak için blogumuzdaki bu kaynaklara göz atın::
- HTML'e JavaScript Ekleme Rehberi
- JavaScript ile Çalışmak: Nesneler Nedir
- jQuery Nedir ve Nasıl Kullanılır
Keyifli Kodlamalar!
Yorumlar
Henüz yorum yapılmamış. İlk siz olun.