Bir fare kontrollü paralaks arka plan efekti oluşturun

Sep 12, 2025

Nasıl Yapılır

(Resim Kredisi: Renaud Rohlinger)

Paralaks kaydırmalı siteler bir nedenden dolayı popüler olmaya devam ediyor: Kullanıcı için hoş ve ilgi çekici bir göz atma deneyimi yaratıyorlar. Zaten en iyi çarpıcıya baktık paralaks kaydırma Size ilham vermek için web siteleri, ama kendinizden birini yapmak istiyorsanız ne yaparsınız?

Neyse ki, Fransız Yaratıcı Geliştirici Renaud Rohlinger, fare ile kontrol edebileceğiniz paralaks kaydırma arka planı nasıl oluşturulacağınız için ipleri göstermek için burada. Şaşırtıcı sonuçlara dikkat edin Sitesini Ve sonra Rohlinger'dan bir sonraki projenizdeki etkiyi nasıl çoğaltabileceğinizi düşünün.

Bunlardan birini denemelisin Web Sitesi İnşaatçıları ve site performansınızı düşünürken, kontrol edin ağ sağlayıcısı Hizmet sizin için çalışıyor. Medya ağır bir site var mı? Güvenilir ile yedekleme Bulut depolama .

01. HTML belgesi çerçevesini tanımlayın

İlk adım, HTML belgesinin çerçevesini tanımlamaktır. Bu, belgeyi kafa ve gövde için bölümlere sahip olarak tanımlayan HTML kapsayıcısından oluşur. Baş bölümü harici javascript ve CSS dosyalarını bağlarken, 2. adımdaki sayfa içeriği öğelerini tanımlamak için vücut bölümü kullanılır.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; unvanı ve gt; paralaks arka planı; / unvan & gt;
& LINK REL = "StyleSheet" Type = "Metin / CSS"
href = "styles.csss" / & gt;
& lt; script src = "code.js" & gt; & lt; / script;
/ head & gt;
& lt; vücut ve gt;
   *** 2. adım burada
& lt; / body & gt;
& lt; / html & gt;

02. HTML içeriğini tanımlayın

Vücut içeriği, ekran metninden ve bir div konteynerinden oluşur. Veri-paralaks öznitelik. Gerekli arka plan görüntüleriyle taranacak çocuk öğelerinin her biri ile paralaks arka planı için kullanılacak olan bu konteyner elemanıdır. Bu örnekte, konteyner, Çocuk Div öğelerinden oluşturulacak üç görüntü katmanına sahiptir.

 HELLO! & LT; / H1 & GT;
& lt; div data-parallax & gt;
   & lt; div & gt; / div & gt;
   & lt; div & gt; / div & gt;
   & lt; div & gt; / div & gt;
& lt; / div & gt;

03. Bir CSS paralaks kabı oluşturun

Denilen yeni bir dosya oluştur stilleri.css . Bu dosyadaki ilk adım, varsayılan içerik rengini beyaz olarak ayarlar ve paralaks arka plan konteyneri ayarları. Sabit konumlandırma, içeriğin üzerine geldiğinde aynı pozisyonda kalmasına izin vermek için paralaks kabına uygulanır. Sayfa rengi olarak varsayılan bir renk uygulanırken, negatif bir Z-index, konteynerin sayfa içeriğinin altında görünmesini sağlar.

 html, vücut {
   Renk: #FFF;
}
[veri-parallax] {
   Konum: Sabit;
   Genişlik: 100vw;
   Yükseklik: 100vh;
   Üst: 0;
   Sol: 0;
   Z-index: -1;
   arka plan rengi: # 000;
}

04. CSS paralaks katmanlarını ayarlayın

Görüntü katmanlarının her biri, tarayıcı penceresine uyacak şekilde bir boyuta sahip mutlak konumlandırmayı kullanacak şekilde ayarlanmıştır. Bu örnekteki paralaks görüntüsü, tekrarlamak için ayarlanan belirli bir boyutta bir desene dayanacaktır. Görüntüyü yalnızca tekrar-y kullanarak dikey olarak tekrarlamayı veya tekrar-x kullanarak yatay olarak tekrarlamayı seçebilirsiniz.

 [Veri-parallax] & gt; * {
   Konum: Mutlak;
   Genişlik: 100vw;
   Yükseklik: 100vh;
   Arka plan-tekrar: tekrarlayın;
   Arka Plan Boyutu: 20VW 20VW;
}

