Rellax.js - Các tính năng Parallax miễn phí sử dụng Vanilla JavaScript
Cuộn parallax trông đáng kinh ngạc khi được thực hiện đúng. Đây không phải là một tính năng bạn muốn có trên mọi trang web nhưng đối với các trang web và trang đích sáng tạo, các yếu tố thị sai thu hút sự chú ý nhanh.
Có hàng tấn thư viện JavaScript miễn phí cho hiệu ứng cuộn hoạt hình nhưng nhiều người bị cồng kềnh hoặc quá phức tạp đối với một số người.
Đó là lý do tại sao tôi khuyên bạn nên Rellax.js cho nhu cầu thị sai của bạn. Đây là một plugin mã nguồn mở miễn phí được xây dựng trên JavaScript vanilla, vì vậy nó là không có bất kỳ sự phụ thuộc nào.
Theo mặc định, nó chỉ yêu cầu một chức năng gọi đơn giản để gán lớp parallax cho các phần tử trang. Sau đó, khi bạn cuộn, các yếu tố này cố định và di chuyển cùng với quan điểm của người dùng.
Bạn có thể tùy chỉnh các yếu tố này để xuất hiện gần hơn, xa hơn hoặc đằng sau các yếu tố trang. Điều này tạo ra ảo ảnh về chiều sâu trên trang và tất cả đều hoạt động thông qua một thư viện JavaScript đơn giản.
Tất cả mã nguồn Rellax đều có sẵn miễn phí trên GitHub nếu bạn muốn tải xuống một bản sao.
Toàn bộ thiết lập sử dụng một hàm JS nhắm mục tiêu .rellax lớp như vậy:
var rellax = new Rellax ('. rellax'); Lưu ý bạn có thể sử dụng khá nhiều bất kỳ lớp học nào bạn muốn, nhưng bản demo ví dụ sử dụng .rellax vì đơn giản.
Từ đây, bạn chỉ cần bọc các yếu tố thị sai của bạn bên trong một div với .rellax lớp và đặt thuộc tính tốc độ. Điều này hoạt động thông qua dữ liệu-tốc độ thuộc tính tùy chỉnh chấp nhận các giá trị từ -10 đến +10.
Đây là một đoạn trích ví dụ từ HTML trên trang demo:
Tôi rất chậm và mượt
Bạn cũng có thể yếu tố trung tâm trên trang và tùy chỉnh các vị trí phần tử thông qua CSS.
Rellax không cho bạn biết cách cấu trúc trang hoặc cách xác định các thành phần CSS trên trang của bạn. Tất cả những gì nó làm là tạo hiệu ứng cuộn thị sai tự nhiên với JavaScript thuần túy. Cách bạn sử dụng điều này hoàn toàn phụ thuộc vào bạn.
Để xem một bản thử trực tiếp, hãy xem trang web chính hoặc duyệt qua repo GitHub. Điều này bao gồm một số tài liệu, cùng với các liên kết đến các trang web trực tiếp bằng Rellax.js.
Và tốt nhất, nhóm liên tục sẵn sàng nhận yêu cầu kéo, vì vậy nếu bạn nhận thấy bất kỳ vấn đề nào hoặc có đề xuất cho các tính năng, chỉ cần gửi tin nhắn nhanh đến nhóm.
