Tăng sức mạnh cho thực đơn của bạn bằng cách sử dụng hoạt hình với CSS

Đó là thông qua hoạt hình mà chúng ta có ý nghĩa về thế giới: Cửa xích đu mở, xe hơi lái xe đến những điểm đến của họ, môi xoáy vào nụ cười. Ngay cả những điều cảm thấy tức thời, giống như sét đánh hoặc thả điện thoại trên khuôn mặt trong khi sử dụng nó trên giường, xảy ra theo thời gian. Đó là thông qua chuyển động đó mà chúng ta hiểu cách các đối tượng liên quan và chức năng; Nếu chúng nhẹ hoặc nặng, cứng hoặc lỏng, kết nối hoặc tách, dính hoặc trơn trượt.

Tuy nhiên, trên web, chúng tôi đã quen với những thứ xuất hiện và biến mất trong chớp mắt. Chúng tôi nhấp vào một liên kết và mọi thứ thay đổi. Nó giống như được dẫn vào một căn phòng bịt mắt, quay vòng khoảng một vài lần và gỡ bỏ bịt mắt để đưa vào môi trường xung quanh. Bạn thậm chí không biết bạn đã nhập cửa nào. Đây là một cách lớn cách hầu hết các trang web được xây dựng. Chúng ta có thể làm tốt hơn.

Khi tìm hiểu về tiềm năng của Hoạt hình CSS. Cái gì Có thể dễ dàng để cho trí tưởng tượng của chúng ta đi vào Hyperdrive và rắc hoạt hình vào tất cả mọi thứ. Trong khi hoạt hình có thể là tuyệt vời, chúng ta cần phải cẩn thận và luôn luôn tự hỏi: Hoạt hình này có ý nghĩa không? Nó có thêm bất kỳ giá trị nào khác ngoài việc đẹp không? Nó có làm cho sản phẩm của chúng ta dễ sử dụng hơn?

Hoạt hình có ý nghĩa

Trong bài viết này, chúng tôi sẽ làm việc với một phổ biến Thiết kế UI. Yếu tố: Một menu chuyển đổi. Chúng ta sẽ tạo menu (và một biểu tượng để đi với nó) với CSS và làm cho nó trở nên sống động với hình động. Chúng tôi sẽ đảm bảo rằng hình ảnh động có ý nghĩa, nhưng cũng áp dụng thực tiễn tốt nhất về hiệu suất Web để đảm bảo chúng trơn tru nhất có thể.

Bạn có thể Xem trước kết quả cuối cùng ở đây . Khi người dùng nhấp vào biểu tượng menu, chúng ta sẽ mở rộng tấm nền của biểu tượng (một vòng tròn) để che màn hình và trình bày lớp phủ menu.

Thay vì chỉ nhấp nháy vào biểu tượng Đóng, chúng ta sẽ hoạt hình và biến dạng ba đường thẳng đứng (tạo biểu tượng menu) thành 'x', để biểu thị biểu tượng Đóng. Nói cách khác, vì menu được tiết lộ biểu tượng biến thành một nút đóng.

Các yếu tố liên quan

Bạn có thể đang nghĩ 'Vì vậy, đây có phải là một hình ảnh động có ý nghĩa?' Vâng, câu hỏi tuyệt vời. Câu trả lời ngắn: Có! Trả lời lâu hơn: Ảnh động rất tuyệt khi kết nối các yếu tố trên màn hình và hiển thị cách chúng liên quan đến nhau.

Khi chúng tôi mở rộng tấm nền của menu để trở thành menu, chúng tôi chỉ hiển thị cách hai kết nối - tương tự như cách một biểu tượng ứng dụng, khi được nhấn trên iOS hoặc Android, hãy cân nhắc và tiếp quản màn hình, cho thấy ứng dụng đã được khởi chạy từ Điều đó rất biểu tượng. Biểu tượng menu của chúng tôi không chỉ chuyển đổi menu: Đây là menu, chỉ bị sập.

Tương tự, giống như cách bật / tắt bật / tắt chuyển đổi giữa trạng thái bật và tắt khi bạn nhấn nó trên iOS, menu chuyển đổi của chúng tôi sẽ thay đổi giữa biểu tượng menu và biểu tượng Đóng tùy thuộc vào menu của trang web của chúng ta hiển thị hoặc ẩn. Điều này giúp thực thi ý tưởng rằng hai biểu tượng hoạt động theo những cách tương tự: cả hai đều kiểm soát menu.

Vì vậy, trong khi chúng tôi đang làm cho trang web của chúng tôi thú vị để sử dụng, chúng tôi cũng sẽ dễ hiểu hơn và cải thiện Kinh nghiệm người dùng bao giờ một chút.

