Thỉnh thoảng, khi chúng ta ghé vào các trang web bán hàng, khi vào trang chi tiết sản phẩm, các bạn thường bắt gặp nhiều trang cho chúng ta xem rõ từng chi tiết hình ảnh sản phẩm thông qua một kính lúp. Hiệu ứng này rất hữu dụng khi mà khách hàng cần phải xem rõ sản phẩm mà họ muốn mua, và cũng chính vì thế mà khi khách hàng muốn thiết kế một trang web bán hàng, họ thường yêu cầu đưa chức năng này vào trong trang web của họ.
Xem Demo | Download
Trong bài viết ngày hôm nay, mình xin chia sẻ cho các bạn cách tạo hiệu ứng kính lúp đơn giản cho hình ảnh bằng CSS3 và jQuery. Qua bài viết này, các bạn sẽ có thể áp dụng nó vào cho những trang web bán hàng của các bạn.
HTML
Để minh họa, chúng ta cần có khung chuẩn html như sau :
CSS
Ở phần này, chúng ta sẽ sử dụng thuộc tính CSS3 box-shadow vàborder-radius để tạo kính lúp.
/*Some CSS*/ * margin: 0; padding: 0; .magnify width: 200px; margin: 50px auto; position: relative; /*Lets create the magnifying glass*/ .large width: 175px; height: 175px; position: absolute; border-radius: 100%; /*Multiple box shadows to achieve the glass effect*/ box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); /*Lets load up the large image first*/ background: url('iphone.jpg') no-repeat; /*hide the glass by default*/ display: none; /*To solve overlap bug at the edges during magnification*/ .small display: block; jQuery
Và sau đây là toàn bộ đoạn code sẽ giúp các bạn tạo hiệu ứng kính lúp cho ảnh. Mỗi một đoạn code có ghi chú thích rõ ràng cho các bạn tham khảo.
Mình mong là các bạn sẽ thấy thích và hứng thú với hiệu ứng mà mình giới thiệu cho các bạn trong bài viết này.
0 nhận xét:
Đăng nhận xét