SAL JS thư viện hiệu ứng siêu nhẹ cho tín đồ tối ưu tốc độ

Trong thời đại công nghệ số ngày nay, tốc độ tải trang web đóng vai trò quan trọng trong việc thu hút và giữ chân khách hàng. Đặc biệt đối với những ai kiếm tiền online hay kinh doanh trực tuyến, việc tối ưu tốc độ website bán hàng là điều không thể thiếu.

SAL JS là một thư viện hiệu ứng siêu nhẹ, được thiết kế nhằm nâng cao trải nghiệm người dùng mà vẫn đảm bảo hiệu suất tối ưu cho website. Với SAL JS, các nhà phát triển có thể dễ dàng tích hợp các hiệu ứng hấp dẫn mà không làm chậm tốc độ tải trang. Điều này không chỉ giúp cải thiện thứ hạng trên các công cụ tìm kiếm mà còn tăng cường tỷ lệ chuyển đổi cho các trang web thương mại điện tử.

Hãy cùng Quicksite tìm hiểu cách SAL JS có thể trở thành công cụ đắc lực trong chiến lược tối ưu tốc độ website của bạn (mà vẫn không cắt bỏ hiệu ứng), mang lại trải nghiệm mượt mà và chuyên nghiệp cho người dùng, từ đó nâng cao khả năng kiếm tiền online một cách hiệu quả và bền vững.

Đọc thêm: https://quicksite.vn/motion-one-thu-vien-hieu-ung-da-nang-nhe-nhang/

Đọc thêm: https://quicksite.vn/gsap-thu-vien-hieu-ung-dinh-cao-cho-cac-nha-thiet-ke/

Đánh giá sơ lược về SAL JS

Thư viện Sal (Scroll Animation Library) do Mirek Ciastek phát triển là một giải pháp nhẹ và hiệu suất cao dành cho việc tạo hiệu ứng cuộn cho các phần tử trên trang web. Với kích thước dưới 28 KB và không có phụ thuộc nào (như Jquery), Sal cung cấp khả năng hoạt động mượt mà và nhanh chóng cho các trang web mà không làm chậm hiệu suất.

Sal dựa trên API Intersection Observer, cho phép kiểm tra xem các phần tử có nằm trong vùng nhìn thấy của người dùng hay không. Điều này không chỉ giúp tiết kiệm tài nguyên mà còn tăng cường trải nghiệm người dùng bằng cách chỉ hiển thị các hiệu ứng khi cần thiết. Thư viện hỗ trợ nhiều loại hiệu ứng như fade, slide, zoom, và flip, giúp nhà phát triển dễ dàng tùy chỉnh trải nghiệm theo nhu cầu.

Việc cài đặt thư viện rất đơn giản, chỉ cần sử dụng npm hoặc yarn. Sau khi thêm vào dự án, người dùng chỉ cần gán thuộc tính data-sal cho các phần tử HTML mà họ muốn áp dụng hiệu ứng, ví dụ như <div data-sal="fade"></div>. Sal cũng cho phép điều chỉnh thời gian và độ trễ của hiệu ứng thông qua các thuộc tính như data-sal-duration và data-sal-delay, mang lại sự linh hoạt tối đa cho người phát triển.

Một điểm đáng chú ý là Sal hỗ trợ các thuộc tính CSS tùy chỉnh, cho phép người dùng định nghĩa các giá trị riêng cho thời gian, độ trễ và kiểu easing. Thư viện cũng có khả năng phát lại hiệu ứng, với tùy chọn để lập lại hoặc chỉ chạy một lần, giúp tăng cường khả năng tương tác của trang web.

Sal cũng cung cấp các sự kiện để theo dõi sự xuất hiện và biến mất của các phần tử trong viewport, tạo cơ hội cho việc xây dựng những trải nghiệm người dùng động và thú vị hơn. Cuối cùng, thư viện này rất thích hợp cho các dự án cần tối ưu hóa hiệu suất mà vẫn đảm bảo tính thẩm mỹ và hiện đại trong thiết kế giao diện.

Hướng dẫn cài SAL JS cho WordPress sử dụng GenerateBlocks Pro

Một chút về GenerateBlocks Pro và SAL JS

Plugin GenerateBlocks Pro là một plugin thiết kế website nhẹ nhất trên Gutenberg do GeneratePress phát triển với nhiều tính năng tối giản nhưng khá đầy đủ! Một trong những điểm nổi bật là khả năng thêm các thuộc tính tùy chỉnh vào container của GenerateBlocks. Điều này không chỉ giúp mở rộng tính năng mà còn cho phép tích hợp nhiều thư viện JavaScript khác nhau sử dụng các thuộc tính tùy chỉnh đó.

Một trong những thư viện mà Quicksite muốn giới thiệu vì có tính tương thích khá tốt là Sal.js – Thư viện hoạt hình cuộn nhẹ. Sal.js có kích thước rất nhỏ (dưới 2.8 kb) và được viết hoàn toàn bằng JavaScript thuần, không cần phụ thuộc vào bất kỳ thư viện nào khác! Thư viện này được thiết kế nhằm cung cấp giải pháp hiệu suất cao cho việc hoạt hình các phần tử khi cuộn trang. Sal.js dựa trên Intersection Observer, mang lại hiệu suất tuyệt vời trong việc kiểm tra sự hiện diện của các phần tử trong viewport.

Thư viện này cung cấp nhiều hiệu ứng hoạt hình đa dạng, bao gồm:

• Hiệu ứng mờ (fade): Tạo hiệu ứng chuyển động mềm mại bằng cách làm mờ đối tượng.
• Hiệu ứng trượt lên (slide-up): Đối tượng sẽ trượt lên từ phía dưới.
• Hiệu ứng trượt xuống (slide-down): Đối tượng sẽ trượt xuống từ phía trên.
• Hiệu ứng trượt trái (slide-left): Đối tượng sẽ trượt sang trái từ bên phải.
• Hiệu ứng trượt phải (slide-right): Đối tượng sẽ trượt sang phải từ bên trái.
• Hiệu ứng phóng to (zoom-in): Tăng kích thước của đối tượng để tạo cảm giác gần hơn.
• Hiệu ứng thu nhỏ (zoom-out): Giảm kích thước của đối tượng để tạo cảm giác xa hơn.
• Hiệu ứng lật lên (flip-up): Đối tượng sẽ lật lên từ phía dưới.
• Hiệu ứng lật xuống (flip-down): Đối tượng sẽ lật xuống từ phía trên.
• Hiệu ứng lật trái (flip-left): Đối tượng sẽ lật sang trái.
• Hiệu ứng lật phải (flip-right): Đối tượng sẽ lật sang phải.

Các hiệu ứng hoạt hình này giúp nâng cao trải nghiệm người dùng và làm cho giao diện trở nên sinh động hơn.

Hướng dẫn cài thư viện SAL JS vào child theme

Để tải thư viện này về, bạn hãy truy cập vào kho GitHub của Sal.js. Nhấn vào nút “Code” màu xanh và chọn “Download ZIP” từ menu xổ xuống.

Sau khi tải xong, bạn cần tạo một child theme trong WordPress. Bên trong thư mục child theme này, hãy tạo một thư mục con tên là “sal” (hoặc tên khác tùy ý). Tiếp theo, giải nén tệp zip mà bạn đã tải xuống vào một vị trí trên máy tính. Sau đó, sao chép các tệp sal.css và sal.js nằm trong thư mục sal-master->dist và dán chúng vào thư mục “sal” mà bạn đã tạo trong thư mục child theme.

function quicksite_enqueue_sal_scripts() {
    if( is_front_page() )
    {
        wp_enqueue_style( 'sal', get_stylesheet_directory_uri() . '/sal/sal.css' );
        wp_enqueue_script( 'sal', get_stylesheet_directory_uri() . '/sal/sal.js', array(), false, true );
        wp_enqueue_script( 'sal-init', get_stylesheet_directory_uri() . '/sal/sal-init.js', null, null, true );
    }
}
add_action( 'wp_enqueue_scripts', 'quicksite_enqueue_sal_scripts' );

Để bao gồm các script cho toàn bộ trang web, chỉ cần loại bỏ điều kiện is_front_page().

function quicksite_enqueue_sal_scripts() {
    wp_enqueue_style( 'sal', get_stylesheet_directory_uri() . '/sal/sal.css' );
    wp_enqueue_script( 'sal', get_stylesheet_directory_uri() . '/sal/sal.js', array(), false, true );
    wp_enqueue_script( 'sal-init', get_stylesheet_directory_uri() . '/sal/sal-init.js', null, null, true );
}
add_action( 'wp_enqueue_scripts', 'quicksite_enqueue_sal_scripts' );

Cuối cùng, hãy tạo một tệp JavaScript mới có tên sal-init.js (hoặc tên khác mà bạn thích). Tệp này sẽ được sử dụng như một script khởi tạo để kích hoạt các hoạt động của Sal.js.

const animation = sal();
const switchAnimations = () => {
  if (window.innerWidth < 768) {
    animation.reset();
    animation.disable();
  } else {
    animation.reset();
    animation.enable();
  }
};
switchAnimations();
window.addEventListener('resize', switchAnimations);

Với những bước đơn giản trên, bạn đã có thể tích hợp Sal.js vào trang web của mình để tạo ra những trải nghiệm động ấn tượng cho người dùng! (tham khảo thêm DOCS nếu bạn muốn thêm thông tin)

Một số gợi ý cho thiết kế khi dùng SAL JS với plugin GenerateBlocks Pro

Sau khi cài theo hướng dẫn, bây giờ bạn có thể bắt đầu thêm các thuộc tính tùy chỉnh vào các khối chứa mà bạn muốn thực hiện hiệu ứng hoạt hình. Để thêm thuộc tính, hãy chọn khối chứa và cuộn xuống phần Advanced ở bên phải. Mở rộng phần này và bắt đầu thêm các cặp giá trị thuộc tính (attribute-value). Đối với hình ảnh đầu tiên và văn bản nằm dưới vùng nhìn thấy, tôi đã thêm những thuộc tính sau vào các khối chứa:

Container bên trái

Container bên phải

Lưu ý độ trễ nhẹ được thêm vào thuộc tính data-sal-delay để làm cho khối chứa bên phải cuộn vào với một chút độ trễ. Tôi đã sử dụng chính xác các cài đặt giống nhau cho các nhóm hình ảnh và văn bản tiếp theo.

Đối với các hộp biểu tượng ở dưới cùng, tôi đã sử dụng các cặp thuộc tính – giá trị sau:

Container đầu tiên

Container thứ 2

Container thứ 3

Một lần nữa, hãy lưu ý đến sự chậm trễ nhẹ giữa các giá trị góp phần vào việc các phần tử không cuộn lên cùng một lúc chính xác.

Cuối cùng, cho phần kêu gọi hành động (đăng kí nhận tin) ở dưới cùng, bạn nên sử dụng các cặp thuộc tính – giá trị sau.

Nếu bạn không muốn thay đổi hành vi hoạt hình trên các thiết bị di động nhỏ hơn 768px, bạn không cần hàm switchAnimations. Bạn chỉ cần khởi tạo hoạt hình một lần mà không cần điều kiện hay gọi hàm nào. Đây là cách thực hiện:

const animation = sal();

Chúc bạn thiết kế website và lập trình vui vẻ!