Xem cách thực hiện việc này trong video hướng dẫn trên và các bước được viết dưới đây.

01. Bắt đầu

Tải xuống các tệp dự án . Mở ra index.html. Trong trình duyệt và bạn sẽ thấy ba liên kết lớn trên nền trắng. Đây là lớp phủ menu Chúng tôi sẽ tiết lộ.

Trước hết chúng ta cần phải che giấu nó. Trong phong cách.css. , thêm những kiểu này để .menu-Lớp phủ :

 Độ mờ đục: 0;
Tầm nhìn: ẩn; 

Với lớp phủ biến mất, một nút sẽ xuất hiện ở góc trên cùng bên trái. Hãy vẽ biểu tượng menu của chúng tôi ở đây, vì vậy có một cái gì đó để nhấp vào để hiển thị lớp phủ. Để dễ dàng làm động, chúng tôi sẽ vẽ nó bằng cách chỉ bằng HTML và CSS; Không có bitmap hoặc vectơ. Chúng tôi đã có một số html trong index.html. Đối với menu: một container ( .thực đơn ), một hình nền ( .menu-Circle. ), đường dẫn ( .menu-link. ) và biểu tượng ( .menu-icon. ) với một khoảng cho mỗi dòng.

Có một riêng biệt div. Đối với nền là một cách tiếp cận hơi độc đáo. Nếu chúng ta không nên thêm hình ảnh động vào vòng tròn này, chúng ta sẽ không cần một riêng biệt div. Được; Chúng tôi chỉ có thể thêm một bán kính biên giới. và màu nền cho chúng ta Menu-Link. .

Tuy nhiên, chúng tôi muốn được tự do sử dụng biến đổi Tài sản trên vòng tròn, vì vậy chúng ta có thể chia tỷ lệ nó mà không ảnh hưởng đến biểu tượng, vì vậy chúng ta cần tách riêng nền khỏi biểu tượng.

Hãy bắt đầu vẽ các dòng tạo nên biểu tượng. Thông thường họ có những gì? Chúng đều rộng như nhau, chúng có các góc tròn, được định vị hoàn toàn và chúng có màu nền. Vì tất cả các dòng chia sẻ Menu-line. Lớp, hãy sử dụng nó để đặt các thuộc tính được chia sẻ này:

 .menu-line {
 Màu nền: # 333;
 Chiều cao: 2px;
 Chiều rộng: 100%;
 Border-Radius: 2px;
 Vị trí: Tuyệt đối;
 Trái: 0;
} 

