Tạo hiệu ứng nền thị sai được điều khiển bằng chuột

Jan 28, 2026
Cách
[số 8]
(Tín dụng hình ảnh: Renaud Rohlinger)

Các trang web với Scallax Scrolling tiếp tục được phổ biến vì một lý do: họ tạo ra trải nghiệm duyệt web dễ chịu và hấp dẫn cho người dùng. Chúng tôi đã nhìn vào tuyệt đẹp nhất parallax cuộn. Các trang web để truyền cảm hứng cho bạn, nhưng bạn sẽ làm gì nếu bạn muốn tạo một trong những của riêng bạn?

May mắn thay, nhà phát triển sáng tạo Pháp Renaud Rohlinger ở đây để chỉ cho bạn những sợi dây để tạo ra một nền cuộn Parallax mà bạn có thể điều khiển bằng chuột. Kiểm tra kết quả tuyệt vời trên trang web của anh ấy , và sau đó học hỏi từ chính Rohlinger dưới đây về cách bạn có thể sao chép hiệu ứng trong dự án tiếp theo của mình.

Bạn cũng có thể thử một trong những xây dựng trang web và trong khi bạn đang xem xét hiệu suất trang web của bạn, hãy kiểm tra web hosting Dịch vụ đang làm việc cho bạn. Có một trang web nặng nề truyền thông? Sao lưu với đáng tin cậy lưu trữ đám mây .

01. Xác định khung tài liệu HTML

parallax mouse site

Mở ra một màn hình giật gân đơn sắc, trang web ngay lập tức Juxtaposes hình nền 3D hoạt hình với kiểu chữ tiếng Nhật (Tín dụng hình ảnh: Renaud Rohlinger)

Bước đầu tiên là xác định khung của tài liệu HTML. Điều này bao gồm container HTML mô tả tài liệu là có các phần cho đầu và thân. Trong khi phần đầu nối các tệp JavaScript và CSS bên ngoài, phần cơ thể được sử dụng để xác định các phần tử nội dung trang ở bước 2. 

 & lt;! DocType HTML & GT;
& lt; html & gt;
& lt; Head & GT;
& lt; tiêu đề & gt; thị trường nền & lt; / tiêu đề & gt;
& lt; link rel = "biểu định kiểu" 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. Xác định nội dung HTML

Nội dung cơ thể bao gồm văn bản hiển thị và một container div bằng cách sử dụng Data-Parallax. thuộc tính. Nó là yếu tố container này sẽ được sử dụng cho nền thị sai, với mỗi phần tử con của nó được tạo kiểu bằng hình ảnh nền yêu cầu. Trong ví dụ này, container có ba lớp hình ảnh được tạo từ các phần tử Div trẻ em. 

 & lt; h1 & gt; xin chào! & Lt; / h1 & gt;
& lt; Div Data-Parallax & GT;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
& lt; / div & gt;

03. Tạo một thùng chứa Parallax CSS

parallax mouse site

Cuộn xuống, mọi thứ trở nên nhiều màu sắc hơn, với sự khuyến khích để theo dõi nhân vật mèo và nhấp vào bạn qua danh mục chính (Tín dụng hình ảnh: Renaud Rohlinger)

