JavaScript parallax ile kaydırma efekti nasıl oluşturulur?

Teknoloji ve tasarım sürekli olarak gelişir ve yeni araçlar geliştikçe yeni tasarım trendleri ortaya çıkar. Bu trendler, şirketlerin veya bireylerin zevk anlayışlarını yansıtır ve ziyaretçileri etkilemeye yönelik arzu taşır. Bu içerikte JavaScript parallax kullanarak bir web uygulamasında geçirdiğim iki saati ele alacağım.

İster web, ister tablet isterse de mobil olsun, bir ön yüz geliştirici sürekli olarak yeteneklerini geliştirmek, yeni teknolojileri ve araçları tanımak ve tasarım trendlerini yakından takip etmek zorundadır.

- ADT Çözümleri -

Advanced Dynamics Teknoloji'de işletmeler için dış kaynaktan hizmet modeliyle Yönetilen Hizmetler çözümleri sunuyoruz.

JavaScript parallax nedir?

JavaScript parallax, web geliştirme ve tasarımında kullanılan bir tekniktir. Parallax, bir nesnenin diğer nesnelere göre daha hızlı veya daha yavaş hareket ettiği bir efektin yaratılmasıdır. Bu efekt, kullanıcının sayfayı kaydırdıkça arka planın veya öğelerin farklı hızlarda hareket etmesini sağlar, böylece derinlik algısı oluşturur.

JavaScript parallax efekti, genellikle scroll (kaydırma) olayına tepki olarak çalışır. Kullanıcı sayfayı kaydırdıkça, arka plan görüntüsü veya belirli öğeler belirli bir hızda hareket eder ve kullanıcıya 3D benzeri bir etki sunar.

Bu efekti oluşturmak için JavaScript kullanılır çünkü sayfanın kaydırma olaylarına tepki vermek ve öğelerin konumunu ve hızını değiştirmek için etkileşimli işlemler gerektirir. Sayfanın kaydırma olaylarını yakalamak ve kaydırma hareketine bağlı olarak nesnelerin konumunu güncellemek için JavaScript kullanılır. Animasyon kütüpheleri veya CSS özellikleri de kullanılabilir.

Örneğin, bir parallax efekti uygulamak için, sayfanın üst kısmında yer alan arka plan görüntüsünü daha yavaş bir hızda kaydırabilirsiniz. Buna karşılık, ön planda yer alan metin veya öğeleri daha hızlı bir hızda kaydırarak derinlik hissi yaratabilirsiniz.

JavaScript parallax, web sitelerine görsel çekicilik katmak ve kullanıcı deneyimini geliştirmek için kullanılan bir tekniktir. Bu efekti uygulamak için farklı yaklaşımlar ve kütüphaneler mevcuttur.

JavaScript parallax nerelerde kullanılır?

JavaScript parallax günümüzde dünyanın en gelen şirketlerinin web ve mobil uygulamalarında kullandıkları bir görsel efekt tekniğidir. Web uygulamalarında, eğer fareniz ile aşağı doğru kaydırma yaparsanız bir görselin sağa veya sola hareket ettiğini görebilirsiniz. Veya siz herhangi bir şeye tıklamadan da bir görselin hareket ettiğini görebilirsiniz. Böylesi ekranlarda aslında JavaScript parallaxın kullanıldığına tanıklık etmiş olursunuz.

JavaScript parallax ve WordPress

Parallax efekti uygulamak için öncelikle bir kütüphane arayışına girdim ve GitHub’da bir parallax repository keşfettim. Kurulumla ilgili talimatları okuduktan sonra Necdet ile çalışmaya başlayarak bir WordPress içerik yönetim sisteminde parallaxı nasıl uygulayabileceğimize baktım.

WordPress’te npm kullanımı sınırlı olduğundan, aşağıdaki kodu header.php veya footer.php üzerinden çağırarak gerekli kurulumu tamamladım.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simpleParallax.min.js"></script>

Daha sonra bir sayfaya görsel ekleyerek ona “pic-parallax” sınıfı atadık ve temanın sağladığı imkanlarla custom JavaScript bölümüne aşağıdaki kodu uyguladık:

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
	overflow: true
});

Ancak timeout ile ilgili bazı problemler yaşadık ve beklediğimiz efekt oluşmadı. Daha sonra Necdet, kodu şu şekilde güncelledi:

window.addEventListener("load", () => {
  setTimeout(() => {
    new simpleParallax(document.getElementsByClassName("pic-parallax"), {
      overflow: true,
      orientation: "right",
    });
  }, 1e3);
});

Bu JavaScript kodu, web sayfası yüklendiğinde belirli bir süre gecikmeyle bir paralaks efekti oluşturmak için kullanılıyor. Paralaks efekti, bir nesnenin diğer nesnelerden farklı bir hızda hareket etmesini sağlayarak derinlik hissi yaratır.

Kodun ne yaptığını adım adım açıklayalım:

1. window.addEventListener("load", () => { ... });: Sayfa yüklendiğinde bir olay dinleyicisi ekler. Bu, tüm sayfanın tamamen yüklendiğinde aşağıdaki kodu çalıştırmak için kullanılır.
2. setTimeout(() => { ... }, 1e3);: Belirli bir süre (1 saniye, yani 1000 milisaniye) sonra bir zamanlayıcı başlatır. Bu, paralaks efektini uygulamak için gecikme sağlar.
3. new simpleParallax(document.getElementsByClassName("pic-parallax"), { ... });: “pic-parallax” sınıfına sahip tüm elemanları seçer ve üzerlerinde paralaks efekti uygular. Bu etki, elemanların sağa doğru hareket etmesini sağlar.
   • document.getElementsByClassName("pic-parallax"): Sayfadaki tüm elemanlardan “pic-parallax” sınıfına sahip olanları seçer.
   • { overflow: true, orientation: "right" }: Paralaks efektinin ayarlarını belirtir. overflow: true ayarı, elemanın içeriği taşarsa taşan kısmın görünmesine izin verir. orientation: "right" ayarı, elemanın sağa doğru hareket etmesini sağlar.

Bu kod, sayfa yüklendikten 1 saniye sonra “pic-parallax” sınıfına sahip elemanlarda paralaks efekti oluşturur. Bu efektin nasıl göründüğü ve hangi elemanlarda kullanıldığı kodun tamamına bağlıdır.

Daha gelişmiş bir parallax uygulaması için aşağıdaki videoya göz atabilirsiniz: