Advertisement
  1. Code
  2. Front-End
Code

Một Kỹ Thuật Cuộn Parallax Đơn Giản

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Cuộn Parallax là một kỹ thuật thú vị, khi bạn cuộn, hình ảnh nền phía sau di chuyển chậm hơn so với nội dung phía trước, tạo ảo giác của chiều sâu 3D. Khi tôi hoạch dự thiết kế lại trang cá nhân của mình, mục tiêu đầu tiên là viết mã nguồn ngắn gọn và đơn giản để đạt được kết quả tối ưu tuyệt vời! Tôi sẽ chỉ cho bạn tôi đã làm thế nào.

Nếu bạn đang tìm một cách nhanh để bắt đầu với template cơ bản cho giao diện của bạn, tìm kiếm một giao diện Parallax có lẽ là một chọn lựa tốt. Hoặc duyệt các mẫu One Page của chúng tôi. Bạn có thể tìm các nhà cung cấp dich vụ trên Envato Studio, họ sẽ tạo các trang cuộn parallax cho bạn.

Trong bài hướng dẫn, tôi sẽ chỉ bạn kỹ thuật cuộn parallax đơn giản nhất bạn từng biết, vậy hãy dấn thân nào!


Bước 1: Markup

Kỹ thuật này giải quyết việc điều khiển tốc độ của ảnh nền. Vậy hãy bắt đầu với HTML markup, tạo hai sections cùng với các thuộc tính cần có: "data-type""data-speed". Đừng lo lắng; tôi sẽ giải thích sau.

Tôi đang dùng thẻ <section> với thuộc tính data-typedata-speed, được giới thiệu trong HTML5. Điều này làm HTML markup rõ ràng hơn và dễ đọc hơn.

Theo các mô tả đặc trưng cho Custom Data Attributes, bất kỳ thuộc tính bắt đầu với data- sẽ được xử lý như là phần lưu trữ cho dữ liệu riêng. Thêm vào đó, điều này sẽ không ảnh hưởng đến bố cục.

Khi tất cả chúng ta cần làm là điều khiển tốc độ của ảnh nền. chúng ta sẽ dùng data-type="background"data-speed="10" như thuộc tính trọng yếu để xác định rõ các tham số cần thiết. 

Tôi biết bạn đang nghĩ gì, bạn đang lo lắng về IE. Đừng sợ hãi, tôi có cách khắc phục rồi! Chúng ta sẽ thảo luận chuyện đó trong chốc lát.

Tiếp theo, hãy thêm vào nôi dung thẻ <article> bên trong mỗi <section>

Điều chúng ta cố gắng để làm ở đây là tạo hình nền <section> cuộn chậm hơn nội dung của nó, i.e <article> Điều này sẽ giúp chúng tôi tạo ra ảo giác parallax. Trước khi chuyển đến phần jQuery ảo diệu, hãy bổ sung hình ảnh nền cho CSS cho mỗi <section> 

Trong lúc thêm phần nền cho cả hai sections, kết quả nên là thế này:

image
image

Hãy bổ sung thêm mã CSS tạo phong cách và thêm vẻ đẹp cho trang!

Bây giờ nó nên trông giống thế này...

image

Bước 2: Mã Lệnh Kì Diệu

Vâng, được rồi; đây là nơi điều kỳ diệu bắt đầu! Sử dụng jQuery, chúng tôi sẽ bắt đầu với phương thức chuẩn document.ready() để chắc rằng trang đã được tải và sẵn sàng để xử lý.

Kỹ thuật này giải quyết việc điều khiển tốc độ của hình ảnh nền hiện hữu trong cả hai section.

Bây giờ tôi muốn bạn chú tâm. Điều đầu tiên xảy ra bên dưới là chúng ta đang chạy vòng lặp cho mỗi <section> trong trang, với thuộc tính data-type="background".

Thêm một hàm khác, .scroll(), bên trong .each(), hàm này sẽ được kích hoạt khi người dùng bắt đầu thao tác cuộn.

Chúng ta cần xác định ngừoi dùng sẽ cuộn lên bao nhiêu, sau đó chia giá trị cho giá trị của data-speed, đã được đề cập trong phần markup.

$window.scrollTop(): chúng ta đang lấy giá trị cuộn hiện thời từ trên đầu trang. Điều này cơ bản xác định giá trị người dùng đã cuộn lên là bao nhiêu. $bgobj.data('speed') đề cập đến data-speed được gán trong markup, và yPos là giá trị sau cùng mà chúng ta cần để áp dụng thao tác cuộn. Tuy nhiên, nó sẽ là một giá trị âm, bởi vì chúng ta phải di chuyển hình ảnh nền theo hướng ngược hướng cuộn của người dùng.

Hãy điều tra rõ hơn với một ví dụ:

image

Trong hình bên trên, data-speed là 10, và giả định rằng trình duyệt đã được cuộn 57px. Điều này có nghĩa là 57px chia cho 10 = 5.7px

Điều sau cùng chúng ta cần làm là đưa vị trí cuối cùng của hình nền vào một biến. Để giữ cho vị trí chiều ngang của hình nền không đổi, chúng ta gán cho xPosition giá trị 50%. Sau đó, chúng ta thêm yPosyPosition, và, sau cùng, gán toạ độ của hình nền của <section>$bgobj.css({ backgroundPosition: coords });

Mã lệnh sau cùng có lẽ trông thế này:

Yay, chúng đã hoàn thành rồi. Bạn hãy tự thử xem.


Sửa Lỗi Cho IE

Có một phần sửa lỗi sau cùng: các IE cũ không thể thể hiện thẻ <section> and <article>. Dễ sửa thôi, dù vậy, chúng ta sẽ dùng giải pháp tiêu chuẩn để tạo ra các đối tượng, làm cho trình duyệt có thể nhận tốt các thẻ HTML5 một cách kỳ diệu.

Thêm vào đó, chúng ta cần sử dụng một tập tin cơ bản CSS reset để tất cả trình duyệt hoạt động tốt. Thật may mắn, giống như HTML5 Boilerplate đã xử lý phần việc này cho chúng ta, khi nó chuẩn hoá các trình duyệt.

Đó là tất cả cho bài học này! Có bất kỳ câu hỏi hoặc ghi chú nào bạn muốn bổ sung không? Hãy cho tôi biết bên dưới!

Và nếu bạn tìm kiếm một giải pháp nhanh chóng với kết quả chuyên nghiệp, hãy duyệt các chọn lựa: Parallax ThemeOne Page Template của chúng tôi, có thể mua chúng ở ThemeForest.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.