Tạo một tập tin mới được gọi là phong cách.css. . Bước đầu tiên trong tệp này đặt màu nội dung mặc định là màu trắng và cài đặt cho hộp chứa nền thị sai. Định vị cố định được áp dụng cho container Parallax để cho phép nó vẫn ở cùng vị trí với nội dung cuộn qua nó. Một màu mặc định được áp dụng như màu trang, trong khi Z-Index âm cho phép bộ chứa xuất hiện dưới nội dung trang. 

 HTML, cơ thể {
   Màu sắc: #fff;
Không thể
[Data-Parallax] {
   Vị trí: Đã sửa;
   Chiều rộng: 100VW;
   Chiều cao: 100vh;
   Top: 0;
   Trái: 0;
   Z-Index: -1;
   Màu nền: # 000;
}

04. Thiết lập các lớp Parallax CSS

Mỗi lớp hình ảnh được đặt để sử dụng định vị tuyệt đối với kích thước để khớp với cửa sổ trình duyệt. Hình ảnh Parallax trong ví dụ này sẽ được dựa trên một mẫu có kích thước cụ thể được đặt để lặp lại. Bạn có thể chọn chỉ lặp lại hình ảnh theo chiều dọc bằng cách sử dụng lặp lại-y hoặc theo chiều ngang bằng cách sử dụng Lặp lại-X. 

 [Data-Parallax] & GT; * {
   Vị trí: Tuyệt đối;
   Chiều rộng: 100VW;
   Chiều cao: 100vh;
   Lặp lại nền tảng: Lặp lại;
   Kích thước nền: 20VW 20VW;
}

05. Sử dụng các lớp nền CSS

parallax mouse site

Mong muốn tìm công việc phát triển từ công khai của trang web, lãng phí renaud không có cơ hội để giới thiệu năng lực webgl của mình (Tín dụng hình ảnh: Renaud Rohlinger)

Trong khi mỗi lớp hình ảnh chia sẻ vị trí và cài đặt kích thước được xác định trong bước 4, mỗi lớp sử dụng một hình ảnh duy nhất. Bộ chọn NTH-TRẺ được sử dụng để tham chiếu từng phần tử riêng lẻ trong thùng chứa Parallax. Thuộc tính hình ảnh nền được sử dụng để vẽ hai dòng tạo hiệu ứng lưới khi lát gạch. Các lớp thấp hơn sử dụng màu tối hơn để giúp cung cấp một nhận thức về độ sâu. 

 [Data-Parallax] & GT; *: Nth-con (1) {
   hình nền:
      gradient tuyến tính (sang phải, # 333 1px,
  1px trong suốt),
      gradient tuyến tính (đến dưới, # 333 1px,
  trong suốt 1px);
Không thể
[Data-Parallax] & GT; *: Nth-con (2) {
   hình nền:
      gradient tuyến tính (sang phải, # 777 1px,
1px trong suốt),
      gradient tuyến tính (đến dưới, # 777 1px,
trong suốt 1px);
Không thể
[Data-Parallax] & GT; *: Nth-con (3) {
   hình nền
      gradient tuyến tính (sang phải, #fff,
1px trong suốt),
      Độ dốc tuyến tính (đến dưới cùng, #fff 1px,
 trong suốt 1px);
}

06. Thực hiện khởi tạo lớp JavaScript

Tạo một tập tin mới được gọi là Code.js. . Bước này tìm thấy container Parallax và bắt đầu từng lớp hình ảnh của nó với Dữ liệu-Index. Thuộc tính sẽ được sử dụng ở bước 7. Điều này phải được thực hiện từ một hàm được đính kèm với sự kiện tải của cửa sổ trình duyệt, để mã chỉ được thực thi khi nội dung cơ thể của trang đã sẵn sàng. 

 window.addeventlistener ("tải", hàm () {
   var container = tài liệu.
QuerySelector ("[dữ liệu-Parallax]");
   var Childnodes = container.children;
   cho (var n = 0; n & lt; Childnodes.length; n ++) {
      Childnodes [n] .setattribution ("Data-Index", N + 1);
   Không thể
   **** Bước 7 ở đây
});

07. Tính toán chuyển động chuột JavaScript

Hiệu ứng phụ thuộc vào việc di chuyển các hình ảnh liên quan đến từng lớp thị sai để đáp ứng với chuyển động của chuột. Container Parallax được xác định ở bước 6 có một mousemove. Trình nghe sự kiện đính kèm, kích hoạt chức năng để định vị lại hình ảnh nền của các lớp thị sai bất cứ khi nào có di chuyển chuột. Mỗi lớp có tính toán chuyển động dựa trên số chỉ mục được áp dụng trong bước 6. 

 container.addeventlistener ("Mousemove",
 Chức năng (e) {
   var elms = this.children;
   cho (var c = 0; c & lt; elms.length; c ++) {
      var motion = parseInt (Elms [c].
getAttribution ("Data-Index")) / 10;
      var x = ((e.clientx) * chuyển động) + "px";
      var y = ((e.clienty) * chuyển động) + "px"; Elms [c] .style.background & x +
"" + y;
   Không thể
});

Bài viết này ban đầu được xuất bản trong Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . Mua số phát hành 290 bây giờ.

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

  • 10 khung CSS tốt nhất năm 2019
  • Cách thêm hình ảnh động vào SVG bằng CSS
  • 52 Công cụ thiết kế web để giúp bạn làm việc thông minh hơn năm 2019

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

Cách tạo ứng dụng Apple Watch

Cách Jan 28, 2026

[số 8] (Tín dụng hình ảnh: Tương lai) Khi Apple lần đầu tiên ra mắt SmartWatch cho công chúng, m�..

7 mẹo hàng đầu để bắt đầu kinh doanh của riêng bạn

Cách Jan 28, 2026

[số 8] Nếu bạn đã cảm thấy bị mắc kẹt trong một đường ray sáng tạo, có thể đáng để có một kh..

Tốc độ điêu khắc một sinh vật trong Zbrush

Cách Jan 28, 2026

[số 8] Khi những sinh vật khái niệm trong Zbrush, hãy trình bày ý tưởng của bạn như một miếng da xám, m�..

5 mẹo cho CSS siêu nhanh

Cách Jan 28, 2026

[số 8] Bạn đã nghĩ về kích thước của CSS của trang web của bạn? Nếu tấm phong cách của bạn đang bó..

Cách tạo Glazes với màu nước

Cách Jan 28, 2026

[số 8] Đối với hội thảo này, tôi sẽ đưa bạn từng bước qua một trong những bức tranh của tôi - bao..

Cách tạo logo retro với Trình thiết kế mối quan hệ

Cách Jan 28, 2026

[số 8] Dễ dàng sử dụng và với một số công cụ sáng tạo dưới vành đai của nó, Affinity Designer là m�..

Cách thêm kịch tính vào tác phẩm nghệ thuật Pastel của bạn

Cách Jan 28, 2026

[số 8] Các nghệ sĩ tuyệt vời như Rembrandt và Caravaggio đã bơm tác phẩm nghệ thuật của họ với một c..

Bắt đầu với HTML Canvas

Cách Jan 28, 2026

[số 8] HTML & LT; Canvas & GT; Yếu tố là một giải pháp mạnh mẽ để tạo đồ họa dựa trên pixel t..

Thể loại