Khái quát
Effect image focus like camera in HTML CSS Javascript là hiệu ứng làm mờ background và nhấn mạnh chủ thể giống như khi chúng ta đang cố tình focus vào một vị trí trên camera trong lúc chụp hình. Để làm được hiệu ứng này vốn cơ bản chỉ cần tới HTML và CSS tuy nhiên khi có Javascript nhúng tay vào thì hiệu ứng trông sẽ càng đẹp và lộng lẩy hơn.
Triển khai tạo Effect image focus like camera in HTML CSS Javascript
Đầu tiên ta cần có một background chứa hình ảnh cần focus. Tiếp đến sẽ là một lớp thành phần chồng lên xử dụng blur() để làm mờ vật thể.
Ở đây banner chính là class chứa hình ảnh và inner là class sẽ nằm đè lên nhằm tạo ra hiệu ứng mờ.
body{
margin:0;
}
.banner{
background-image: url(img.jpg);
width:100%;
height:100vh;
background-size: cover;
background-position: center;
}
.inner{
width:100%;
height:100vh;
backdrop-filter: blur(20px);
/* */
}
Nhờ có thuộc tính backdrop-filter: blur mà phần hình chú mèo đã bị làm mờ. Tiếp theo để có thể tạo ra được hiệu ứng Effect image focus like camera in HTML CSS Javascript ta cần khoét một lổ lên bề mặt của class inner khiến cho một phần của inner bị nhìn xuyên qua từ đó không bị làm mờ bởi blur() nửa.
:root{
--left-focus: 50%;
--top-focus: 50%;
}
/* */
.inner{
-webkit-mask: radial-gradient(
circle at var(--left-focus) var(--top-focus),
transparent 0%,
#000000 30%
)
}
-webkit-mask là thuộc tính tạo ra một lát cắt trên khung hình của class. Tại nhữngvị trí có màu đen #000000 thì phần tử inner sẽ được dử nguyên tuy nhiên ở những vị trí không có màu đen với transparent thì tại vị trí đó phần khung hình inner sẽ bị cắt bỏ và có thể nhìn xuyên qua vật thể đàng sau từ đó thấy được sắt nét background phía sau.
Vậy là về cơ bản chúng ta đã có thể tạo ra hiệu ứng focus về hình ảnh rồi.
Tuy nhiên chưa dừng lại ở đó tiếp theo hãy sử dụng thêm một chút Javascript để Effect image focus using -webkit-mask in HTML CSS Javascript có thêm hiệu ứng vị trí focus đi theo con trỏ chuột nhé.
Vị trí bị cắt của inner được đặt tại --left-focus và --top-focus bên CSS, vì vậy cơ bản chúng ta chỉ cần thay đổi hai giá trị này bằng giá trị vị trí của con trỏ chuột nửa là song.
let inner = document.querySelector('.inner');
inner.addEventListener('mousemove', function(event){
document.documentElement.style.setProperty("--left-focus", event.x + 'px');
document.documentElement.style.setProperty("--top-focus", event.y + "px");
})
Chú thích:
- mousemove: là sự kiện hover chuột vào phần tử.
- event.x: là vị trí của con trỏ chuột hiện tại tính theo chiều ngang (Ox).
- event.y: là vị trí của con trỏ chuột hiện tại tính theo chiều dọc (Oy).