Create an interactive parallax image

Feb 2, 2026

Cách

Parallax cuộn. không còn là người nhận sự chú ý được đảm bảo, nhưng có những cách khác để sử dụng các kỹ thuật Parallax để thu hút khách truy cập của bạn và tăng cường Kinh nghiệm người dùng .

[số 8]

Hãy xem Trang web của ông Fisk , thiết kế bởi BMO. và bạn sẽ nhận thấy một loại parallax khác nhau đang diễn ra: Hình ảnh chính có màu sắc rực rỡ di chuyển trong 3D, để đáp ứng với chuyển động của chuột của bạn.

5 mẹo cho CSS siêu nhanh

Đó là một hiệu ứng ấn tượng không quá khó để thực hiện; Chỉ cần làm theo các bước sau để cung cấp cho trang web của bạn một cảm giác sâu sắc về chiều sâu.

Tạo trang web bắt mắt của riêng bạn với sự hoàn hảo web hosting dịch vụ và người tạo ra trang web dụng cụ. Và, trên đường đi, lưu các tập tin thiết kế của bạn trong tốt nhất lưu trữ đám mây .

01. Bắt đầu HTML.

Bước đầu tiên là xác định tài liệu HTML, bao gồm bộ chứa HTML để lưu trữ các phần đầu và thân. Mặc dù phần đầu chủ yếu chịu trách nhiệm tải các tài nguyên CSS và JavaScript bên ngoài, phần cơ thể sẽ lưu trữ các phần tử nội dung sẽ được tạo ở bước 02.

[số 8]

 & lt;! DocType HTML & GT;
& lt; html & gt;
& lt; Head & GT;
& lt; Tiêu đề & GT; Chuột cuộn & LT; / Tiêu đề & GT;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
*** BƯỚC 2 TẠI ĐÂY
& lt; / body & gt;
& lt; / html & gt;

02. Yếu tố nội dung

Kỹ thuật sẽ cho phép bất kỳ container nội dung nào bằng thuộc tính Parallax dữ liệu để hiển thị hiệu ứng. Mỗi yếu tố con cấp đầu tiên sẽ hiển thị với bản trình bày Parallax. Ví dụ này đặt ba lớp con cho thị sai, nhưng bạn có thể thêm nhiều hơn nếu muốn. Bạn cũng có thể thêm nội dung vào các lớp này như văn bản hoặc hình ảnh; PNG hoặc SVG với độ trong suốt sẽ hoạt động tốt nhất.

 & lt; bài viết dữ liệu-parallax & gt;
  & lt; div & gt; & lt; / div & gt;
  & lt; div & gt; & lt; / div & gt;
  & lt; div & gt; & lt; / div & gt;
& lt; / bài viết & gt;

03. Phong cách container Parallax

Tạo một tệp mới gọi là 'Styles.css'. Bộ quy tắc đầu tiên trong tệp này đặt kích thước mặc định của thùng chứa Parallax và chế độ vị trí của nó. Điều quan trọng là sử dụng định vị tương đối để các yếu tố trẻ em có thể được đặt liên quan đến bất cứ nơi nào chứa container. Độ rộng và chiều cao được đặt để bao phủ toàn màn hình để cho phép tương tác tối đa.

[số 8]

 [Data-Parallax] {
  Chức vụ: Người thân;
  Chiều rộng: 100VW;
  Chiều cao: 100vh;
}

04. Trẻ em Parallax

Mỗi phần tử cấp độ đầu tiên bên trong thùng chứa Parallax dữ liệu có kích thước và định vị để xuất hiện tập trung. Cùng với định vị tương đối của cha mẹ, tỷ lệ phần trăm được sử dụng làm đơn vị đo lường, cho phép định vị và định vị được đặt liên quan đến thùng chứa Parallax. Trong ví dụ này, một nền đỏ trong suốt được sử dụng để chứng minh hiệu ứng - bạn có thể thay thế hình ảnh này bằng PNG hoặc SVG bạn chọn bằng @background: url ("Hình ảnh của bạn ở đây").

 [Data-Parallax] & GT; * {
  Vị trí: Tuyệt đối;
  Chiều rộng: 50%;
  Chiều cao: 50%;
  còn lại: 25%;
  Top: 25%;
  Biên giới: 1px Solid # 000;
  Bối cảnh: RGBA (255,0,0, 0,25)
}

