Website với hiệu ứng scrolling độc đáo chưa từng thấy

Thiết kế website giới thiệu sản phẩm này được dùng cho chiến dịch quảng bá sản phẩm ra nước ngoài của hãng xe.
Website Sierra sở hữu hiệu ứng cuộn trang vô cùng độc đáo. Cùng khám phá cách họ đã làm cho thiết kế website ấn tượng hơn nhờ hiệu ứng cuộn trang.

Ngày càng nhiều thiết kế website chuyên nghiệp sử dụng kỹ thuật cuộn trang, đặc biệt nhất là parallax scrolling. Nhờ kỹ thuật này, người ta có thể giới thiệu nội dung hoặc kể một câu chuyện theo cách lôi cuốn hơn. Nhưng có nhiều hơn một cách để sử dụng hiệu ứng cuộn trang xuống trên một website đơn trang.

Hãy cùng xem GMC Sierra (thiết kế bởi DigitasLBi US và MediaMonks) đã tạo ra hiệu ứng cuộn trang tận dụng chiều không gian như thế nào.

Thiết kế website giới thiệu sản phẩm này được dùng cho chiến dịch quảng bá sản phẩm ra nước ngoài của hãng xe. Website sử dụng công nghệ HTML5 cùng với những âm thanh sống động, hình ảnh chân thực như lấy ra từ những bộ phim bom tấn của Hollywood và đặc biệt nhất là hiệu ứng cuộn trang sáng tạo.

hieu ung parallax trong thiet ke web 1

Bằng cách cuộn trang, người xem có thể nhìn, nghe và cảm nhận những tính năng cao cấp của dòng xe mà website quảng bá. Website sử dụng tương tác nội dung độc lập, animation full-frame HD . Thực tế trông website này giống như một game hơn là bạn đang cuộn trang web.

Chiều không gian mới

Các trang web dùng hiệu ứng cuộn tran ngày nay thường mỏng, 2 chiều và nhẹ. Nhưng nhóm thiết kế lại muốn một website ấn tượng và hoành tráng hơn để khắc họa tính chất của sản phẩm.

hieu ung parallax trong thiet ke web sierra2

Kỹ thuật cuộn trang lấy cảm hứng từ những bước di chuyển của xe
Hơn nữa cách kể truyện phải truyền được cảm hứng về chiếc xe và hành trình của nó theo một cách không giống với ai. Đó là lý do nhóm thiết kế quan tâm đến navigation và tìm kiếm chiều không gian mới để thể hiện ý tưởng. Mỗi bước di chuyển có mục đích của người xem đều mang lại trải nghiệm ấn tượng.

Thử thách kỹ thuật

Xây dựng website đặt ra nhiều thách thức về kỹ thuật. Video 3D kết hợp với cuộn trang đã là một phương án khó. Đây là cách làm chưa từng có trước đây cho nên đòi hỏi bạn phải nỗ lực rất nhiều.

hieu ung parallax trong thiet ke web sierra4

Xây dựng một website nghĩa là mạo hiểm với những điều chưa được khám phá

Đội thiết kế cũng sử dụng 3D-render cho website để khắc họa hình ảnh môi trường xung quanh, mang lại cảm giác chân thực và tự nhiên khi cuộn trang.

Các trình tự được quay phim lại

Mới nhìn vào website, người ta nghĩ đây là các thước phim được quay lại, nhưng thực tế tất cả là dựng bởi CG.

Tuy nhiên để tăng thêm tính thực tế, có một số bức hình thực đã được ghép vào render, chẳng hạn như những hình ảnh dưới nước. Máy quay được nhúng vào bể nước lớn, xung quanh có các bong bóng nổi lên. Ngoài ra tất cả đều là CG 100% bao gồm phương tiện, môi trường xung quanh và animation.

hieu ung parallax trong thiet ke web sierra5

Hầu hết hình được tạo ra trong CG

Đội thiết kế cũng tạo ra một phiên bản website này cho di động. Mặc dù việc hiển thị 3D trên di động không thể đạt chất lượng bằng trên máy tính truyền thống, xong kỹ thuật mô phỏng tương tự đã được sử dụng để người dùng di động cảm nhận được giống với xem trên máy tính.

Tác giả bài viết: Phùng Thanh Hằng

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây