Cách tạo hiệu ứng Parallax xếp lớp trên trang web của bạn

Sep 11, 2025

Cách

(Tín dụng hình ảnh: www.bearbarrylls.com)

Chuyển động Parallax, khái niệm các lớp di chuyển ở các tốc độ khác nhau, đã được sử dụng trong nhiều năm trong hoạt hình. Trang web chính thức của Bear Grylls (một trong những yêu thích của chúng tôi Các trang web cuộn Parallax ), có tác dụng theo các hướng mới và thú vị. Dãy núi nền quy mô xuống vị trí, trong khi mờ dần để chúng trở nên mờ đục đầy đủ, và trong nền của trang, văn bản 'cuộc phiêu lưu' mọc lên vào vị trí phía sau những ngọn núi khi nó mờ dần.

Để có nhiều hiệu ứng chuyển động truyền cảm hứng, hãy xem hướng dẫn của chúng tôi về tốt nhất Hoạt hình CSS và cách mã hóa chúng .

Thiết kế trang web Bear Grylls là công việc của Cơ quan tiếp thị sáng tạo Vương quốc Anh Outpost. , và với một đối tượng mục tiêu dao động từ 16 đến 55 tuổi, và hơn 7 triệu người theo dõi trên toàn thế giới, họ có một nhiệm vụ nghiêm túc trên tay họ.

"Đặc điểm chính của trang web là trang chủ; chúng tôi muốn khách truy cập thực sự nhảy vào màn hình và tham gia gấu trong cuộc phiêu lưu của anh ấy", giải thích đồng sáng lập Chris Wilcock và đạo diễn sáng tạo Dan Williams. "Để đạt được điều này, chúng tôi đã sử dụng một số chuyển đổi thông minh, cùng với các video đã chỉnh sửa, hình ảnh kịch tính và ngôn ngữ tổng thể trên trang web."

Xem trang web đang hoạt động tại www.bearbarrylls.com. . Trong bài viết này, chúng tôi sẽ giải thích cách tạo lại hiệu ứng trên các trang web của riêng bạn. Bắt đầu bởi Tải xuống các tập tin hướng dẫn .

01. Tạo hiệu ứng tỷ lệ

Cấu trúc để cho phép tất cả nội dung hoạt hình hoạt động tương đối đơn giản. Một trình bao bọc chứa tất cả mọi thứ, và che giấu bất kỳ nội dung tràn. Sau đó, về cơ bản là ba lớp thẻ div trên đầu trang.

 & lt; div class = "wrapper" & gt;
& lt; div class = "pos văn bản" & gt; & lt; / div & gt;
& lt; div class = "pos mountain1" & gt; & lt; / div & gt;
& lt; div class = "pos núi2" & gt; & lt; / div & gt;
& lt; / div & gt;

02. Bắt đầu CSS

