Hiệu ứng kéo qua lại xem so sánh ảnh trước và sau

Tham khảo web nina có hiệu ứng trượt xem ảnh trước và sau (Before and after slider)
http://ngogiabinhduong.com/
http://skywash.vn/

Sử dụng hiệu ứng kéo qua lại trên một khung ảnh để xem và so sánh giữa 2 bức ảnh đang được áp dụng khá nhiều hiện nay. Thay gì thông thường chúng ta sẽ úp 2 tấm ảnh lên và xem, nhưng thông qua hiệu ứng này thì việc xem so sánh giữa hai tấm ảnh sẽ trở bên hiện đại và đẹp mắt hơn.
Tính năng này được áp nhiều dành cho các nội dung như:

+ So sánh ảnh trước và sau khi chỉnh sửa
+ So sánh ảnh chụp của 2 chiếc điện thoại hay máy ảnh
+ Ảnh trước và sau khi phẩu thuật thẩm mỹ, dịch vụ làm đẹp.
+ So sánh ảnh trước khi chỉnh răng và sau khi làm rắng trắng hơn
+ Và nhiều nội dung phù hợp khác...


Nếu không tích hợp code trực tiếp vào web bạn vẫn có thể sử dụng tính năng này thông qua website: https://apps.elfsight.com/. bạn có thể đăng ký tài khoản Free hoặc trả phí trên này để sử dụng hiệu ứng này.

XEM DEMO TÍNH NĂNG 👇


Việc sử dụng trực tiếp trên Elfsight cũng rất đơn giản. Truy cập vào trang chủ bấm vào Menu Widget và chọn Before and after slider ở mục Tools.


Tại giao diện này, chúng ta sẽ chọn vào create Widget để tiến hành.
Hãy chịu khó đọc theo hướng dẫn hoặc dịch trang web sang tiếng Việt để có thể hiểu hơn về nội dung.


Sau khi tải xong 2 ảnh cho hiệu ứng này, bạn bấm tiếp vào continue with this template. Tiếp theo trang web sẽ yêu cầu bạn đang ký hoặc đăng nhập vào để tiếp tục. Ở đâ bạn có thể đăng nhập thông qua các tài khoản mạng xã hội như Google hoặc Facebook.


Khi login thành công, như ảnh dưới bãn chỉ cần bấm vào Add to website để lấy code và chèn vào web của bạn. 


Hiện Elfsight ngoài việc cung cấp tính năng Before and after slider thì trên trang còn cung cấp rất nhiều các tính năng khác, bạn có thể tham khảo tại mục Widget trên web.
Tất cả tính năng đều đi kèm các tiện ích hỗ trợ cho việc bạn sử dụng miễn phí hay trả phí. Các gói được hỗ trợ như thề nào thì các bạn có thể tham khảo trực tiếp tại website của họ.



Chúc các bạn thành công!






Đăng nhận xét

Mới hơn Cũ hơn