Tạo hiệu ứng zoom hình ảnh khi scroll trang web

0
106

Header trang web với hình ảnh lớn là một trong những xu hướng web design thường xuyên được sử dụng và có tính thẩm mỹ cao trong năm 2016, và khả năng vẫn mạnh mẽ trong vài năm tới. Thuật ngữ “hero” thường được thay đổi với “jumbo” liên quan đến full-width một hình ảnh hoặc slide của 1 bài viết ta thường thấy.

Đọc thêm: Tạo hiệu ứng tuyết rơi mùa giáng sinh với CSS và CSS3

Hôm nay tôi sẽ chia sẻ cho bạn cách làm một hiệu ứng thu phóng hình ảnh khi scroll chuột, chủ yếu sử dụng CSS và thêm một chút Javascript , hiệu ứng sẽ rất hấp dẫn và có responsive luôn 🙂

HTML

Đầu tiên, bạn sẽ tạo 1 file html với nội dung bên dưới, thẻ thẻ img sẽ được bao hàm bởi thẻ header với class zoom. điều này nhằm mục đích chúng ta sẽ tập trung viết CSS và JS vào phần này. Bạn có thể thêm nội dung bất kì vào bên dưới cho thêm hiệu ứng rõ ràng.

Trong WordPress, bạn có thể sửa thành như này cho bài post:

CSS

Để chỉnh độ cao của khu vực chứa ảnh, chúng ta sẽ sử dụng 1 style padding-bottom khoảng 55% là đủ để hiển thị đẹp với màn hình có tỉ lệ 4:3 hoặc 16:9

Tiếp theo là CSS cho hình ảnh, tôi sử dụng position: fixed để giữ cho hình ảnh nằm cứng bên trong header khi kéo chuột và transform: translateX(-50%) để thấy được hiệu ứng zoom này.

Javascript

Phần quan trọng nhất là đây, đoạn này chỉ rõ khi scroll screen, hình ảnh sẽ bị tác động css rằng width tăng dần lên và top (vì có position) sẽ giảm dần.

Đây là toàn bộ code và demo:

See the Pen zoom image scroll horizonal by huy kon (@huykon225) on CodePen.26877

ĐỂ LẠI BÌNH LUẬN