Để làm cho thiết kế, hình ảnh độ dốc nền sẽ được thêm vào thân và đặt để lấp đầy kích thước của màn hình. Trình bao bọc chứa tất cả các lớp và dòng tràn cho nội dung bị ẩn để có thể áp dụng các hiệu ứng tỷ lệ.

 cơ thể {
Biên độ: 0;
Đệm: 0;
Chiều cao: 100%;
Bối cảnh: URL (IMG / BG.jpg)
trung tâm trung tâm;
Kích thước nền: Che;
Không thể
.vỏ bánh {
Chiều rộng: 100VW;
Chiều cao: 100vh;
Chức vụ: Người thân;
tràn: ẩn;
}

03. Vị trí mỗi lớp

Mã tiếp theo đảm bảo rằng mỗi lớp được định vị tuyệt đối, cái này qua khớp khác, bên trong trình bao bọc. Kích thước của điều này lấp đầy chiều rộng và chiều cao của chế độ xem để hình ảnh lấp đầy màn hình.

 .pos {
Vị trí: Tuyệt đối;
Top: 0;
Trái: 0;
Chiều rộng: 100VW;
Chiều cao: 100vh;
}

04. Thêm văn bản

Lớp văn bản thực sự chỉ cần thêm hình ảnh bên phải và đặt vị trí bắt đầu của nó trước khi hoạt hình nó vào vị trí bằng cách sử dụng đi lên Keyframes sẽ được thêm vào trong bước cuối cùng.

 .Text {
Bối cảnh: URL (IMG / Text.png)
trung tâm trung tâm;
Kích thước nền: Che;
Biến đổi: Translate3D (0, 30px, 0);
Opacity: 0;
Hoạt hình: Moveup 1.8S Dễ thở;
Chế độ hoạt hình-Fill-Mode: Chuyển tiếp;
Không thể

05. Animate ngọn núi đầu tiên

Ngọn núi đầu tiên là cách xa màn hình, và điều này sẽ nhận được một quy mô nhỏ sẽ hoạt hình. Độ mờ đục của tất cả các lớp cũng được đặt ở mức thấp để chúng xuất hiện tại chỗ.

 .mountain1 {
Bối cảnh: URL (IMG / Mountain1.png)
trung tâm trung tâm;
Kích thước nền: Che;
Biến đổi: Scale3D (1.1, 1.1, 1.1);
Opacity: 0,2;
Hoạt hình: Đơn giản hóa 1S;
Chế độ hoạt hình-Fill-Mode: Chuyển tiếp;
Không thể

06. Animate Núi tiền cảnh

Ngọn núi cho tiền cảnh gần giống với ngọn núi khác - nó chỉ thực hiện nhiều quy mô vào vị trí. Cả hai ngọn núi đều chia sẻ các khung hình chính 'Scaler' cho hoạt hình của họ.

 .mountain2 {
Bối cảnh: URL (IMG / Mountain2.png)
trung tâm trung tâm;
Kích thước nền: Che;
Biến đổi: Scale3D (1.3, 1.3, 1.3);
Opacity: 0,1;
Hoạt hình: Scaler 1.2S Dễ thở;
Chế độ hoạt hình-Fill-Mode: Chuyển tiếp;
Không thể

07. Thêm hình ảnh động Keyframe

Các khung hình chính hiện được tạo ra chỉ định rằng. Ở trạng thái cuối của phong trào, trạng thái cuối này sẽ được tổ chức tại chỗ. Các văn bản được di chuyển lên, và những ngọn núi được thu nhỏ lại, để phù hợp với thiết kế.

 @KeyFrames MoveUp {
100% {
Biến đổi: Translate3D (0, 0, 0);
Opacity: 1;
Không thể
Không thể

@KeyFrames Scaler {
100% {
Biến đổi: Scale3D (1, 1, 1);
Opacity: 1;
Không thể
}

generate CSS — Chọn một vé để tạo CSS ngay bây giờ để được giảm giá lớn (Tín dụng hình ảnh: Tương lai)

Bài viết này ban đầu được xuất bản trong số 289 của Nhà thiết kế web Bằng bán ngay bây giờ . Đăng ký tại đây .

Đọc thêm:

Cách thêm hình ảnh động vào SVG bằng CSS
Dos và Don'ts cho hoạt hình web thú vị
Cách thiết kế với hình dạng CSS: Giới thiệu

Cách tạo hiệu ứng Parallax xếp lớp trên trang web của bạn

01. Tạo hiệu ứng tỷ lệ

02. Bắt đầu CSS

03. Vị trí mỗi lớp

04. Thêm văn bản

05. Animate ngọn núi đầu tiên

06. Animate Núi tiền cảnh

07. Thêm hình ảnh động Keyframe

Cách - Các bài báo phổ biến nhất

14 mẹo quy trình làm việc Zbrush

Thiết kế một trang web đáp ứng với kích thước dựa trên EM

Giới thiệu về Thử nghiệm Frontend

Cách chụp ánh sáng bằng dầu

Cách điêu khắc một con yêu tinh in 3D

Cách xây dựng các trang web nhanh hơn

Tạo mực trộn với InDesign

Tạo một ký tự 3D Furry từ đầu

Thể loại