Chắc hẳn rất nhiều người trong chúng ta đã làm việc nhiều với hiệu ứng parallax. Và thường là làm việc với thư viện parallax.js. Nhưng trong còn hiệu ứng parallax trong ReactJS thì sao =)). Hãy cùng tìm hiểu và làm một demo nào!
Chắc các bạn đã biết cơ chế để ReactJS update DOM trên. Nên việc tạo hiệu ứng trong ReactJS mặc dù không khó nhưng chúng ta sẽ phải tốn kha khá thời gian cho việc research nó. Thay vì tự làm một component dùng để tạo hiệu ứng thì chúng ta thường hướng đến việc tìm một thư viện thay thế, cung cấp cho chúng ta một danh sách các hiệu ứng và chỉ cần chỉnh sửa chút thôi.
Thì trong bài viết này mình sẽ giới thiệu tới các bạn một thư viện dùng để tạo hiệu ứng parallax trong ReactJS khi chúng ta thực hiện scroll đó chính là react-scroll-parallax.
react-scroll-parallax là một thư viện dùng để tạo hiệu ứng parallax cho banner, image, hoặc những thẻ DOM khác. Nó hoạt động bằng cách sử dụng một scroll listener để thêm, thay đổi offset của những đối tượng(muốn tạo hiệu ứng) dựa vào vị trí của chúng.
Thư viện này cung cấp cho chúng ta 3 component chính như dưới:
- <Parallax> đây là component chính dùng để thay đổi vị trí của đối tượng DOM dựa vào vị trí của chúng.
- <ParallaxBanner> đây là trường hợp khác của Parallax>, nó dùng để tạo hiệu ứng parallax cho các banner.
- <ParallaxProvider> đây là provider dùng để wrap ngoài <Parallax> và <ParallaxBanner> để tạo context và kiếm xoát việc thay đổi.
Trong phần tiếp theo chúng ta hãy thử tạo 1 hiệu ứng parallax lên một banner bắng cách sử dụng component <ParallaxBanner> nhé
