- Katılım
- 19 Ocak 2024
- Mesajlar
- 160
- Tepkime puanı
- 11
- Puanları
- 18
- Ödüller
- 6
CSS ile Kayan Arka Plan Tasarımı
Kayan arka plan efekti, modern web tasarımlarında kullanılan popüler bir görsel tekniktir. Bu efekt, kullanıcı sayfayı kaydırırken arka planın farklı bir hızda hareket etmesini sağlar. İşte CSS kullanarak kayan bir arka plan oluşturmanın yolları.
Kayan Arka Plan için CSS Temelleri
Bir arka planı hareket ettirmek için `background-attachment` ve `background-position` özelliklerini kullanabilirsiniz.
CSS:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.parallax {
height: 100vh;
background-image: url('https://via.placeholder.com/1920x1080');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}HTML Yapısı:
HTML:
<div class="parallax"></div>
<div style="height: 100vh; text-align: center; padding: 50px;">
<h1>Paralaks Efektli Arka Plan</h1>
<p>Bu alan kayan bir arka planın altındaki içerikleri gösterir.</p>
</div>
<div class="parallax"></div>Dinamik Kayan Arka Plan Animasyonu
Daha dinamik bir görünüm için arka plana animasyon ekleyebilirsiniz.
CSS:
@keyframes slideBackground {
from {
background-position: 0 0;
}
to {
background-position: 0 100%;
}
}
.animated-background {
height: 100vh;
background-image: url('https://via.placeholder.com/1920x1080');
background-size: cover;
animation: slideBackground 10s linear infinite;
}HTML Yapısı:
HTML:
<div class="animated-background"></div>Kullanım Alanları
- Etkileyici giriş sayfaları
- Görsel ağırlıklı bloglar
- Portföy siteleri
- E-ticaret ürün tanıtım sayfaları
Öneriler
1. Arka plan görsellerini optimize edin ve boyutlarını küçültün.
2. Paralaks efektinin mobil cihazlarda doğru şekilde çalıştığından emin olun.
3. Görsel yoğunluğu artırmadan, kullanıcının dikkatini dağıtmayacak şekilde efektleri dengeleyin.
