Nasıl Yapılır - Paralaks Kaydırma
CSS ile "paralaks" kaydırma efekti oluşturmayı öğrenin.
Paralaks
Paralaks kaydırma, kaydırma sırasında arka plan içeriğinin (yani bir görüntünün) ön plan içeriğinden farklı bir hızda hareket ettiği bir web sitesi eğilimidir. Paralaks kaydırmalı ve kaydırmasız bir web sitesi arasındaki farkı görmek için aşağıdaki bağlantılara tıklayın.
Paralaks kaydırma olmadan demo
Not: Paralaks kaydırma, mobil cihazlarda/akıllı telefonlarda her zaman çalışmaz. Ancak, mobil cihazlarda efekti kapatmak için medya sorgularını kullanabilirsiniz (bu sayfadaki son örneğe bakın).
Paralaks Kaydırma Efekti Nasıl Oluşturulur
Bir kap öğesi kullanın ve kapsayıcıya belirli bir yüksekliğe sahip bir arka plan resmi ekleyin. Ardından background-attachment: fixed
gerçek paralaks efektini oluşturmak için kullanın. Diğer arka plan özellikleri, görüntüyü mükemmel şekilde ortalamak ve ölçeklemek için kullanılır:
pikselli örnek
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
Yukarıdaki örnek, görüntünün yüksekliğini ayarlamak için pikselleri kullandı. Resmi tüm ekrana sığdırmak için yüzde, örneğin %100 kullanmak istiyorsanız, paralaks kabının yüksekliğini %100'e ayarlayın. Not:height: 100%
Hem <html> hem de <body> için de başvurmalısınız :
yüzde ile örnek
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Bazı mobil cihazlarda sorun var background-attachment: fixed
. Ancak, mobil cihazlar için paralaks etkisini kapatmak için medya sorgularını kullanabilirsiniz:
Örnek
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}