Nhưng CSS Scroll Snapping đã thay đổi tư duy đó, tức nghĩa là chỉ cần vài dòng code CSS, bạn vẫn có thể tạo được hiệu ứng như trên.
Bạn có thể hình dung đại khái trông như này:
Disable scroll mặc định của html, thay vào đó là tạo vùng scroll cho thẻ div wrapper
Đặt vào thẻ div wrapper đoạn code này scroll-snap-type: y mandatory
Đặt vào thẻ children (là con trực tiếp của thẻ parent) đoạn code này scroll-snap-align: start
Xong rồi đấy!
Hãy thưởng thức demo dưới đây
Lưu ý rất quan trọng: Scrolling bằng touchpad sẽ thấy rõ sự smooth của hiệu ứng hơn!
Hãy hiểu 1 điều rằng, CSS cũng có giới hạn về sức mạnh, không thể nào cover 100% chức năng của người dùng như là JS được!
Việc của dev là phải xem xét thật kỹ, trong dự án cụ thể của mình, có thể apply nó được hay không?
Với tính năng này của CSS, bạn có thể thêm chút JS (1 ít dòng code JS là nhẹ hơn rất nhiều so với 1 plugin) mà vẫn có thể implement được tương đối chức năng bằng JS trước đây như Slider, Carousel.
3. Style layout kiểu tạp chí với shape-outside [Not Cross-Browsers]
Tạp chí hay những tờ báo giấy thường rất hay có những style layout lạ mắt và nó thật sự đẹp. Nhưng đấy là thứ style mà đội designer họ thiết kế ra.
Vậy thì trên web, bằng cái thứ CSS với ngày càng nhiều sức mạnh được trang bị kia, liệu có làm được không?
Xin thưa với mọi người là hoàn toàn được nhé!
Hãy xem demo bên dưới
Ví dụ trên là 1 cách dùng shape-outside đơn giản nhất, là value được cung cấp sẵn circle().
Ngoài ra nó còn cung cấp các value có khác như:
ellipse()
inset()
polygon()
url()
Với những hình dạng không phải là hình tròn, thì bạn vẫn có thể hoàn toàn customize được hình dạng theo ý muốn bằng các điểm (points) được sét trong shape-outside: polygon( your values) nhé!
