Sử dụng Clip-path để tạo hiệu ứng so sánh hình ảnh

0
40

Trong bài này mình sẽ hướng dẫn các bạn sử dụng thuộc tính Clip-path polygon để tạo hiệu ứng so sánh hai hình ảnh với nhau.

Ở đây mình sẽ dùng một chút Javascript để xử lý sự kiện di chuyển chuột.

Mình sẽ tạo 1 cấu trúc folder như sau:

Cấu trúc thư mục

Bạn cần chuẩn bị 2 bức hình (tốt nhất là nên cùng 1 kích thước).
Trong nội dung của file index.html bạn cần link file style.css vào nội dung head.

Thêm link style cho header

Trong nội dung của thẻ body có 2 phần

Thứ nhất là nội dung HTML

Html hiển thị hình ảnh

Trong nội dung Html, mình sử dụng thẻ div với id là “container” để chứa 2 tấm ảnh và dấu mũi tên (thẻ div với id là “slip”).
Tiếp đến bạn cần copy đoạn mã lệnh CSS này bỏ vào file style.css.

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(#fff, #000);
}
.container {
    width: 800px;
    height: 450px;
    border: 3px solid white;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    touch-action: none;
}
#img-1 {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}
#img-2 {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.slip {
    position: absolute;
    height: 30px;
    width: 30px;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    z-index: 10;
    border: 3px solid white;
    border-radius: 50%;
    pointer-events: none;
}
.slip::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 210px;
    top: -210px;
    left: calc(50% - 2.5px);
    background: white;
}
.slip::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 210px;
    bottom: -210px;
    left: calc(50% - 2.5px);
    background: white;
}
.slip span {
    position: absolute;
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    background: white;
}
.slip .prev {
    left: 0;
    clip-path: polygon(100% 0, 35% 50%, 100% 100%);
}
.slip .next {
    right: 0;
    clip-path: polygon(0 0, 65% 50%, 0 100%);
}

Trong đoạn mã CSS trên có một mục mà các bạn cần chú ý đó là clip-path: polygon.

Vậy polygon nó sẽ làm việc như thế nào?
Trong hình dưới đây sẽ có 4 đỉnh với tọa độ
1. x=0, y=0
2. x=100%, y=0
3. x=100%, y=0
4. x=0, y=100%
Các bạn chú ý thứ tự như trên nhé

tọa độ hiển thị của polygon

Ở đây mình chỉ mô tả một cách thức hoạt động của polygon trên hình chữ nhật. Polygon sẽ dựa vào tọa độ các bạn truyền vào để hiển thị phần nội dung bên trong thẻ. Như ví dụ này mình chỉ muốn thẻ img-1 hiển thị 1/2 tấm hình từ bên trái vào giữa và thẻ img-2 hiển thị 1/2 tấm hình từ giữa qua bên phải thì mình sẽ thiết lập nội dung như sau

#img-1 { clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);}
#img-2 { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);}

kết quả hiển thị polygon

Để có thể hiểu rõ hơn về polygon bạn có thể truy cập liên kết này. Trong đây có rất nhiều mẫu hướng dẫn vẽ polygon để bạn có thể lựa chọn.

Kết quả sau khi thiết lập xong nội dung HTML và CSS sẽ được như sau

Nội dung hiển thị sau khi điều chỉnh css

Tới đây thì vẫn chỉ là một nội dung hiển thị tĩnh, bạn cần thêm mã lệnh Javascript sau vào nội dung HTML.

Nội dung script điều khiển sự kiện di chuột

Mã lệnh bạn có thể copy tại đây

<script>
        document.getElementById('container').onmousemove = function (e) {
            var x = e.layerX;
            var percent = x / 800 * 100;
            document.getElementById('img-1').style.clipPath = `polygon(0 0, ${percent}% 0%, ${percent}% 100%, 0% 100%)`;
            document.getElementById('img-2').style.clipPath = `polygon(${percent}% 0, 100% 0, 100% 100%, ${percent}% 100%)`;
            document.getElementById('slip').style.left = `${percent}%`;
        }
</script>

Trong đoạn mã trên mình sẽ bắt sự kiện di chuột cho thẻ #container. Vì hiệu ứng của mình chỉ trượt theo chiều ngang nên mình chỉ cần bắt sự kiện và lấy ra tọa độ X hiện tại của con trỏ chuột.
Tiếp đến mình sẽ tính ra giá trị % tương ứng để thay đổi hiển thị của polygon.
Ở đây có 1 giá trị là 800, đây là độ rộng của thẻ #container đã được quy định trong nội dung CSS (width: 800px;).

Sau khi đã hoàn thành toàn bộ đoạn mã trên thì đây là kết quả bạn sẽ nhận được

Nếu bạn thấy hay hoặc có ích vui lòng để lại một like hoặc một comment.
Nếu mình có gì sai sót vui lòng để lại góp ý của bạn để mình có thể hoàn thiện hơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây