Bu eğitimde, durağan arka planlar ve kayan içerik ile en basit şekilde güzel bir paralaks kaydırma efektine göz atacağız.

Kaynak Dosyaları İndirin Demoyu Görüntüleyin

Kısa Bir Giriş

Paralaks, bir nesnenin konumunun farklı konumlardan bakıldığında farklı göründüğü bir efekttir. Paralaks hareketi veya bizim durumumuzda paralaks kaydırma, bize aynı görüş hattındaki, ancak aralarındaki mesafe olan iki nesnenin farklı hızlarda hareket ediyormuş gibi göründüğü yanılsamasını verir. Bir otoyolda saatte 100 km hızla giderken bir arabanın penceresinden dışarı baktıysanız, elektrik direklerinin yüksek bir hızla geçtiğini ve arka planda dağların çok yavaş hareket ettiğini fark edeceksiniz. , neredeyse durma noktasında. Bu, hareket halindeki paralaks hareketidir.

Web'e gelince, arka plan resimleri ve üstlerinde metin bulunan kaplar üzerinde bir paralaks etkisi yaratabiliriz. En basit haliyle, paralaks kaydırma, içeriğin normal şekilde kaydırılmasına ve arka planın sabit kalmasına neden olur. En basit haliyle bu tekniğin güzelliği, sadece CSS gerektirmesidir. Hadi kazalım.

İşaretleme ve Yapı

Yanıt vermeyen bir siteniz varsa, bunu başarmak için hiçbir hile olmazdı. Yine de duyarlı web tasarımı çağındayız, bu yüzden hareket yok. Korkma! Elimizde güzel bir CSS var. Ama önce, bazı işaretlemelere bir bakın. İşaretleme basittir - maksimum etki için değişen arka plan/başlık-metin sections ve içerik sections sahip olacağız. İşte nasıl göründüğü:

  

    
Sakin
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, conectetur adipisicing elit...
  



  

    
Çocuk büyütmek
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, conectetur adipisicing elit...
  



  

    
Sakinlik
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, conectetur adipisicing elit...
  

Bir parallax sınıfına sahip her section , arka plan resimlerimizi ve başlık metnini içerecekken, bir content sınıfına sahip her section , basit içerik içeren bölümler olacaktır. container sınıfı, maksimum genişliğe sahip bir akışkan div'dir ve bunların yanıt vermesini çok basit hale getirir. Şimdi, CSS'ye girelim.

Stil Oluşturma ve CSS ile Çalıştırma

Unutulmaması gereken ilk nokta, tüm arka plan resimlerimin 1600 piksel width ve 600 piksel height sahip olmasıdır. Bu, paralaks bölümlerimi sabit bir 600 piksel yüksekliğe ayarlamamı sağlıyor. Gerçi bundan biraz daha fazlası var. Tekrar eden arka planlar istemediğim için (büyük ve kalın resimler kullanıyorum), kullanıcıların her zaman maksimum genişlikte olmasını bekleyemem (bu, arka plan resimlerinin tam görünümde olmasına izin verir). Neyse ki bizim için CSS background-size özelliğini kullanabilir ve onu cover şekilde ayarlayabiliriz. Bu, arka plan görüntüsünü orantılı olarak genişleterek toplam kullanılabilir alanı işgal etmeye zorlar. Yine de maksimum destek için önek eklenmesi gerekiyor, bu yüzden buna dikkat edin.

Şimdiye kadar çok iyi, en önemli şey hariç. İçeriğimiz kaydırılırken arka plan resmimizin yerinde sabit kalmasına ihtiyacımız var. Yine CSS bizim için hayatı kolaylaştırıyor. background-attachment özelliğini kullanıyoruz ve onu fixed olarak ayarladık. Basit! Bazı örnek medya sorgularıyla birlikte CSS'im şöyle görünüyor:

 /* ============================================== ============
  BİRİNCİL YAPI
================================================= ========== */
.konteyner {
  maksimum genişlik: 960 piksel;
  kenar boşluğu: 0 otomatik;
}
/* ============================================== ============
  BÖLÜMLER
================================================= ========== */
bölüm.modül:son çocuk {
  kenar boşluğu-alt: 0;
}
bölüm.modül h2 {
  kenar boşluğu-alt: 40 piksel;
  yazı tipi ailesi: "Roboto Slab", serif;
  yazı tipi boyutu: 30 piksel;
}
bölüm.modül p {
  kenar boşluğu-alt: 40 piksel;
  yazı tipi boyutu: 16 piksel;
  yazı tipi ağırlığı: 300;
}
bölüm.modül p:son çocuk {
  kenar boşluğu-alt: 0;
}
bölüm.modül.içerik {
  dolgu: 40 piksel 0;
}
bölüm.modül.paralaks {
  yükseklik: 600 piksel;
  arka plan konumu: %50 %50;
  arka plan tekrarı: tekrar yok;
  arka plan eki: sabit;
  arka plan boyutu: kapak;
}
bölüm.module.paralaks h1 {
  renk: rgba(255, 255, 255, 0.8);
  yazı tipi boyutu: 48 piksel;
  satır yüksekliği: 600 piksel;
  yazı tipi ağırlığı: 700;
  metin hizalama: merkez;
  metin dönüştürme: büyük harf;
  metin gölgesi: 0 0 10px rgba(0, 0, 0, 0.2);
}
bölüm.module.paralaks-1 {
  arka plan resmi: url("../img/demo/_small/1.jpg");
}
bölüm.modül.paralaks-2 {
  arka plan resmi: url("../img/demo/_small/2.jpg");
}
bölüm.modül.paralaks-3 {
  arka plan resmi: url("../img/demo/_small/3.jpg");
}

@media all ve (min-width: 600px) {
  bölüm.modül h2 {
    yazı tipi boyutu: 42 piksel;
  }
  bölüm.modül p {
    yazı tipi boyutu: 20 piksel;
  }
  bölüm.module.paralaks h1 {
    yazı tipi boyutu: 96 piksel;
  }
}
@media all ve (min-width: 960px) {
  bölüm.module.paralaks h1 {
    yazı tipi boyutu: 160 piksel;
  }
}

Tarayıcı Desteği ve Mülk Bilgisi

Genel olarak tarayıcı desteği gerçekten harika. IE8 ve aşağısı, background-size özelliğini desteklemez, ancak basit bir koşullu stil bununla ilgilenmelidir. Bunun dışında her şey destekleniyor ve herhangi bir sorun yaşamazsınız. Bu eğitimde kullanılan CSS özellikleri hakkında daha fazla bilgi için MDN'ye bakın:

• Arka Plan Konumu – MDN referansı
• Arka Plan Boyutu – MDN referansı
• Arka Plan Eki – MDN referansı

Sarmak

Burada, basit, etkili ve sıradan her şeyi aynı anda kaydırma görünümünden biraz farklı bir şey uyguladık. İstediğimiz efekti elde etmek için bazı güzel ama daha az bilinen CSS tekniklerini kullandık. Ve bu bir sargı! Unutmayın, aşağıdaki bağlantılara tıklayarak demoyu görüntüleyebilir ve kaynağı indirebilirsiniz ve sorularınız, yorumlarınız veya geri bildirimleriniz varsa bunları da aşağıya bırakabilirsiniz.