16 trang web parallax scrolling tuyệt đẹp

Parallax scrolling đã xuất hiện được một thời gian nhưng đó là xu hướng thiết kế web bị từ chối. Parallax scrolling là khi bố cục trang web nhìn thấy nền của trang web di chuyển với tốc độ chậm hơn về phía trước, tạo hiệu ứng 3D khi bạn cuộn. Được sử dụng một cách tiết kiệm, nó có thể cung cấp một yếu tố sâu sắc, tinh tế dẫn đến một trang web đặc biệt và đáng nhớ. 

Để cho thấy nó nên được thực hiện như thế nào, đây là một số trang web sử dụng kỹ thuật này để có hiệu quả tốt. Trong một số trường hợp, Parallax scrolling là ngôi sao của chương trình; trong những trường hợp khác, nó chỉ đơn giản là thêm một chút chiều sâu làm cho tiền cảnh dường như bật ra một chút.

Nếu bạn thực sự muốn đẩy thuyền ra, những ví dụ chuyển đông CSS ấn tượng này cho thấy một cách tuyệt vời khác để làm cho trang web của bạn nổi bật giữa đám đông. Bây giờ, chúng ta hãy xem một số trang web bằng cách sử dụng Parallax scrolling theo đúng cách.

01. Canals

Được thiết kế bởi Marcus Brown và được phát triển bởi Aristide Benoist, Canals đưa bạn vào cuộc hành trình 400 năm xuyên qua lịch sử của kênh đào thế kỷ 17 ở Amsterdam. Trang web được thiết kế để cung cấp trải nghiệm theo kiểu biên tập, như lướt qua một danh mục đồ uống, và nó sử dụng parallax để thu hút sự chú ý của bạn vào các phần mới của câu chuyện và mang lại cho trang web một hiệu ứng có chiều sâu tinh tế.

02. Câu chuyện về Goonies

Bất cứ ai ở một độ tuổi nhất định đều yêu thích bộ phim phiêu lưu của tụi trẻ thập niên 80, The Goonies, và nếu đó là bạn thì trang web này chắc chắn sẽ khiến sự hoài cổ trong bạn rộn ràng. Được tạo bởi Joseph Berry bằng WebFlow, The Story of The Goonies là một sự tôn vinh cho một tác phẩm kinh điển sử dụng Parallax scrolling để đưa bạn vào câu chuyện, giới thiệu cho bạn các nhân vật và tiết lộ về bộ phim.

03. Davide Perozzi

Parallax scrolling chỉ là khởi đầu của những thú vui web được tìm thấy tại ngôi nhà trực tuyến của Davide Perozzi , một nhà phát triển sáng tạo từ Đức. Trang web chủ yếu dựa trên văn bản của anh ta chứa đầy những điều ngạc nhiên như cuộn trơn tru, bản sao rối rắm thay đổi khi nó di chuyển và hình ảnh chiếu vào trong khi bạn di chuyển con trỏ hoạt hình qua từng tiêu đề bài viết. Vẻ ngoài dứt khoát và thể hiện xuất sắc các kỹ năng web của Perozzi.

04. Dogstudio

Điểm thu hút ngay lập tức của trang web Dogstudio là một chú chó hoạt hình 3D tuyệt đẹp – hay đó là một con sói? – ở trung tâm của trang, tỷ lệ và độ xoay khi bạn cuộn theo cách của mình xuống trang parallax. Ánh sáng của nó thay đổi màu sắc khi bạn di chuột qua các tiêu đề của các bài viết gần đây của Dogstudio và có lẽ điểm yêu thích của chúng tôi là khi nó xoay chuyển một số bản sao của trang, che khuất một số văn bản.

05. ToyFight

ToyFight là một agency sáng tạo giành được nhiều giải thưởng và trang web của nó là rất thú vị. Người sáng lập Jonny Lander và Leigh Whipday đã biến mình thành những nhân vật 3D, xuất hiện trong một loạt các cảnh trên khắp trang web (bao gồm cả tài liệu tham khảo Sagmeister & Walsh táo bạo này). Việc sử dụng parallax thông minh sẽ khuếch đại hiệu ứng 3D và kết hợp với phông nền đậm, sáng, đơn giản, không bao giờ trở nên quá tải hoặc khó chịu.

06. Diesel: BAD Guide

