Một số ví dụ tiêu biểu về CSS3 animation tốt nhất.
Các thuộc tính của CSS3 đã mở ra vô số cánh cửa mới cho web designer và developer, tạo cơ hội làm ra các animation và tương tác hoàn toàn trong CSS markup, mà chẳng cần dùng Flash, Silverlight hay After Effects nữa. Chúng tôi đã tập hợp một số ví dụ CSS3 animation tốt nhất – bao gồm các hiệu ứng và trang độc lập.
01. One Shared House
Phim tài liệu web của Anton & Irene sử dụng CSS Transformations
One Shared House là một phim tài liệu web tổng hợp lại kinh nghiệm trưởng thành của UX designer-Irene Pereyra trong cộng đồng nữ giới Amsterdam những năm 1970. Từ giây phút bạn đặt chân đến, bạn sẽ không cô đơn: mọi hoạt động con trỏ chuột đều được theo sát.
Thay vì phụ thuộc vào kĩ thuật cuộn nhàm chán, Pereyra và cộng sự Anton Repponen đã truyền cảm hứng từ trò chơi đầu thập kỷ 90, “Where in the Worls is Carmen Sandiego?” và tận dụng phần đáy màn hình để khéo léo phơi bày ra nội dung tìm kiếm, cho phép bạn xác định mức độ ảnh hưởng của riêng mình đến câu chuyện.
Những tương tác kết hợp với kể chuyện để truyền tải trải nghiệm đầy mê hoặc, mới lạ. Điều quan trọng hơn cả là sự táo bạo của Pereyra và Repponen khi kiên nhẫn suốt 2 năm tự gây quỹ và khởi đầu tác phẩm. “Nó cho phép chúng tôi trải nghiệm các quy tắc và kỹ thuật mà thực tế sẽ không có cơ hội gặp được trong các dự án với khách hàng,” Pereyra chia sẻ.
02. Type Terms
Một animate cheatsheet cho kiểu chữ
Type Terms là một cheatsheet animate tạo ra bởi Supremo, công ty thiết kế web tại Manchester. Sau các cuộc nghiên cứu, họ nhận thấy các dữ liệu trực tuyến hiện có về thuật ngữ typography đều dùng những hình ảnh tĩnh, đơn giản. Đội ngũ đã rất chờ mong một lý do để trải nghiệm với SVG và CSS animation, và đây chính là cơ hội tuyệt hảo.
Designer Dan Heywood chia sẻ: “Tôi quyết định tạo ra một thứ thu hút thị giác hơn, một thứ giúp các designer mới nhập môn học hỏi tất cả các quy tắc typography trọng yếu chỉ trong tích tắc”
Đội ngũ nhấn mạnh vào tầm quan trọng khi người designer hiểu thấu đáo về typography. Với những bạn mới học lần đầu, hay các designer nhiều kinh nghiệm cần đổi gió, thì cheatsheet này đều có đủ tính giáo dục và khai sáng. Nội dung trọng điểm, thông tin rõ ràng và các animation đều nhịp nhàng uyển chuyển.
03. Waaark
Di chuyển chuột trên các đường biên để xem animation hài hước
Mỗi tương tác trên trang của Waaark đều tiết lộ một chi tiết đáng kinh ngạc. Art director Jimmy Raheriarisoa và frontend developer Antoine Wodniack, là người mở studio tại Pháp, đã suy nghĩ qua mọi thứ. Họ lên kế hoạch cách chuyển cảnh từ trang này qua trang khác, cách mờ dòng chữ theo một cách nhất định, và cách animate các đồ họa SVG phức tạp.
Mọi thứ được thổi sự sống vào mà vẫn giữ được khả năng hoạt động và truy cập. Cặp bài trùng này còn thêm shortcut bàn phím và vuốt lật trang, khiến người dùng thường xuyên di chuyển có thể trải nghiệm tốt hơn.
Khi được hỏi về trang portfolio vừa ra mắt, Wodniack giải thích rằng hợp tác chính là mấu chốt: “Với việc website ngày càng sáng tạo hơn, điều kiện sống còn là tạo ra một tổ hợp sáng tạo, gồm developer và designer. Developer luôn cần thử thách mới để tỏa sáng, và designer cần giải pháp để biến ý tưởng thành hiện thực.”
04. Periodic table
Mở màn bản demo, các nguyên tố riêng lẻ nhẹ nhàng bay về phía nhau.
Bảng tuần hoàn nguyên tố là chủ đề phổ biến trong giới designer, để trình diễn các kĩ thuật web mới. Được xây dựng bởi web designer Ricardo Cabello đến từ Barcelona, vốn nổi tiếng trong giới với cái tên ‘Mr Doob‘ – bản demo này mở đầu với các nguyên tố chuyển động va chạm vào nhau trong không gian, để tạo ra một bảng.
Sau đó bạn sẽ được lựa chọn để xoay chúng theo 3 hướng bằng cách kéo chuột. Bạn cũng có thể chuyển đổi giữa chế độ xem “Table”, “Sphere”, “Helix”, và “Grid” bằng cách nhấp chuột vào các nút ở cuối trang.
Cabello tạo ra thử nghiệm này để xem thử có thể sử dụng thư viện three.jsJavaScript của mình nhằm thay thế cho các hiệu ứng dùng trong bản demo cho game famo.us. Cabello cũng đã đăng tải video cách chạy demo trên iPad 2:
05. CSS Creatures
CSS creature của bạn sẽ trông như thế nào?
Chúng ta đều biết rằng làm việc trong ngành design đôi khi cũng thật buồn chán. Thế nên, cắt bớt chút thời gian từ lịch trình dày đặc của bạn và thư giãn với dự án CSS dễ thương từ web designer và developer Bennett Feely đến từ Pittsburgh.
CSS Creatures cho phép người dùng thiết kế, tạo ra và animate người bạn trên web của mình. Nghe thật thích đúng không? Tất cả điều bạn phải làm là gửi một tweet đến @CSSCreatures kèm theo màu sắc, tính cách và nét đặc trưng bạn muốn. Trong vòng 25 giây, CSS creature của bạn sẽ xuất hiện trên web ngay!
06. AT-AT Walker from Star Wars
AT-AT Walker của Anthony Calzadilla
Animation minh họa AT-AT Walker từ Anthony Calzadilla – The Empire Strikes Back được làm hoàn toàn trên CSS3. Hãy nhấp vào đường link “view the bones” trên iPad và bạn có thể thấy cách vận hành và hiệu ứng trên từng bộ phận.
07. GT America
Animation của designer Josh Schaub mang microsite này vào cuộc sống thực tế
Grilli Type, một xưởng đúc chữ in tại Thụy Sĩ, vừa thành công lớn khi tung ra font chữ mới, font GT-America, và “ trang microsite hài hước, mới mẻ mang ý tưởng về bản mẫu chữ lên một tầm cao mới” (theo lời của nhà thiết kế và phê bình đồ họa Michael Bierut). Mỗi chi tiết của trang này đều khớp với nhau để kể câu chuyện về font chữ.
GT-America được đặt tên từ đất nước truyền cảm hứng cho nó, nước Mỹ. Có đủ thứ ở đây, với hơn 40 animation độc đáo từ designer Josh Schaub. Bạn thậm chí có thể tương tác với một vài thứ trong đó để biến hình minh họa thực tế hơn. Chúng tôi yêu thích cách sử dụng animation và video để trình diễn tính đa dụng đáng kinh ngạc của bộ font này: cách sử dụng, width, stroke, kerning. Mỗi thứ đều là một mômen kể chuyện, một mômen truyền dạy và một mômen học hỏi.
08. Caaaaaaaat
Chú mèo co dãn theo chiều rộng của cửa sổ trình duyệt
Masayuki Kido, tức Roxik, một webdesigner và interactive director người Nhật, đã tạo ra chú mèo con có thể kéo dãn theo chiều dài của cửa sổ trình duyệt, và định dạng kích thước theo cách bạn biến đổi độ rộng cửa sổ. Hãy kéo hẹp vừa đủ và phần chữ sẽ thay đổi rất hài hước. Và niềm vui vẫn chưa dừng lại ở đấy – nhưng chúng tôi sẽ không tiết lộ thêm đâu, hãy tự trải nghiệm ngay nhé!
Trang này sử dụng hiệu ứng animation để tạo ảo giác các yếu tố đang vẽ khi người dùng kéo thanh cuộn trang
Website dịch vụ cộng đồng thường không được đánh giá cao về yếu tố mỹ thuật hay dễ sử dụng, nhưng website của Thư viện Greenwich lại là một ngoại lệ. Sản phẩm tái thiết kế này là kết quả của 2 năm trời nghiên cứu, chạy thử nghiệm và thiết kế.
Một trong những phần yêu thích của chúng tôi là ảo giác các yếu tố đang vẽ khi người dùng kéo thanh cuộn trang. Đây là mánh khóe mà nhiều developer tạo trực tiếp bằng SVG, nhưng tổ hợp đơn giản của biến đổi CSS và các yếu tố layer ở đây đã tạo ra một hiệu ứng thú vị tương đương với cách vẽ line SVG phức tạp hơn nhiều. Các yếu tố điều hướng có mã quy ước theo màu cũng tô điểm thêm cá tính, mà không cần đổ màu cho từng yếu tố.
@MrDenav và @lucasmarinm từ bluedashed.com không chỉ đơn thuần dùng CSS để tạo các cover cổ điển, mà họ còn khiến chúng phản ứng với âm nhạc. Sản phẩm giới thiệu bao gồm First Impressions được thực hiện bởi Strokes và Joy Division từ Unknown Pleasures. Lưu ý: Chỉ hoạt động trên Google Chrome.
Nguồn: creativebloq.com
