Thanh Nhàn Blog » Tạo hiệu ứng Parallax Scrolling với Skrollr

Tạo hiệu ứng Parallax Scrolling với Skrollr

Parallax Scrolling là gì?

Kỹ thuật Parallax Scrolling là kĩ thuật sử dụng nhiều hình ảnh nền rồi cho chúng cùng lúc di chuyển với những tốc độ khác nhau, tạo ra ảo giác thị sai về chiều sâu khi nhìn vào được Ian Coyle tạo ra và áp dụng lần đầu cho website Nike Better World 2011 và đến nay nó đã được sử dụng trên nhiều website. Đây là một ví dụ: http://moto.oakley.com/

Parallax scrolling được dùng để tạo hiệu ứng 3 chiều với các element liên tục thay đổi vị trí khi người dùng có thao tác cuộn trang. Ở bài viết [Web Design] Kỹ thuật Parallax Scrolling của Thạch Phạm đã giới thiệu và trình bày cách đơn giản để hiểu về Parallax Scrolling và cách làm. Và sau đây tôi xin giới thiệu Skrollr một Plugin cho phép chúng ta có thể tạo hiệu ứng Parallax nhanh chóng.

Tạo hiệu ứng Parallax Scrolling cho trang web sử dụng Skrollr Plugin

 

Ở đây tôi sẽ tạo một trang web tĩnh đơn giản với HTML, CSS và Javascript, tôi trích một phần nhỏ trong trang demo của Skrollr để làm ví dụ.

Nội dung HTML như sau:

Trên HTML chúng ta có 3 thẻ div#bg1, #bg2, #bg3, 3 div này sẽ làm background với hiệu ứng parallax.

Ngoài ra thẻ div#transform là một ví dụ thêm về hiệu ứng transform, bạn có thể tùy biến thêm nhiều ứng khác, tương tự như trang demo chính của Skroll.

Tiếp theo chúng ta thêm CSS cho trang HTML:

 

Như trên, chúng ta sẽ định dạng CSS cho 3 ID: #bg1, #bg2, #bg3 với 3 hình nền khác nhau, và z-index khác nhau, để chúng tạo thành 3 lớp nền cho trang web.

Thuộc tính top,left: 0, width,height: 100% để đảm bảo các lớp nền bung toàn trang.

Kế đến là chúng ta sẽ chèn Javascrip vào, để sử dụng được plugin, các bạn cần nhúng plugin vào trang trước. Bạn tải thư viện của skrollr tại đây, sau đó lưu vào thư mục js/libs và nhúng vào file HTML với mã tương tự như sau:

Sau khi nhúng hoàn tất, bạn tiến hành init cho đối tượng Skrollr bằng cách thêm vào cuối trang HTML, trước thẻ  </body>:

Bây giờ chúng ta đã init xong đối tượng Skrollr, việc cuối cùng, chúng ta sẽ sửa lại HTML để Skrollr hoạt động. Quay lại file HTML, các bạn sửa lại như sau:

Tại div#bg1, sửa thành:

Tại div#bg2,

Tại div#bg3:

Và cuối cùng là phần transform

Trong đó:

– data-0: là thiết lập khi bạn đang ở đỉnh đầu của trang, đồng nghĩa với scroll-top bằng 0, khai báo bên trong nó là sự thay đổi của CSS, điển hình như #bg1 chúng ta sẽ thiết lập ban đầu khi ở scroll-top bằng 0 là background-position từ 0px 0px;

– data-end: là định dạng CSS ở vị trí khi chúng ta đang ở cuối trang, khi đó ta sẽ chuyển background-position sang -500px 10000px;

– các thuộc tính data-x với x là vị trí scroll-top tương ứng.

Để hiểu rõ hơn các thuộc tính và các thiết lập của plugin, mời các bạn tham khảo thêm ở Skrollr Github

Tạm kết

Như vậy, chúng ta đã có thể áp dụng Skrollr để làm hiệu ứng Parallax Scrolling cho website vô cùng đơn giản và nhanh chóng, hi vọng với hướng dẫn này, bạn có thể áp dụng cho website của mình với nhiều hiệu ứng hay hơn nữa.

Code demo của bài hướng dẫn

Tạo hiệu ứng Parallax Scrolling với Skrollr
5 (100%) 1 vote

Tôi tên Thanh Nhàn, Blog này là nơi tôi ghi lại cũng như chia sẽ các kiến thức mình học được, Vì vậy nội dung được viết ra đa phần là theo hiểu biết cá nhân, hi vọng nhận được sự góp ý của các bạn, để hoàn thiện hơn.