Người dùng có thể khám phá bằng cách kéo chuột xung quanh trang parallax, được đặt ra như một bảng hình ảnh để nhấp qua. Có lời khuyên về mọi thứ từ Tinder (‘Vuốt phải, phải, phải, phải – bạn sẽ sắp xếp chúng sau’) đến Instagram (‘Đừng quên liên lạc với người cũ vào Thứ Năm #TBT’), kèm theo minh họa đen trắng.

07. Firewatch

Một trong những ví dụ đẹp nhất về parallax scrolling mà chúng tôi đã thấy là trang web cho trò chơi Firewatch , sử dụng sáu lớp chuyển động để tạo cảm giác về chiều sâu. Thật tuyệt vời vì chúng không scroll hijacking (thứ gì đó thường đi kèm với hiệu ứng parallax) và nó chỉ được sử dụng ở đầu trang – phần còn lại của trang web vẫn để bạn có thể đọc thông tin mà không bị say sóng. Nếu bạn muốn xem nó được thực hiện như thế nào, thì đây là một bản demo tuyệt vời trên CodePen.

08. Garden Studio

Theo cách tương tự, Garden Studio cũng đã chọn sử dụng kỹ thuật parallax theo cách hợp lý và thú vị ở đầu trang web của mình, trước khi chuyển sang một trang chủ yếu là tĩnh. Phong cảnh thay đổi tinh tế và không phô trương nhưng cũng là ngôi sao của chương trình – chúng tôi thấy mình cuộn lên xuống nhiều lần. 

09. GitHub 404

Trang 404 của GitHub không hoàn toàn giống như parallax scrolling vì hiệu ứng xảy ra trên chuột lắc thay vì cuộn, nhưng đó là một trang thực sự thú vị sử dụng phân lớp để thêm chiều sâu. Không giống như parallax ‘đúng nghĩa’, nền di chuyển nhanh hơn so với tiền cảnh, tạo ra cảm giác mất phương hướng, cảm giác khác.

10. Jess & Russ

Không có gì ngạc nhiên khi cặp đôi quyền lực thiết kế của Russ Maschmeyer và trang web đám cưới của Jessica Hische là một vẻ đẹp đáng chú ý. Các trang web phác hoạ lại câu chuyện lãng mạn của họ, với parallax scrolling được sử dụng trong suốt để thêm chiều sâu cho các minh họa. Họ kết hôn vào năm 2012, nhưng trang web vẫn rất đáng xem.

11. Make Your Money Matter

Tài chính và tiền bạc hầu như không phải là môn học thú vị nhất. Nhưng cơ quan kỹ thuật số Firstborn có trụ sở tại New York đang tham gia vào trang web parallax scrolling năng động này Make Your Money Matter for the Public Service Credit Union.

Với mục đích dạy cho công chúng những lợi ích của việc tham gia một tổ chức tín dụng, thay vì sử dụng ngân hàng, trang web tuyệt vời này bao gồm mọi thứ từ cách thức hoạt động của một tổ chức tín dụng, đến nơi để tìm một cách áp dụng, cũng như một máy tính chỉ hiển thị bao nhiêu ngân hàng thu lợi từ tiền gửi của khách hàng.

12. Madwell

Cơ quan thiết kế và phát triển Madwell , có trụ sở tại New York, thể hiện danh mục đầu tư của mình với một loạt các hiệu ứng parallax scrolling để tạo ra một phong cách 3D đáng chú ý có thêm độ sâu lớn.

13. Cultural Solutions

Tư vấn nghệ thuật Cultural Solutions sử dụng hiệu ứng parallax scrolling tinh tế để giới thiệu chiều sâu cho trang chủ của nó. Hình ảnh thương hiệu chính của nó là việc sử dụng các vòng tròn đầy màu sắc – các vòng tròn trong nền di chuyển chậm hơn so với các hình nền trước, tạo ra hiệu ứng 3D tinh tế.

14. Walking Dead

Chúng tôi là những người hâm mộ cuồng nhiệt của bộ phim truyền hình zombie The Walking Dead tại Creative Bloq và chúng tôi đã nắm bắt được trang web này được tung ra để quảng bá nó. Trang web giàu trí tưởng tượng quay trở lại nguồn gốc của truyện tranh và sử dụng khéo léo parallax scrolling để kéo bạn vào thế giới bệnh hoạn và đồi trụy của nó.

“Chúng tôi đến đây với tư cách là người hâm mộ của chương trình, trước hết và quan trọng nhất,” nhà thiết kế chính, ông Gavin Beck nói. “Với ổ đĩa này, chúng tôi muốn tạo ra một thế giới trong Walking Dead mà người hâm mộ có thể khám phá và đánh giá cao.

“Để đạt được điều này, chúng tôi đã tìm đến một số công nghệ và kỹ thuật hiện có như HTML5, CSS3, JavaScript / jQuery, Web Audio / HTML5 Audio và parallax scrolling. Thử thách là tìm ra cách tiếp cận độc đáo để kết hợp tất cả các phương thức này vào một cách tương tác trải nghiệm trên tất cả các nền tảng. “

15. Thời báo New York: Cà chua có thể màu xanh

Ngày nay trong thời đại khó nhận được sự chú ý và phương tiện truyền thông mồi nhử, làm thế nào để bạn thu hút mọi người đến với báo chí lâu dài? Tomato Can Blues là một câu trả lời tuyệt vời cho vấn đề đó từ New York Times, kết hợp một số kỹ thuật thiết kế web thông minh với các câu chuyện minh họa lấy cảm hứng từ truyện tranh và truyện tranh được tạo bởi Atilla Futaki.

Một trong những ví dụ hay nhất về parallax scrolling mà chúng ta đã thấy, bài viết sẽ đưa bạn qua câu chuyện về một chiếc máy bay chiến đấu lồng được viết bởi Mary Pilon. Khi bạn cuộn qua nội dung, các hình minh họa trở nên sống động với các hình ảnh động và thay đổi thông minh, cho phép bạn đắm mình hoàn toàn vào nội dung.

Hình minh họa của Futaki dựa trên hồ sơ cảnh sát, tài khoản nhân chứng, hình ảnh và ghi chú của phóng viên, và sự chú ý đến chi tiết tỏa sáng. Nói chung, đó là một trải nghiệm đọc tuyệt vời – đây có phải là tương lai của báo chí trực tuyến không?

16. Snow Fall

Một trong những trang web đầu tiên thực sự vượt qua ranh giới về những gì bạn có thể làm với nội dung biên tập dài trực tuyến, bài viết Snow Fall của New York Times kết hợp một loạt các yếu tố khác nhau, bao gồm parallax scrolling và video trên web.

Bài báo, về sự kinh hoàng của trận tuyết lở tại Đường hầm, được xuất bản trực tuyến vào tháng 12 năm 2012 nhưng vẫn mạnh mẽ như một ví dụ về những gì bạn có thể làm với parallax scrolling. Tờ báo đã trình bày bài báo giành giải Pulitzer theo cách sáng tạo thu hút sự chú ý của cộng đồng thiết kế trên toàn thế giới.