05. CSS arka plan katmanlarını kullanın

Görüntü katmanlarının her biri, 4. adımda tanımlanan konum ve boyut ayarlarını paylaşırken, her katman benzersiz bir görüntü kullanır. NTH-Child Selector, paralaks kabınındaki her bir öğeye referans vermek için kullanılır. Arka plan görüntü özniteliği, döşendiğinde bir ızgara etkisi yaratan iki satır çizmek için kullanılır. Alt katmanlar, derinlik algısı sağlamak için daha koyu renkler kullanır.

 [Veri-parallax] & gt; *: nth-child (1) {
   arka plan görüntüsü:
      Doğrusal gradyan (sağa, # 333 1px,
  Şeffaf 1px),
      Doğrusal gradyan (alt, # 333 1px,
  Şeffaf 1px);
}
[Veri-parallax] & gt; *: nth-child (2) {
   arka plan görüntüsü:
      Doğrusal gradyan (sağa, # 777 1px,
Şeffaf 1px),
      Doğrusal gradyan (alttan, # 777 1px,
Şeffaf 1px);
}
[Veri-parallax] & gt; *: nth-child (3) {
   arka plan görüntüsü
      doğrusal gradyan (sağa, #fff,
Şeffaf 1px),
      doğrusal gradyan (alt, #fff 1px,
 Şeffaf 1px);
}

06. JavaScript katman başlatılmasını gerçekleştirin

Denilen yeni bir dosya oluştur kod.js . Bu adım paralaks kabını bulur ve görüntü katmanlarının her birini ile başlar. veri dizini 4. adımda kullanılacak olan özellik, bu, tarayıcı penceresinin yük olayına eklenmiş bir fonksiyondan gerçekleştirilmelidir, böylece kod yalnızca sayfanın vücut içeriği hazır olduğunda yürütülür.

 window.addeventlistener ("yük", fonksiyon () {
   var kabı = belge.
queryselector ("[veri-parallax]");
   var childnodes = konteyner.bildren;
   için (var n = 0; n) çocuk doğramaları. Uzunluğu; n ++) {
      ChildNodes [n] .Setattribute ("veri dizini", n + 1);
   }
   **** Adım 7 burada
});

07. JavaScript fare hareketini hesaplayın

Etki, fare hareketine yanıt olarak her paralaks katmanıyla ilişkili görüntüleri hareket ettirmeye dayanır. 6. adımda tanımlanan paralaks konteyneri bir mousemove Ekli olay dinleyicisi, paralaks katmanlarının arka plan görüntüsünü yeniden konumlandırma işlevini tetikleyen fare hareketi olduğunda. Her katman, 6. adımda uygulanan indeks numarasına dayanan bir hareket hesaplamasına sahiptir.

 konteyner.addeventlistener ("Mousemove",
 işlev (e) {
   var elms = this.children;
   için (var c = 0; c) elms.length; c ++) {
      var hareketi = Parseint (ELMS [C].
getattribute ("veri dizini")) / 10;
      var x = ((e.clientx) * hareket) + "px";
      var y = ((e.clienty) * hareket) + "px"; elms [c] .style.backgroundposition = x +
"" + y;
   }
});

Bu makale başlangıçta yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı . Sayı 290 şimdi satın al.

İlgili Makaleler:

2019'daki En İyi 10 CSS Çerçevesi
CSS ile SVG'ye animasyon nasıl eklenir
2019'da daha akıllıca çalışmanıza yardımcı olacak 52 Web Tasarım Araçları

Bir fare kontrollü paralaks arka plan efekti oluşturun

01. HTML belgesi çerçevesini tanımlayın

02. HTML içeriğini tanımlayın

03. Bir CSS paralaks kabı oluşturun

04. CSS paralaks katmanlarını ayarlayın

05. CSS arka plan katmanlarını kullanın

06. JavaScript katman başlatılmasını gerçekleştirin

07. JavaScript fare hareketini hesaplayın

Nasıl Yapılır - En Popüler Makaleler

Gerçeklik yakalamalı 3D taramalar nasıl oluşturulur

P5.JS ile veri görselleştirmeyi keşfedin

Blender'in Eevee ile iç mekanların nasıl oluşturulması

WebVR ile başlayın

SASS

Afinite Tasarımcısı'ndaki varlıklarla başlayın

Fotogerçekçi bir gökyüzü nasıl oluşturulur

Doğru kemikler ve kas çizin

Kategoriler