Buat efek latar belakang paralaks yang dikendalikan mouse

Sep 12, 2025

Bagaimana caranya

(Kredit Gambar: Renaud Rohlinger)

Situs dengan pengguliran Parallax terus populer karena suatu alasan: mereka menciptakan pengalaman browsing yang menyenangkan dan menarik bagi pengguna. Kami sudah melihat yang menakjubkan Parallax Scrolling Situs web untuk menginspirasi Anda, tetapi apa yang Anda lakukan jika Anda ingin membuatnya sendiri?

Untungnya, pengembang kreatif Prancis Renaud Rohlinger ada di sini untuk menunjukkan kepada Anda tali untuk cara membuat latar belakang pengguliran paralaks yang dapat Anda kendalikan dengan mouse Anda. Lihatlah hasil yang luar biasa pada situsnya , dan kemudian belajar dari Rohlinger dirinya di bawah tentang bagaimana Anda dapat mereplikasi efek pada proyek Anda berikutnya.

Anda juga bisa mencoba salah satunya Pembangun situs web , dan saat Anda mempertimbangkan kinerja situs Anda, periksa hosting web. Layanan bekerja untuk Anda. Punya situs berat media? Cadangkan dengan dapat diandalkan penyimpanan awan .

01. Tentukan kerangka dokumen HTML

Langkah pertama adalah mendefinisikan kerangka dokumen HTML. Ini terdiri dari wadah HTML yang menggambarkan dokumen memiliki bagian untuk kepala dan tubuh. Sementara bagian kepala menghubungkan file JavaScript dan CSS eksternal, bagian tubuh digunakan untuk menentukan elemen konten halaman pada langkah 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; judul & gt; Parallax Background & lt; / judul & gt;
& lt; tautan rel = "stylesheet" Type = "Text / CSS"
href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; tubuh & gt;
   *** Langkah 2 di sini
& lt; / body & gt;
& lt; / html & gt;

02. Identifikasi konten HTML

Konten tubuh terdiri dari teks tampilan dan wadah div menggunakan Data-Parallax. atribut. Elemen wadah ini yang akan digunakan untuk latar belakang paralaks, dengan masing-masing elemen anaknya ditata dengan gambar latar belakang yang diperlukan. Dalam contoh ini, wadah memiliki tiga lapisan gambar yang akan dibuat dari elemen div anak.

 & lt; h1 & gt; Halo! & Lt; / h1 & gt;
& LT; DATA DIV-PARALLAX & GT;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
& lt; / div & gt;

03. Buat wadah paralaks CSS

Buat file baru yang disebut styles.css. . Langkah pertama dalam file ini menetapkan warna konten default menjadi putih, dan pengaturan untuk wadah latar belakang paralaks. Pemosisian tetap diterapkan pada wadah paralaks untuk memungkinkan tetap berada di posisi yang sama dengan kandungan bergulir di atasnya. Warna default diterapkan sebagai warna halaman, sedangkan Z-Index negatif memungkinkan wadah muncul di bawah konten halaman.

 html, body {
   Warna: #fff;
}
[Data-parallax] {
   Posisi: Tetap;
   Lebar: 100VW;
   Tinggi: 100VH;
   TOP: 0;
   Kiri: 0;
   Z-index: -1;
   Latar Belakang - Warna: # 000;
}

04. Mengatur Lapisan Parallax CSS

Masing-masing lapisan gambar diatur untuk menggunakan posisi absolut dengan ukuran agar sesuai dengan jendela browser. Gambar paralaks dalam contoh ini akan didasarkan pada pola berukuran spesifik yang diatur untuk mengulangi. Anda dapat memilih untuk hanya mengulangi gambar secara vertikal menggunakan ulangan-Y, atau secara horizontal menggunakan REATER-X.

 [Data-Parallax] & gt; * {
   Posisi: absolut;
   Lebar: 100VW;
   Tinggi: 100VH;
   Latar Belakang - Ulangi: Ulangi;
   Ukuran latar belakang: 20VW 20VW;
}

05. Gunakan Lapisan Latar Belakang CSS

