Cách tự động thay đổi màu khi cuộn bằng CSS
Với các thành phần cố định của trang web như logo, bạn sẽ thường gặp phải sự lẫn lộn màu sắc khi cuộn trang. Điều này có thể xảy ra nếu phần tử tĩnh đi qua một phần của trang web có cùng màu với phần tử đó. Phần tử tĩnh sẽ ẩn trong khi nó nằm trên nền đó.
Để khắc phục sự cố này, bạn cần tự động đảo ngược màu của biểu trưng khi nó đi qua một phần tử có cùng màu. Tìm hiểu cách đạt được hiệu ứng này chỉ bằng CSS mà không cần JavaScript!
Mục Lục
Tải xuống mã bắt đầu
Để làm theo hướng dẫn này, hãy tải mã khởi động từ kho lưu trữ GitHub về máy cục bộ của bạn.
Mở index.html trong một trình duyệt trông giống như trang được hiển thị ở đây:
Trang HTML chứa một logo và bốn phần. Mỗi phần có một tiêu đề giả và ba đoạn văn bản giả. Văn bản của logo có cùng màu đen với nền của phần thứ hai và thứ tư. Hiệu ứng này xuất phát từ con thứ n (thậm chí) chặn trong phong cách.cssáp dụng nền đen cho các phần chẵn.
Làm cho Logo dính
Với mã khởi động này, logo không dính ở trên cùng. Điều này có nghĩa là logo sẽ biến mất khi bạn cuộn trang xuống. Bạn có thể biến logo của mình thành tiêu đề cố định bằng cách áp dụng vị trí: dính thuộc tính cho nó bên trong tệp CSS. Để tìm hiểu sâu về định vị trong CSS, hãy đọc bài đăng của chúng tôi về thuộc tính vị trí CSS.
Đảm bảo rằng biểu tượng dính ở trên cùng, nhưng chỉ làm như vậy trên màn hình lớn hơn (vì ở kích thước màn hình nhỏ hơn, biểu trưng có thể đè lên các thành phần khác). Truy vấn phương tiện phản hồi HTML sau đây tạo ra hiệu ứng này:
@media(width > 980px) {
.logo {
position: sticky;
top: .5rem;
}
}
Giờ đây, logo sẽ luôn ở trên cùng và theo bạn khi bạn cuộn. Nhưng bạn cũng sẽ nhận thấy rằng văn bản sẽ biến mất khi bạn cuộn vào các phần có nền tối (vì văn bản logo cũng có màu đen). Bây giờ hãy xem làm thế nào để khắc phục điều này.
Để đảm bảo rằng logo màu đen không biến mất trên nền đen, bạn sẽ cần đảo ngược màu một cách linh hoạt. Cách bạn muốn làm điều này là bằng cách sử dụng chế độ hòa trộn Thuộc tính CSS và gán cho nó một giá trị là sự khác biệt:
@media(width > 980px) {
.logo {
position: sticky;
top: .5rem;
mix-blend-mode: difference
}
}
Thuộc tính CSS mix-blend-mode chỉ định cách nội dung của phần tử sẽ hòa trộn với nội dung của phần tử gốc và nền của phần tử đó. Giá trị khác nhau lấy giá trị khác biệt của từng pixel, đảo ngược màu sáng. Vì vậy, nếu các giá trị màu giống nhau, chúng sẽ trở thành màu đen. Sự khác biệt trong các giá trị sẽ đảo ngược.
Việc bổ sung CSS ở trên sẽ làm cho logo biến mất hoàn toàn. Điều này là do bạn chưa đặt màu của văn bản logo thành màu trắng bên ngoài truy vấn phương tiện. Làm điều đó với đoạn mã sau:
.logo {
color: white;
}
Bây giờ bạn đã thiết lập thành công mọi thứ. Cuộn xuống trang và vào nền đen. Bạn sẽ thấy logo thay đổi từ đen sang trắng.
Bạn cũng có thể làm việc với các màu khác ngoài màu đen và trắng. Ví dụ: nếu bạn thay đổi màu của văn bản biểu trưng thành màu xanh mòng két (#008080), bạn sẽ nhận được màu hồng trên nền trắng. Hình ảnh sau đây minh họa điều này.
Trong hầu hết các trường hợp, bạn muốn phần tử của mình có màu trắng để có được kết quả tốt nhất. Ngoài ra, nếu cuộn lên trên cùng, bạn có thể thấy logo của mình bị cắt làm đôi. Điều này xảy ra vì logo tồn tại bên ngoài
Sử dụng hình ảnh làm biểu trưng thay vì văn bản
Kỹ thuật này không chỉ hoạt động với văn bản mà còn với hình ảnh. Tất nhiên, bạn cần đảm bảo rằng bạn sử dụng hình ảnh màu trắng làm biểu trưng. Ví dụ sau sử dụng logo lorem ipsum màu trắng nằm trong cùng thư mục với index.html tài liệu:
<img src="loremipsum-297.svg" alt="Lorem Ipsum Logo">
Hình ảnh được sử dụng ở đây là SVG (Đồ họa vectơ có thể mở rộng), một loại tệp vectơ.
Bây giờ màu của hình ảnh logo của bạn sẽ là màu đen trên nền trắng như trong hình bên dưới.
Nhưng nếu bạn cuộn vào nền đen, màu của logo sẽ tự động chuyển sang màu trắng. Bạn có thể thấy điều này trong hình dưới đây.
Bạn cũng có thể tăng kích thước của logo bằng cách thay thế cỡ chữ với chiều cao Và chiều rộng trong khối CSS nhắm mục tiêu biểu trưng. Rốt cuộc, bây giờ bạn đang xử lý một hình ảnh chứ không phải văn bản.
.logo {
color: white;
width: 10rem;
}
Nếu bạn thu nhỏ màn hình xuống, truy vấn phương tiện sẽ không áp dụng nữa. Thao tác này sẽ tắt các chế độ hòa trộn khác nhau, làm cho logo của bạn biến mất. Để đưa logo trở lại trang, bạn cần đặt chế độ hòa trộn tài sản trên logo bên ngoài truy vấn phương tiện:
.logo {
color: white;
width: 10rem;
mix-blend-mode: difference;
}
Điều này sẽ kích hoạt pha trộn hỗn hợp trên logo mọi lúc, ngay cả trên màn hình lớn hơn. Nhưng trên màn hình nhỏ, logo sẽ vẫn ở trên cùng và không theo bạn khi bạn cuộn xuống (vì vị trí: dính chỉ hoạt động trên màn hình lớn). Cuối cùng, luôn nhớ sử dụng logo màu trắng để ngăn nó biến mất khỏi trang.
Tìm hiểu thêm Mẹo và Thủ thuật CSS
Bằng cách sử dụng chế độ hòa trộn, bạn có thể tạo bố cục hấp dẫn với các màu xen kẽ. Tốt hơn nữa, bạn không cần phải mã hóa bất kỳ màu nào hoặc đặt các điểm ngắt vì chế độ hòa trộn sẽ đảo ngược màu một cách linh hoạt. Nó cho phép bạn tạo các pha trộn và màu sắc đẹp mắt cho các phần nội dung của phần tử tùy thuộc vào nền trực tiếp của nó.
CSS thường được coi là một trong những ngôn ngữ thú vị nhất để học. Điều này một phần là do CSS có đầy đủ các mẹo và thủ thuật như mẹo mà bạn vừa học được trong bài viết này. Một số mẹo và thủ thuật CSS hữu ích khác là hiệu ứng di chuột, thay đổi kích thước hình ảnh để vừa với vùng chứa, cắt bớt văn bản bằng hình elip và sử dụng chuyển đổi văn bản.