05. Bắt đầu JavaScript

Tạo một tệp mới gọi là 'Code.js'. JavaScript sẽ được sử dụng để kiểm soát các phản hồi đối với các tương tác chuột của người dùng. Chúng tôi không muốn JavaScript chạy bất kỳ mã JavaScript nào cho đến khi trang được tải đầy đủ, do đó mã cho các bước 06 và 07 đặt một hàm được kích hoạt bởi sự kiện tải, kích hoạt khi cửa sổ đã hoàn thành tải.

 window.addeventlistener ("tải", hàm () {
  *** BƯỚC 6 TẠI ĐÂY
});

06. Tìm kiếm nút.

Hoạt động đầu tiên của JavaScript để thực thi ngay sau khi trang đã sẵn sàng là tìm tất cả các lớp Parallax. Đầu tiên, các thùng chứa Parallax được tìm thấy, tiếp theo là con cái của họ. Mỗi đứa trẻ có một số chỉ mục được áp dụng cho chúng dưới thuộc tính 'Chỉ số dữ liệu'.

 ar Nodes = document.QuerySelectorall ("[dữ liệu-Parallax]");
cho (var i = 0; i & lt; nút.length; i ++) {
  var trẻ em = nút [i] .children;
  cho (var n = 0; n & lt; trẻ em.length; n ++) {
  trẻ em [n] .setattribution ("Data-Index", N + 2);
  Không thể
  *** Bước 7 ở đây
}

07. Người nghe Parallax.

Bước cuối cùng là áp dụng một trình lắng nghe sự kiện cho bất kỳ chuyển động chuột nào xảy ra trên container Parallax. Bất kỳ hành động nào như vậy kích hoạt tính năng để tính toán các vị trí mới của các lớp thị sai dựa trên vị trí chuột và thuộc tính Index-Index được xác định ở bước 06 - dẫn đến mỗi lớp cập nhật ở các bước khác nhau. Kết quả của mỗi phép tính được áp dụng cho các lớp thông qua thuộc tính kiểu.

 Nút [i] .addeventlistener ("mousemove", chức năng (e) {
  var elms = this.children;
  cho (var c = 0; c & lt; elms.length; c ++) {
  variviser = parseInt (Elms [c] .getattribution ("Chỉ số dữ liệu")));
  var startx = this.offsetwidth / 4;
  var starty = this.Offsetheight / 8;
  Elms [c] .style.left = startx - (((e.screenx / docise) -e.clientx) / 3) + "px";
  Elms [c] .style.top = starty - (((((e.screeny / docise) -e.clienty) / 3) + "px";
  Không thể
});

Bài viết này ban đầu được xuất bản trong số 272 của Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . MUA VẤN ĐỀ 272 TẠI ĐÂY hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

Animate svg với javascript
Tạo hiệu ứng chất lỏng với WebGL
10 cách để tránh các vấn đề tương thích chéo trình duyệt

[số 8] [số 8]

[số 8]

Create an interactive parallax image

01. Bắt đầu HTML.

02. Yếu tố nội dung

03. Phong cách container Parallax

04. Trẻ em Parallax

05. Bắt đầu JavaScript

06. Tìm kiếm nút.

07. Người nghe Parallax.

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

Lino PrintMaking: Giới thiệu

Nghệ thuật Chiarocuro: Hướng dẫn từng bước

Mặt nạ làm việc Magic với Houdini

Xây dựng địa hình ở Houdini 17

Biến hình minh họa 2D thành nghệ thuật 3D

3 mẹo để chế tạo vật liệu quảng cáo in ấn tuyệt đẹp

Cách chụp chuyển động trong kết xuất 3D của bạn

Vẽ xương chính xác và cơ bắp

Thể loại