Khi xem ảnh nhuộm tóc, khách thường muốn so màu ở chân, thân và ngọn. Hai ảnh đặt cạnh nhau trên điện thoại dễ bị thu nhỏ. Ví dụ dưới đây đặt hai ảnh cùng kích thước chồng lên nhau, rồi dùng thanh kéo để lộ dần ảnh sau nhuộm.
Chuẩn bị ảnh
Dùng hai ảnh được phép công bố, chụp cùng góc, khoảng cách và ánh sáng. Căn lại vị trí đầu và vai trước khi xuất hai ảnh cùng tỷ lệ. Thanh kéo giúp đối chiếu chi tiết, còn ánh sáng và cân bằng trắng vẫn có thể làm màu nhìn khác thực tế.
Tạo thanh so sánh
Đặt hai ảnh truoc.jpg và sau.jpg cạnh tệp HTML. Ví dụ dùng ảnh tỷ lệ 4:5.
<div class="compare" id="hair-compare">
<img src="truoc.jpg" alt="Tóc nền nâu đậm trước nhuộm">
<img class="after" src="sau.jpg" alt="Tóc nâu caramel sau nhuộm">
</div>
<label for="hair-range">Phần ảnh sau nhuộm hiển thị</label>
<input id="hair-range" type="range" min="0" max="100" value="50">
<style>
.compare {
--reveal: 50%;
position: relative;
max-width: 420px;
aspect-ratio: 4 / 5;
}
.compare img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.compare .after {
clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}
</style>
<script>
const compare = document.querySelector("#hair-compare");
const range = document.querySelector("#hair-range");
const update = () => {
compare.style.setProperty("--reveal", range.value + "%");
};
range.addEventListener("input", update);
update();
</script>
0 hiển thị ảnh trước, 100 hiển thị ảnh sau. Điều khiển range có nhãn và dùng được với phím mũi tên. Khi kiểm tra trên điện thoại, thử kéo về cả hai đầu và xem đường chân tóc có giữ đúng vị trí hay không. Nếu đường chân tóc bị nhảy, chỉnh lại cách căn ảnh trước khi thay CSS.
Đây là ví dụ giao diện cho album mẫu tóc, chẳng hạn trên website của một salon như A Vòong Hair Salon. Mô tả ảnh trong ví dụ cần được sửa theo đúng ảnh thực tế.