Cara membuat efek paralaks berlapis di situs Anda

Sep 17, 2025

Bagaimana caranya

(Kredit Gambar: www.beargrylls.com)

Gerakan paralaks, konsep lapisan bergerak pada kecepatan yang berbeda, telah digunakan selama bertahun-tahun dalam animasi. Situs web resmi Bear Grylls (salah satu favorit kami Situs pengguliran paralaks ), mengambil efek di arah baru dan menarik. Pegunungan latar belakang menskala ke posisi, sambil memudar sehingga mereka menjadi buram sepenuhnya, dan di latar belakang halaman, teks 'petualangan' naik ke tempat di belakang pegunungan saat memudar.

Untuk efek gerakan yang lebih menginspirasi, lihat panduan kami untuk yang terbaik Animasi css dan cara kode mereka .

Desain Situs Bear Grylls adalah karya agen pemasaran kreatif Inggris Pos terdepan , dan dengan target audiens mulai dari 16 hingga 55 tahun, dan lebih dari 7 juta pengikut di seluruh dunia, mereka memiliki tugas serius di tangan mereka.

"Fitur utama dari situs web adalah beranda; kami ingin pengunjung benar-benar melompat ke layar dan bergabung dengan petualangannya," Jelaskan co-founder Chris Wilcock dan Direktur Kreatif dan Williams. "Untuk mencapai ini, kami menggunakan beberapa transisi yang cerdas, ditambah dengan video yang diedit, citra dramatis, dan bahasa keseluruhan di situs."

Lihat situs beraksi di www.beargrylls.com . Pada artikel ini, kami akan menjelaskan cara membuat ulang efek pada situs Anda sendiri. Mulailah oleh Mengunduh file tutorial .

01. Buat efek penskalaan

Struktur untuk memungkinkan semua konten animasi berfungsi relatif sederhana. Seorang pembungkus memegang segalanya, dan menyembunyikan konten overflow. Lalu pada dasarnya ada tiga lapisan tag div di atas.

 & lt; Div Class = "Wrapper" & gt;
& lt; div class = "POS Text" & gt; & lt; / div & gt;
& lt; div class = "POS Mountain1" & gt; & lt; / div & gt;
& lt; div class = "POS Mountain2" & gt; & lt; / div & gt;
& lt; / div & gt;

02. Mulai CSS

Untuk membuat desain, gambar gradien latar belakang akan ditambahkan ke bodi dan diatur untuk mengisi ukuran layar. Pembungkus memegang semua lapisan, dan overflow untuk konten disembunyikan sehingga efek penskalaan dapat diterapkan.

 Tubuh {
MARGIN: 0;
Padding: 0;
Tinggi: 100%;
Latar Belakang: URL (img / bg.jpg)
pusat pusat;
ukuran latar belakang: penutup;
}
.Wrapper {
Lebar: 100VW;
Tinggi: 100VH;
Posisi: Relatif;
Overflow: Tersembunyi;
}

03. Posisikan setiap lapisan

Kode selanjutnya memastikan bahwa setiap lapisan diposisikan secara mutlak, satu di atas yang lain, di dalam pembungkus. Ukuran ini mengisi lebar viewport dan tinggi sehingga gambar mengisi layar.

 .POS {
Posisi: absolut;
TOP: 0;
Kiri: 0;
Lebar: 100VW;
Tinggi: 100VH;
}

04. Tambahkan teks

Kelas teks benar-benar hanya menambahkan gambar yang tepat, dan menetapkan posisi awal sebelum menjiwai ke tempatnya menggunakan Pindah kerangka kunci yang akan ditambahkan pada langkah terakhir.

 .text {
Latar Belakang: URL (img / text.png)
pusat pusat;
ukuran latar belakang: penutup;
Transformasi: Translate3D (0, 30px, 0);
Opacity: 0;
Animasi: Pindah 1,8 lebih mudah;
animasi-isian-mode: maju;
}

05. Animasi gunung pertama

Gunung pertama adalah yang jauh dari layar, dan ini akan mendapatkan penskalaan kecil yang akan dianimasikan. Opacity dari semua lapisan juga diatur rendah sehingga muncul di tempatnya.

 .mountain1 {
Latar Belakang: URL (img / mountain1.png)
pusat pusat;
ukuran latar belakang: penutup;
Transformasi: skala3d (1.1, 1.1, 1.1);
Opacity: 0.2;
Animasi: Scaler 1s-out;
animasi-isian-mode: maju;
}

06. Animasi Gunung Foreground

Gunung untuk latar depan hampir identik dengan gunung lain - itu hanya melakukan lebih dari skala. Kedua gunung berbagi keyframe 'scaler' untuk animasi mereka.

 .mountain2 {
Latar Belakang: URL (img / mountain2.png)
pusat pusat;
ukuran latar belakang: penutup;
Transformasi: skala3d (1.3, 1.3, 1.3);
Opacity: 0.1;
Animasi: Scaler 1.2S Mudah-keluar;
animasi-isian-mode: maju;
}

07. Tambahkan animasi keyframe

Keyframe sekarang dibuat yang menentukan itu. Pada akhir keadaan gerakan, negara bagian akhir ini akan diadakan. Teks ini dipindahkan, dan pegunungan ditingkatkan, agar sesuai dengan desain.

 @Keyframes Moveup {
100% {
Transformasi: Translate3D (0, 0, 0);
Opacity: 1;
}
}

@Keyframes scaler {
100% {
Transformasi: Skala3D (1, 1, 1);
Opacity: 1;
}
}

generate CSS — Ambil tiket untuk menghasilkan CSS sekarang untuk diskon besar (Kredit Gambar: Masa Depan)

Artikel ini awalnya diterbitkan dalam masalah 289 dari Desainer web - dijual sekarang . Berlangganan di sini .

Baca lebih lajut:

Cara menambahkan animasi ke SVG dengan CSS
Dos dan tidak boleh dilakukan untuk animasi web yang menyenangkan
Cara merancang dengan bentuk CSS: Pendahuluan

Cara membuat efek paralaks berlapis di situs Anda

01. Buat efek penskalaan

02. Mulai CSS

03. Posisikan setiap lapisan

04. Tambahkan teks

05. Animasi gunung pertama

06. Animasi Gunung Foreground

07. Tambahkan animasi keyframe

Bagaimana caranya - Artikel Terpopuler

22 alat desain UI terbaik

Buat tata letak responsif dengan grid CSS

Aturan Tipografi Web Responsif

4 langkah ke VDM yang lebih baik dengan ZBrush

Buat kuas kustom dalam cat studio klip

Cara menyempurnakan rambut di potret Anda

Cara Membuat Lingkungan Musim Dingin

Jelajahi kode kreatif dengan p5.js

Kategori