Paralaks Efekti Nasıl Yapılır

Paralaks (Parallax) Efekti Yaparak Web Sitelerinizi Güzelleştirin

Bu makalemizde Paralaks efekti nasıl yapılır, hangi kodlar gerekiyor adım adım anlatmaya çalışacağım. Bu makale sonunda Web sitelerinizi Paralaks efektleri kullanarak daha da ilgi çekici hale getirebileceksiniz. Eğer bir WordPress sitesine Paralaks efektini ekleyeceksiniz bu makaleyi geçip, ilgili makaleye gitmek için tıklayabilirsiniz. Ancak WordPress’te eklenti yardımı ile Paralaks kullanımını anlattım. Eğer kod kullanmadan sitenize Paralaks Efekti eklemek istiyorsanız okumaya devam edebilirsiniz.

Paralaks (Parallax) Efekti Nedir ?

Farklı paralaks çeşitleri var ancak en yaygın kullanılanlara örnek vermeye çalışacağım. Arkaplanda bulunan resminizin büyüklüğünün yüksekliğinin 1000px olduğunu varsayalım. Ancak div’inizin yükseliği 500. Yani resminizin bir kısmı görünecektir. Sayfayı aşağıya doğru kaydırdığınızda, sanki div içindeki arkaplan resmide yukarı doğru kaymaya başlayacaktır. Diğer bir örnek ise, arka plandaki resminizin kaydırma esnasında daha yavaş kayması ve üzerindeki nesneler sabit kalmasıdır. Aşağıya bir örnek bırakıyorum.

 

Paralaks Efekti Nasıl Yapılır ?

 

Ben burda çok kaliteli bir arkaplan kullanmadım. Siz daha iyisini koyarsınız.

Paralaks Efekti Nasıl Yapılır ?

Öncelikle Paralaks (Parallax) efektini kullanmak istediğiniz HTML sayfanıza aşağıdaki kodu ekleyin. Gerekli düzenlemeleri istediğiniz gibi yapabilirsiniz.



<div class="parallax">

<div class="parallax-content">

Buraya istediğiniz elementi ekleyebilirsiniz...

</div>

</div>


Ardından aşağıdaki CSS kodlarını web sitenizin CSS dosyasına ekleyin. Yada aynı html sayfası içinde CSS kullanıyorsanız sayfaya da ekleyebilirsiniz. Resminizin yolunu kendi web sitenizdekine göre değiştirin. Büyük resim kullanın zira net gözükmesi gerekiyor. Ben çok büyük bir resim kullanmadım örnek olacağı için. Ancak siz anasafalarınızı tasarlarken daha net gözükmesini istiyorsanız büyük boyutlarda resimler ekleyebilirsiniz.


.parallax {
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}

.parallax-content {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px;
}

Yukarıdaki kodları kendi sitenize göre değiştirmeyi unutmayın. Margin, Padding ekleyip kendi Paralaks kutusunu web sayfanıza göre uyarlayabilirsiniz. Makalemizi beğendiyseniz veya sormak istediğiniz bir soru var ise yorum yapmayı unutmayın. Hoşçakalın.

Yorumunuzu Buraya Yazabilirsiniz.

E-posta hesabınız yayımlanmayacak.