Nasıl oluşturulur: Paralel kaydırma

CSS ile 'paralel' kaydırma etkisini nasıl oluşturmayı öğrenin.

Paralel kaydırma

Paralel kaydırma, arka plan içeriklerin (örneğin, görseller) kayarken farklı hızlarda hareket ettiği bir web sitesi tasarım trendidir. Aşağıdaki bağlantıya tıklayarak paralel kaydırma içeren ve içermeyen web siteleri arasındaki farkı görün.

Parallaxa dayalı kayan etki ile gösterim

Parallaxa dayalı kayan etki olmadan gösterim

Dikkat:Parallaxa dayalı kayan etki, mobil cihazlar/smartphone'lar üzerinde her zaman geçerli olmayabilir. Ancak, medya sorgularını kullanarak mobil cihazlarda bu etkiyi kapatabilirsiniz (sayfanın son örneğine bakın).

Parallaxa dayalı kayan etki nasıl oluşturulur

Bir konteyner elementi kullanarak ve bu konteynerin üzerine belirli bir yüksekliğe sahip bir arka plan resmi ekleyerek. Sonra, background-attachment: fixed Gerçek parallaxa dayalı kayan etkiyi oluşturma. Diğer arka plan özellikleri, resmi ortada ve mükemmel bir şekilde ölçeklendirme için kullanılır:

Piksel cinsinden örnek

<style>
.parallax {
  /* Kullanılan resim */
  background-image: url("img_parallax.jpg");
  /* Belirli yükseklik ayarlanır */
  min-height: 500px;
  /* Parallaxa dayalı kayan etkiyi oluşturma */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
<!-- Konteyner elementi -->
<div class="parallax"></div>

Kişisel olarak deneyin

Yukarıdaki örnek, resmin yüksekliğini piksel olarak ayarlar. Eğer resmi ekranın tamamına sığdırmak istiyorsanız, örneğin 100%, parallax konteynerinin yüksekliğini 100% olarak ayarlayın. Dikkat: Ayrıca, height: 100% Uygulanan <html> ve <body>:

Santimetre cinsinden örnek

body, html {
  height: 100%;
}
.parallax {
  /* Kullanılan resim */
  background-image: url("img_parallax.jpg");
  /* Tam yükseklik */
  height: 100%;
  /* Parallaxa dayalı kayan etkiyi oluşturma */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Kişisel olarak deneyin

bazı mobil cihazlar background-attachment: fixed olabilir. Ancak, mobil cihazlarda parallax etkisini kapatmak için medya sorgularını kullanabilirsiniz:

örnek

/* Tüm tablet ve telefonların parallaxa dayalı kayan etkiyi kapatın. Gerekirse, piksel sayısını artırabilir veya azaltabilirsiniz */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

Kişisel olarak deneyin

Bu kodda, ekran genişliği 1366 pikselden küçük veya eşit olduğunda, parallaxa dayalı kayan etki kapatılır, bu da çoğu tablet ve telefon için geçerlidir. Bu, değiştirilmesiyle yapılır: .parallax sınıfının background-attachment özellikleri sabit to scroll To implement. In this way, the background image will scroll with the rest of the page, rather than being fixed in the viewport.