Sau đó, chúng ta có thể sử dụng các lớp duy nhất của dòng để đặt vị trí dọc:

 .menu-line-1 {Top: 0; Không thể

.menu-line-2 {
 Top: 0;
 Đáy: 0;
 Biên độ: Tự động;
Không thể

.menu-line-3 {bottom: 0; } 

02. Thêm một hiệu ứng di chuột

Hãy làm cho biểu tượng rõ ràng có thể nhấp bằng cách thêm hiệu ứng di chuột. Trong phong cách.css. , Tạo một bộ chọn mới cho Menu-Circle. để mở rộng nó lên khi bạn di chuột qua menu:

 .menu: di chuột .Mothy-Circle {biến đổi: tỷ lệ (1.4); } 

Bây giờ chúng ta có thể thêm hình ảnh động đầu tiên của chúng tôi. Thêm vào "Chuyển đổi: Tất cả 0,2s Dễ dàng vào" đến .menu-crible {} (không đến trạng thái di chuột). Chúng tôi đang nói với trình duyệt để làm động tất cả các thuộc tính có thể thay đổi cho .menu-Circle. . Vì vậy, khi chúng tôi mở rộng nó lên di chuột, nó hoạt hình trong quá trình 0,2 giây đến trạng thái mới của nó, với chức năng thời gian của làm cho dễ dàng .

Làm thế nào để bạn biết chức năng thời gian nào để chọn? Trước hết, tránh sử dụng chức năng thời gian tuyến tính. Vài điều trong thế giới thực di chuyển với tốc độ hoàn toàn không đổi, vì vậy các vật thể hoạt hình với chức năng thời gian tuyến tính có xu hướng trông không tự nhiên và cứng nhắc (như Einstein sẽ nói, "Chúa không chơi Dice với chức năng thời gian tuyến tính").

Như một quy luật của, dễ dàng Hoạt động tuyệt vời để trình bày các đối tượng mới, và dễ dàng trong Hoạt động tuyệt vời để loại bỏ các đối tượng. Và khi nghi ngờ, làm cho dễ dàng là một chức năng thời gian chắc chắn để mặc định là: nó có một khởi đầu chậm và kết thúc chậm, tạo ra một hình ảnh động mượt mà và trôi chảy.

03. Hiển thị và ẩn menu

Hãy sử dụng jQuery để hiển thị và ẩn lớp phủ mới được tạo của chúng tôi. Trong script.js. , chuyển đổi lớp mở trên .menu-Lớp phủ Bên trong trình xử lý nhấp chuột hiện có:

  $ (". Menu-Lớp phủ"). TogGleClass ("Mở"); 

Sau đó hiển thị lớp phủ khi nó có một lớp mở:

 .Mothyu-Overlay.Open {
 Opacity: 1;
 Tầm nhìn: có thể nhìn thấy;
} 

04. Kết nối biểu tượng menu

Việc chuyển đổi chúng tôi đã thêm trước đó có nghĩa là chúng tôi đã có một hiệu ứng mờ gọn gàng đang diễn ra khi chúng tôi hiển thị và ẩn lớp phủ. Tuy nhiên, chúng ta có thể làm cho nó trông giống như nền biểu tượng menu trở thành lớp phủ menu và kết nối tốt hơn hai.

Đạt được hiệu ứng này dễ dàng hơn so với dường như: tất cả những gì chúng ta cần làm là nhanh chóng phóng to vòng tròn menu khi nó nhấp. Lớp phủ sẽ phai đồng thời, tạo ảo giác rằng biểu tượng menu đang biến thành lớp phủ.

Chúng ta cần có thể tạo hình vòng tròn của menu khi menu đã được nhấp. Mở ra script.js. , và bên trong chức năng nhấp chuột hiện tại của chúng tôi Chuyển đổi lớp mở cho chúng tôi .thực đơn :

  $ (". Menu"). toggleclass ("Mở"); 

Bây giờ chúng ta có thể nhắm mục tiêu lớp này với CSS và mở rộng vòng tròn khi menu được mở. Ở dưới cùng của style.css. , Mở rộng .menu-Circle. khi nào .thực đơn cũng có một lớp .mở :

 .menu.open .menu-crible {biến đổi: tỷ lệ (60);
} 

05. Chuyển đổi biểu tượng

Chúng tôi đã có một hiệu ứng tiết lộ đẹp cho thực đơn của chúng tôi, nhưng làm cách nào để chúng tôi biến biểu tượng menu thành biểu tượng Đóng? Thật đáng ngạc nhiên khi bạn biết cách - chúng ta sẽ chỉ cần đặt ba thuộc tính CSS. Trước hết, chúng ta cần ẩn dòng giữa trong khi menu đang được hiển thị:

 .menu.open .menu-line-2 {Opacity: 0; } 

Sau đó, tất cả những gì chúng ta cần làm là lật hai dòng khác 45 độ theo hướng ngược lại (các dòng cần phải chỉ theo các hướng khác nhau để tạo thành 'X', vì vậy hãy lưu ý cách một trong các dòng có độ xoay tiêu cực là 45 độ):

 .menu.open .menu-line-1 {
 Biến đổi: Xoay (-45DEG);
Không thể

.menu.open .menu-line-3 {
 Biến đổi: Xoay (45DEG);
} 

Vâng, loại. Chúng tôi cũng cần phải tập trung hai dòng này theo chiều dọc. Tại thời điểm này, bạn có thể nghĩ 'dễ dàng! Chúng ta chỉ cần thay đổi hàng đầu và đáy vị trí để tập trung vào họ '. Và bạn sẽ đúng - nếu chúng ta không hoạt hình biểu tượng này.

Vì chúng ta chỉ có thể đạt được hình ảnh động tăng tốc phần cứng bằng cách giới hạn bản thân hoạt hình biến đổi và Opacity. Tài sản, chúng ta sẽ phải khu nghỉ dưỡng để tập trung các dòng thông qua các biến đổi.

 .menu.open .menu-line-1 {
 Transform: Translatey (7px) Translatey (-50%) Xoay (-45DEG);
Không thể

.menu.open .menu-line-3 {
 Transform: Translatey (-7px) Dịch (50%) Xoay (45DEG);
} 

Những biến đổi này sẽ di chuyển hai dòng để chúng được tập trung theo chiều dọc trong hộp đựng biểu tượng, sau đó xoay chúng để tạo thành chữ thập.

Hãy phá vỡ nó. Chúng tôi có hai bản dịch đang được sử dụng đồng thời: Dịch (7px) và Dịch (-50%) . Biến đổi đầu tiên, Dịch (7px) , được sử dụng để di chuyển cạnh trên của dòng đến trung tâm dọc của khung vẽ. Toán học ở đây rất đơn giản: 14 là chiều cao của biểu tượng của chúng tôi, bằng cách chia nó bằng hai chúng tôi nhận được điểm giữa: 7.

Biến đổi thứ hai, Dịch (-50%) , được sử dụng để di chuyển dòng để trung tâm dọc của dòng, không phải cạnh trên của nó, nằm trên điểm trung tâm dọc của khung vẽ.

Thường là khi sử dụng % Đăng nhập CSS Bạn đề cập đến cha mẹ của một phần tử (cài đặt Chiều rộng: 100% Phù hợp với chiều rộng của phần tử với cha mẹ của nó), nhưng nếu bạn sử dụng tỷ lệ phần trăm với thuộc tính biến đổi bạn đề cập đến chính phần tử, không phải cha mẹ. Vì vậy, đối với chúng tôi để tìm một chiều cao của một dòng và di chuyển nó lên trên một nửa số đó, tất cả những gì chúng ta cần là Dịch (-50%) .

06. Morph giữa các biểu tượng

Thay vì chỉ thay thế biểu tượng menu bằng biểu tượng Đóng, hãy chuyển giữa hai trạng thái.

Bắt đầu bằng cách thêm một chuyển đổi sang .menu-line. trong style.css. :

 Chuyển đổi: tất cả 0,25 giây dễ dàng vào; 

TA-DA! Một biểu tượng Morphing Menu. Hoạt hình là một chút buồn tẻ, mặc dù. Hãy khắc phục điều đó. Để làm cho các dòng xuất hiện sống động hơn, chúng ta có thể xoay chúng cả 90 độ. Biểu tượng sẽ giống nhau cuối cùng, nhưng các dòng sẽ di chuyển xa hơn trong cùng một khoảng thời gian. Thay đổi các vòng quay sang Xoay (-135DEG) và Xoay (135deg) .

Theo nguyên tắc của ngón tay cái, bạn luôn có thể cải thiện một hình ảnh động bằng cách sử dụng một đường cong Bézier tùy chỉnh thích nghi tốt hơn với hình ảnh động của bạn. Chúng tôi hiện đang sử dụng làm cho dễ dàng - Điều này có nghĩa là hình ảnh động sẽ có một khởi đầu chậm và kết thúc, với tốc độ nhanh hơn ở giữa.

Tôi nghĩ rằng một hiệu ứng giống như mùa xuân là phù hợp cho biểu tượng của chúng tôi. Hãy làm cho nó quay nhanh, với hiệu ứng nảy nhỏ khi kết thúc. Cho .menu-line. , thay thế " dễ dàng vào Với một đường cong Bézier tùy chỉnh:

 Chuyển đổi: Tất cả 0,25 giây-bezier (0.175, 0.885, 0,32, 1.275); 

Tất cả những con số đó là gì? Đừng lo lắng: Curves Bézier hiếm khi được viết bằng tay. Bạn dùng Cubic-bezier () Để xác định tốc độ của một hình ảnh động theo thời gian, và thay vì tự mình viết chúng, tôi khuyên bạn nên sử dụng một trang web tham khảo. Điều này đến từ Easings.net. Nó vượt quá ở cuối hoạt hình và tạo hiệu ứng nảy tinh tế.

Trong khi chúng ta đang ở đó, đi đến nới lỏng.net. và lấy mã cho EASEOUTEXPO. . Chúng tôi sẽ sử dụng điều này để tạo hiệu ứng tinh tế hơn cho hoạt hình nền menu. Cập nhật quá trình chuyển đổi của .menu-Circle. Để sử dụng đường cong Bézier tùy chỉnh này và làm cho hình ảnh động dài hơn một chút (0,5s):

 Chuyển đổi: Tất cả 0,5S khối bezier (0,19, 1, 0,22, 1); 

Xin chúc mừng, bạn đã tạo một bộ hình ảnh động có ý nghĩa: chúng giúp bạn hiểu những gì đang xảy ra trên trang web trong khi điều hướng nó, tạo cảm giác về nhận thức không gian. Trên hết, các hình ảnh động chạy trơn tru.

Bằng cách chỉ hoạt động các thuộc tính chuyển đổi và độ mờ, chúng ta có thể đảm bảo hỗ trợ tăng tốc phần cứng của trình duyệt có thể khởi động và tránh độ trễ không cần thiết. Khi chơi xung quanh với hình ảnh động, hãy đảm bảo bạn đánh dấu hai ô này: Làm cho chúng có ý nghĩa và đẹp mắt.

Bài viết này ban đầu xuất hiện trong Tạp chí Net. vấn đề 281. Theo dõi mạng tại đây .

Những bài viết liên quan:

• 10 ví dụ ấn tượng về hoạt hình CSS3
• 28 ví dụ nổi bật về CSS
• Bắt đầu với khả năng truy cập web