Salı, Kasım 5, 2024
10.8 C
İstanbul

JavaScript parallax ile iki saatim

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.

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 ve genellikle CSS, HTML ve JavaScript’in birlikte kullanılması gerekebilir.

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('pic-parallax');
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:

Çok okunanlar

FloyyMenor & Chris MJ – Gata Only şarkı sözleri & Türkçe çevirisi

Chris MJ ve FloyyMenor tarafından seslendirilen Gata Only şarkısı,...

Gelsin Hayat Bildiği Gibi oyuncuları, karakterleri & yaşları

Gelsin Hayat Bildiği Gibi dizisi 21 Temmuz 2022 tarihinde...

Yalı Çapkını dizisi oyuncuları, karakterleri & yaşları

23 Eylül 2022 tarihinde Star TV ekranlarında izleyici ile...

TikTok videolarındaki filigran (yazı) nasıl kaldırılır?

TikTok, günümüzün en popüler sosyal medya platformlarından biri olarak...

Yalı Çapkını dizisinde Kazım kimdir? Gerçek adı, yaşı & oyuncu bilgileri

İlk bölümü 23 Eylül 2022 tarihinde Star TV ekranlarında...

Benzer içerikler

Yönetilen Hizmetler (Managed Service) nedir? İşte MSP ile ilgili bilinmesi gereken her şey

Yönetilen Hizmetler (Managed Services), günümüzde işletmelerin bilgi teknolojisi altyapılarının...

Spring Boot nedir, ne işe yarar?

Spring Boot, Java dilinde yazılmış bir framework'tür ve basit...

CSS pseudo kullanarak HTML ögelerin önüne veya arkasına görsel eklemek

CSS, web sayfalarının görünümünü belirlemede önemli bir rol oynar....

Apache nedir, ne işe yarar?

Web sitelerinin yaygın kullanıldığı günümüzde, bir web sitesinin doğru...

PHP, nesne yönelimli bir programlama dili midir?

PHP, nesne yönelimli programlama özelliklerine sahip bir programlama dilidir....

Uygulama geliştirirken dikkat edilmesi gerekenler

Bilgisayara konuşmak için insanlara yardımcı olmak önemlidir. Her uygulama...

Yazılımla ilgili 55 mesleki unvan ve tanımları

Yazılım, günümüzde hayatımızın birçok alanında yer almaktadır. Bilgisayarlar, akıllı...

Gömülü yazılım mühendisi ne iş yapar?

Gömülü sistemler geliştirme, günümüzün teknolojik dünyasında giderek daha önemli...

İlgili içerikler

Popular Categories