Tạo hiệu ứng trượt so sánh ảnh Before và After với JQuery twentytwenty

Front end • 29/08/2018 • 72 Lượt xem

Hiệu ứng twentytwenty giúp bạn so sánh hình ảnh giữa 2 sản phẩm hoặc sự khác nhau giữa hình ảnh các thành phố xưa và nay.

Bạn đang viết 1 bài review so sánh hình ảnh chụp từ 2 sản phẩm nào đó, hoặc hình ảnh so sánh vẻ đẹp của các thành phố xưa và nay. Nếu bạn thường xuyên xem mấy trang web về spa, thẩm mỹ chắc đã từng bắt gặp những hình ảnh có hiệu ứng Before And After của khách hàng trước và sau khi sử dụng dịch vụ của họ. Đây là một hiệu ứng rất trực quan để so sánh sự khác nhau giữa hai bức ảnh.

Chúng ta có thể thêm hiệu ứng Before And After rất dễ dàng với Plugin Jquery twentytwenty.js

Đầu tiên bạn hãy download thư viện twentytwenty theo link dưới đây:

Download twentytwenty

Tiếp theo để so sánh 2 ảnh bạn cần tạo 1 khung bao bọc 2 ảnh. Ví dụ

<div id="before_after"><img src="https://nguyenthanhvn.com/upload/images/front-end/thanh_pho_1.jpg" /> <img src="https://nguyenthanhvn.com/upload/images/front-end/thanh_pho_2.jpg" /></div>

Sau đó, gọi hàm twentytwenty() với khung chứa ảnh. Ví dụ:

$(window).load(function() {
  $("#before_after").twentytwenty();
});

Thế là xong. Bạn có thể download Full Source code dưới đây để tham khảo

Download demo

Demo twentytwenty