Sementara masing-masing lapisan gambar berbagi pengaturan posisi dan ukuran yang didefinisikan pada langkah 4, setiap lapisan menggunakan gambar yang unik. Selector NTH-Child digunakan untuk mengacu pada setiap elemen individu dalam wadah paralaks. Atribut latar belakang-gambar digunakan untuk menggambar dua baris yang membuat efek grid saat ubin. Lapisan yang lebih rendah menggunakan warna yang lebih gelap untuk membantu memberikan persepsi kedalaman.

 [Data-Parallax] & gt; *: Nth-child (1) {
   gambar latar belakang:
      linear-gradien (ke kanan, # 333 1px,
  transparan 1px),
      Linear-gradien (ke bawah, # 333 1px,
  transparan 1px);
}
[Data-Parallax] & gt; *: Nth-child (2) {
   gambar latar belakang:
      linear-gradien (ke kanan, # 777 1px,
transparan 1px),
      Linear-Gradient (ke bawah, # 777 1px,
transparan 1px);
}
[Data-Parallax] & gt; *: Nth-child (3) {
   gambar latar belakang
      linear-gradien (ke kanan, #fff,
transparan 1px),
      linear-gradien (ke bawah, #fff 1px,
 transparan 1px);
}

06. Melakukan inisiasi lapisan javascript

Buat file baru yang disebut code.js. . Langkah ini menemukan wadah paralaks dan memulai masing-masing lapisan gambar dengan Data-Index. Atribut yang akan digunakan pada langkah 7. Ini harus dilakukan dari fungsi yang dilampirkan ke Acara Beban Jendela Browser, sehingga kode hanya dieksekusi ketika konten bodi halaman sudah siap.

 window.addeventlistener ("muat", fungsi () {
   var wadah = dokumen.
QuerySelector ("[Data-Parallax]");
   var childnodes = wadah.children;
   untuk (var n = 0; n & lt; childnodes.length; n ++) {
      childnodes [n] .setattribute ("data-index", n + 1);
   }
   **** LANGKAH 7 DI SINI
});

07. Hitung gerakan mouse javascript

Efeknya bergantung pada memindahkan gambar yang terkait dengan setiap lapisan paralaks dalam menanggapi pergerakan mouse. Wadah paralaks yang diidentifikasi pada langkah 6 memiliki Mousemove. Acara pendengar terpasang, yang memicu fungsi untuk memposisikan gambar latar belakang layer paralaks setiap kali ada gerakan mouse. Setiap lapisan memiliki perhitungan gerak berdasarkan pada nomor indeks yang diterapkan pada langkah 6.

 wadah.addeventlistener ("mousemove",
 fungsi (e) {
   var elm = this.children;
   untuk (var c = 0; c & lt; elms.length; c ++) {
      var motion = ParseINT (Elms [C].
GetATtribute ("data-index")) / 10;
      var x = ((e.clientx) * gerakan) + "px";
      var y = (((e.Clienty) * gerakan) + "px"; elms [c] .tyle.backgroundposition = x +
"" + Y;
   }
});

Artikel ini awalnya diterbitkan di Majalah Desain Web Kreatif Desainer web . Beli masalah 290 sekarang.

Artikel terkait:

10 Kerangka CSS Terbaik pada tahun 2019
Cara menambahkan animasi ke SVG dengan CSS
52 alat desain web untuk membantu Anda bekerja lebih pintar pada tahun 2019

Buat efek latar belakang paralaks yang dikendalikan mouse

01. Tentukan kerangka dokumen HTML

02. Identifikasi konten HTML

03. Buat wadah paralaks CSS

04. Mengatur Lapisan Parallax CSS

05. Gunakan Lapisan Latar Belakang CSS

06. Melakukan inisiasi lapisan javascript

07. Hitung gerakan mouse javascript

Bagaimana caranya - Artikel Terpopuler

Cara membuat logo di Photoshop

Buat gambar paralaks interaktif

Cara membuat logo retro dengan perancang afinitas

Cara melukis cityscape dengan blok warna

Cara mencampur palet guas

Buat poster tipografi menggunakan Adobe InDesign

Buat kuas stiker kustom di artrage

Gambar tulang dan otot yang akurat

Kategori