10 Tutorial tuyệt nhất cho Parallax website (P.2)

The Ultimate Guide to Parallax Scrolling: Best Practices, Examples and Tutorials

Bởi Vandelay Design

Thay vì mang tới cho người đọc file nén để tải về, bài đăng của Jake Rocheleau mang tới những ứng dụng trong việc tạo hiệu ứng thiết kế. Anh chỉ ra rằng bằng những ví dụ đúng và sai của parallax website thì người đọc mới có thể nhận viết tầm quan trọng của thiết kế parallax.

Sau đó chuyên gia thiết kế này đưa ta tới ví dụ cụ thể của parallax scrolling (background parallax dạng trượt, chiều dọc, chiều ngang...) để mọi người hiểu hơn về hiệu ứng này. Bài đăng kết thúc bằng việc đưa những nguồn và plugin để giúp các chuyên gia thiết kế tạo ra parallax scrolling website. Đây là một bài viết mà những chuyên gia thiết kế web với trình độ mới và trung bình cần đọc. 

How To Cre-ate A Parallax Scrolling Website

Bài được viết bởi Petr Tichy. Trong tutorial là những chi tiết cụ thể hơn của bài viết về parallax scrolling website sử dụng Skroller.js plugin.

Bài viết đưa ra các lệnh dành cho cá chi tiết nhạt dần, thêm animation cho màu nền, chuyển động ảh nền theo chiều ngang và hơn thế...Kết của có thể thấy ở phần demo của trang. 

Nếu bạn thấy các lệnh của tutorial khó dùng với thiet ke web của mình thì  Tichy cũng tạo ra những hướng dẫn khác để phù hợp hơn với bạn. Xem hướng dẫn khác tại đây.

Pure CSS Parallax Websites by Keith Clark

Parallax phụ thuộc vào JavaScript. Điều này mang tới một vấn đề: lệnh JavaScripts kích hoạt parallax scrolling có thể gặp rắc rối trên một số thiết bị.

Đặt ra vấn đề này với phần còn lại, bài viết cũng chỉ ra cách làm thế nào các chuyên gia thiết kế web có thể tạo ra tốc độ khung hình tối ưu hơn và di chuyển mượt mà bằng cách sử dụng CSS. Phần hướng dẫn cũng chỉ ra kiểm soát tốc độ lớp và chỉnh độ sâu sử dụng ngôn ngữ này. 

Một số trình duyệt (Firefox, IE) và thiết bị di động vẫn còn gặp vấn đề trong việc thể hiện parallax website CSS trên màn hình. Nhưng tutorial chỉ ra tiềm năng của CSS trong việc tạo ra nội dung linh hoạt hơn cho thiết kế web của bạn.  Đây là điều cần ghi nhớ. 

Creating a Parallax Website

Bởi Montague Monroe

Tại sao cần phải đọc môt bài hướng dẫn trong khi bạn có thể xem video về cả quá trình tạo parallax website?

Trong video dài 48 phút này bạn sẽ biết cách tạo thiết kế parallax từ bước đầu tiên trên MacBook. Các công cụ được sử dụng trong tutorial này bao gồm Stellar.js, Waypoints.js, Twitter Bootstrap, và jQuery Easing. Bạn có thể tải phần code của nó tại đây

Parallax Scroll Effect Tutorial JavaScript Animation Programming

Bởi Adam Khoury

Video 9 phút này có thể là quá đơn giản cho các nhà thiết kế dày dạn, nhưng nó lại cung cấp cái nhìn tổng quan tốt nhất về hiệu ứng cuộn trang parallax cho người không phải nhà thiết kế. Những lời giải thích và ví dụ được sử dụng để nhấn mạnh một cách rất rõ ràng và dễ hiểu. Bạn có thể sao chép các mã hiển thị trong video tại đây.