Khái niệm
Trong CSS có một thuộc tính đó là Filter, đây là bộ chọn hổ trợ người dùng tinh chỉnh xắc tố cho tấm hình. Ngòi những giá trị có sẳn trong CSS của Filter như:
- blur: Làm nhòe hình ảnh.
- brightness: Thay đổi độ sáng.
- contrast: Thay đổi độ tương phản.
- drop-shadow: Đổ bóng phần tử.
- grayscale: Chuyển sang màu xám.
- invert: Đổi sang màu âm bản.
- opacity: Hiệu ứng độ mờ.
- saturate: Thay đổi cường độ màu.
- sepia: Đổi sang tông màu sepia.
Tuy nhiên ngoài những thuộc tính căn bản này. Lập trình viên có thể sử dụng một hiệu ứng filter từ SVG để tạo ra vô vàng hiệu ứng đa dạng. Trong bài viết ngày hôm nay hãy cùng Lùn Dev đi xây dựng một hiệu ứng animation lượng sóng sử dụng Filter của SVG cùng với sự hổ trợ của HTML và CSS.
Xây dựng animation effect image bằng filter SVG CSS
Đầu tiên ở HTML mình tạo ra một thẻ image như sau:
Qua CSS ta thêm thuộc tính Filter và trỏ đến một id có tên là noise:
img {
filter: url('#noise');
}
Quay lại HTML mình tiến hành khởi tạo một SVG và thêm một thẻ filter có id trùng với id noise ta thêm bên CSS khi nảy.
Sử dụng feTurbulence để tạo ra độ nhiễu cho tấm ảnh.
Với baseFrequency gồm hai tham số tương ứng với độ nhiễu theo chiều cao và chiều rộng.
Thẻ animate để tạo ra hiệu ứng thay đổi từ from đến to và tham số mình thay đổi ở đây là chiều ngang.
Thẻ dur để ám chỉ thời gian chạy 1 lần animation.
Thẻ repeatCount dùng để xác định số vòng chạy animation. Nếu muốn chạy mãi ta chọn indefinite.
Sau cùng ta thêm vào filter SVG một thẻ feDisplacementMap như sau:
Thẻ feDisplacementMap sử dụng các giá trị pixel từ hình ảnh để thay thế vào không gian vector trong SVG.
Với scale là giá trị xác định hệ số tỷ lệ cho sự dịch chuyển. Giá trị của scale càng lớn thì hiệu ứng chuyển động sảy ra càng mạnh mẽ.
Hình ảnh kết quả
Kết luận
Vậy là chỉ với vài dòng code ngắn, thậm chí không viết gì CSS ta tạo ra hiệu ứng animation hình ảnh lượng sóng, ta hoàn toàn có thể tạo ra hiệu ứng animation filter bằng SVG. Sử dụng thuần thục filter trong SVG ta hoàn toàn có thể custom lại và tạo ra những hiệu hình ảnh vô cùng đẹp mắc.