Parallax – Hiệu ứng Parallax là gì? – Freetuts

Chào những bạn, tất cả chúng ta lại gặp nhau. Hôm nay, freetuts sẽ hướng dẫn những bạn tạo một landing page hoàn hảo cùng với hiệu ứng parallax. Để tiện cho việc theo dõi chuỗi bài viết này, tất cả chúng ta sẽ khám phá sơ lược cũng như bố cục tổng quan cơ bản website mà tất cả chúng ta triển khai xong sau khi kết thúc series này nhé .

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Parallax là gì?

Parallax là hiệu ứng mà hình nền của website sẽ vận động và di chuyển với những vận tốc khác nhau so với những đối tượng người tiêu dùng khác khi lăn chuột cuộn xuống hoặc lên. Thậm chí, một số ít website còn làm hiện ứng theo cách cuộn ngang .

Lịch sử hình thành hiệu ứng này xuất phát điểm từ giao diện game nhưng trong những năm gần đây nó đã lan rộng và trở thành một xu thế mới trong phong cách thiết kế website văn minh. Xem ví dụ bên dưới

Từ parallax xuất phát thuật ngữ trong thiên văn học, miêu tả sử biểu lộ hướng chuyển dời khác nhau khi nhìn chúng với những góc nhìn khác nhau. Trong quốc tế kỹ thuật, một lập trình viên hoàn toàn có thể tạo ra hiệu ứng này bằng nhiều cách khác nhau .

Để mở màn cho một website có hiệu ứng parallax, thì tất cả chúng ta phải lên sáng tạo độc đáo từ bố cục tổng quan cho đến những đổi tượng hoạt động như hình ảnh hoặc đoạn văn bản. Việc định hình nói trên sẽ tạo cho người xem cảm xúc khác lạ như rơi vào một khoảng trống đa chiều trong khoảng trống .

2. Ý tưởng chia bố cục cho trang Parallax

Hiện nay, có vô vàng ý tưởng để tạo nên một trang web với hiệu ứng parallax, các bạn có thể dùng từ khóa parallax để tìm kiếm. Nhìn chung, thì đa phần các trang web đó đều có những bố cục chung như sau:

Chuỗi ảnh nền: Ảnh nền chắc chắn sẽ là một đối tượng không thể thiếu trong web với hiệu ứng parallax. Lưu ý bạn có thể sử dụng một ảnh nền với kích thước dài hoặc nhiều ảnh nền để thể hiện những nội dung khác nhau.

div.forest { background-image: url("forest.jpg");
}
div.eagle { background-image: url("eagle.jpg");
}
div.rhino { background-image: url("rhino.jpg");
}
div.owl { background-image: url("owl.jpg");
}
div.lion { background-image: url("lion.jpg");
}
div.bear { background-image: url("bear.jpg");
}
div.back { background-image: url("back.jpg"); justify-content: center;
}

Thanh menu dọc hoặc ngang: với những trang web này thì gần như thành menu trở nên không cần thiết nữa nhưng với việc thêm vào thanh menu và những hiệu ứng chuyển động của nó làm web trở nên bắt mắt.

Chuỗi nhạc nền: âm thanh là một phần không thể thiếu, bởi vì parallax xuất phát từ game nên việc bổ trợ âm thanh sẽ rất cần thiết. Thường lệ trong trang web chúng ta dùng những âm thanh nhẹ, thanh hoặc dịu dàng để tạo cảm giác thoải mái cho người dùng, cũng như kết hợp với với hiệu ứng cuộn.

Các đối tượng cuyển động: ảnh động hoặc ảnh vector sẽ được dùng nhiều với những ưu điểm riêng vì có thể thao tác thay đổi màu sắc cũng như những chuyển động phức tạp mà ảnh thường không làm được.

Trang mở đầu và kết thúc: Tùy từng nội dung mà sẽ khai thác trang mở đầu và kết thúc. Trong loạt bài viết này, freetuts cũng sẽ hướng dẫn các bạn thực hiện các trang đó.

Trong loạt bài viết này, freetuts sẽ lần lượt hướng dẫn những bạn từng bước đơn cử trong list trên để tạo ra một trang parallax hoàn hảo .

3. Lời kết

Như vậy là đã xong phần tìm hiểu và cách thức bố cục của trang web với hiệu ứng parallax, cũng qua đây các bạn đã hiểu hiệu ứng parallax là gì rồi phải không nào. Các bạn hãy xem tiếp bài học tiếp theo nhé.

Danh sách file tải về