Ghi chú nhanh: Hiệu ứng cuộn thị sai là một cách hiệu quả để in đậm và được xác định trên các trang web, đặc biệt nếu đó là một thương hiệu hoặc một trang sản phẩm lớn hiển thị các tính năng khác nhau của nó. Nhưng nó hầu hết được thực hiện rất sai khi sử dụng Javascript. Bài đăng này sẽ làm sáng tỏ những phần chính xác và hiệu quả của việc thực hiện nó hoàn toàn bằng CSS.

Sacha Greif, người tạo ra sidebar.io, một người bạn đồng hành trong bài báo thiết kế tuyệt vời như The Hacker News, đã cải tiến trang web danh mục đầu tư gần đây và ở chân trang của trang web, được thêm vào cụ thể –

“Đảm bảo 100% không có Scroll-Hijacking.”

Ví dụ điển hình về hiệu ứng thị sai là gì? Điều này. Xem nó trơn tru như thế nào? Có gì khác biệt ở đây?

Để tôi lùi lại một bước, tại sao lại sử dụng hiệu ứng cuộn thị sai? Bởi vì nó có thể thêm chiều sâu và sự tinh tế cho trang web, điều này thật tuyệt vời cho các trang sản phẩm đích hoặc các trang hack tăng trưởng thị trường.

Mọi người làm gì sai khi tạo hiệu ứng cuộn thị sai:

  • Sử dụng các sự kiện cuộn (và chiếm đoạt chúng) hoặc nền-vị trí Thuộc tính CSS để tạo hoạt ảnh thị sai.

Người ta nên làm gì?

  • Sử dụng các biến đổi CSS 3D để tạo hiệu ứng thị sai chính xác hơn.
  • Để sử dụng Mobile Safari vị trí: dính để đảm bảo rằng hiệu ứng thị sai được lan truyền.

Các vấn đề với các phương pháp tiếp cận sai:

Sử dụng các sự kiện cuộn:

Yêu cầu quan trọng của hành vi thị sai là nó phải được ghép nối với nhau; nghĩa là, đối với bất kỳ thay đổi nào trong vị trí cuộn của trang, vị trí của phần tử thị sai cũng phải cập nhật. Các trình duyệt hoạt động không đồng bộ. Vì thế? Vì vậy, trong hầu hết các trình duyệt, các sự kiện cuộn được phân phối dưới dạng “nỗ lực tốt nhất” và người ta không thể đảm bảo rằng chúng sẽ được phân phối trên mọi khung hình của hoạt ảnh cuộn.

Thực tế này cho chúng ta biết tại sao không nên sử dụng giải pháp dựa trên Javascript để kết hợp các chuyển động của các phần tử trên trang với các sự kiện cuộn. Nếu chuỗi Javascript chính bận với một số công việc khác, các sự kiện cuộn sẽ không được phân phối ngay lập tức, có nghĩa là hành vi thị sai sẽ bị mất, vì phần tử thị sai cần phản ánh nó ngay lập tức.

Javascript không đảm bảo rằng hành vi thị sai sẽ tuân theo vị trí cuộn của trang.

Đây là lý do cho ví dụ hoạt hình bẩn thỉu, han gỉ, bẩn thỉu mà tôi đã đưa ra ở phần đầu. Sử dụng các sự kiện cuộn sẽ kích hoạt các dòng và sơn không cần thiết.

Cập nhật Vị trí Nền:

Điều này không tốt vì nó khiến trình duyệt sơn lại các phần bị ảnh hưởng của trang khi cuộn và điều đó có thể rất tốn kém khi đánh dấu trang.

CÁCH ĐÚNG ĐỂ CÓ HIỆU ỨNG GHÉP PARALLAX: CHỈ CSS

Nếu chúng ta muốn tạo ra một chuyển động thị sai không có jank mượt mà, chúng ta cần sử dụng một thứ gì đó là thuộc tính tăng tốc phần cứng (ngày nay có nghĩa là sử dụng biến hìnhsự mờ đục).

Hiệu ứng cuộn thị sai về cơ bản có thể được tạo bằng cách sử dụng Chuyển đổi 3D, tận dụng lợi thế của Góc nhìn cá nhân Thuộc tính CSS.

Điểm đang tồn tại – một vị trí các phần tử khác nhau (các trang trình bày nếu bạn muốn) vào và ra khỏi khung nhìn theo trục z và chia tỷ lệ chúng theo nếu chúng được đặt theo hướng + z hoặc -z.

This post is also available in: Spanish Tiếng Việt Italian

LEAVE A REPLY

Please enter your comment!
Please enter your name here