Tạo hình động UI Slick

Ngày càng thường xuyên hơn, các nhà thiết kế và nhà phát triển đang thừa nhận tầm quan trọng của thiết kế chuyển động trong bối cảnh của Kinh nghiệm người dùng . Hoạt hình trên web không còn là một cách để làm hài lòng và wow người dùng mà là một công cụ chức năng giúp trải nghiệm dễ dàng, vui vẻ và đáng nhớ. Và có một số công cụ và cách tiếp cận khác nhau có sẵn, từ Hoạt hình CSS. để kỹ thuật sử dụng bootstrap hoặc html.

Hoạt hình trong bối cảnh giao diện người dùng vẫn là một trường rất mới. Không có nhiều tài nguyên ngoài kia dạy thực hành tốt nhất hoặc thể hiện các mô hình phổ biến của hoạt hình UI mà chúng ta có thể làm theo. Hầu hết thời gian, đó là về thử nghiệm, Kiểm tra người dùng và có lẽ một chút thử nghiệm và lỗi.

• 15 Hướng dẫn thiết kế web đáp ứng

Vì vậy, trong hướng dẫn này, chúng ta sẽ tạo ra một cái gì đó không nhầm lẫn, theo các mẫu thông thường và là phong cách. Đây sẽ là phần hồ sơ nhóm mà bạn thường thấy trên các trang web của công ty. Ý tưởng là hiển thị thêm một chút thông tin về đội / nhân viên khi mỗi người bay lơ lửng. Trong suốt hướng dẫn, chúng tôi sẽ sử dụng Codepen, nhưng tất nhiên bạn có thể sử dụng trình soạn thảo yêu thích và môi trường phát triển của riêng mình. Hãy nhớ rằng, tạo một trang web phức tạp hơn có thể thay đổi web hosting Cần rất chắc chắn rằng bạn đã có một dịch vụ phù hợp với bạn.

Bạn có muốn một công cụ đơn giản để làm một trang web? Sử dụng một thứ rực rỡ người tạo ra trang web .

01. Được thiết lập

Bắt đầu bằng cách mở mã hóa và tạo một cây bút mới. Chúng ta sẽ sử dụng Bootstrap 4 và Sass (.scss), vì vậy hãy đảm bảo rằng trong các cài đặt bạn bao gồm Bootstrap CSS và JS làm liên kết tài nguyên của bạn và cũng đặt CSS sang SCSS. Một liên kết tài nguyên khác bạn sẽ cần thêm là phông chữ tuyệt vời, chúng tôi sẽ sử dụng cho các biểu tượng xã hội của chúng tôi.

02. Tạo container, hàng và cột

Container là những gì Bootstrap sử dụng làm phần tử bố cục cơ bản của nó và chúng được yêu cầu khi bạn đang sử dụng hệ thống lưới mặc định. Trong container, bạn cần thêm vào một hàng. Các hàng là trình bao bọc cho các cột và bạn có thể chỉ định số lượng cột mà bạn muốn từ 12 có thể có thể và điểm dừng của những gì. Trong trường hợp của chúng tôi, chúng tôi muốn một yếu tố có điểm dừng kích thước trung bình và lấp đầy ba cột theo chiều rộng.

 & lt; div class = "container" & gt;
 & lt; div class = "hàng" & gt;
 & lt; div class = "col-md-3" & gt;
 & lt;! - Thêm liên kết hình ảnh và màu sắc ở đây
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Đặt hình ảnh hồ sơ và màu sắc

Yếu tố UI hồ sơ đầu tiên chúng ta sẽ bắt đầu với sẽ là cho một thành viên trong nhóm nữ và cô ấy sẽ là một phần của đội màu xanh. Màu sẽ được chỉ định bằng cách sử dụng một lớp gọi là màu xanh và màu thực tế cuối cùng sẽ được xác định bằng các biến sass, mà chúng ta sẽ làm trong một bước sau. Sau đó, chúng ta sẽ cần thêm vào một bức ảnh và cung cấp cho nó một lớp gọi là ảnh.

 & lt; div class = "Team Blue" & GT;
    & lt; div class = "ảnh" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt; 

04. Thêm tên hồ sơ và tiêu đề

Bit cuối cùng của HTML sẽ được thêm vào sẽ là cho tên, tiêu đề và biểu tượng xã hội, sẽ được thêm vào bên dưới thẻ div cuối cùng mà chúng tôi vừa thêm vào bước cuối cùng. Đối với các biểu tượng xã hội, chúng tôi sẽ sử dụng phông chữ tuyệt vời và những thứ này sẽ được đặt trong một danh sách không có thứ tự.

 & lt; div class = "profile-txt" & gt;
      & lt; h1 class = "tiêu đề" & gt; libby & lt; / h1 & gt;
      & lt; span class = "vị trí" & gt; web thiết kế web & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul class = "biểu tượng xã hội" & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-facebook" & gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-twitter" & gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-linkedin" & gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-dribble" & gt; & lt; / a & gt; & lt; / li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Đặt biến Sass

Nếu bạn đang theo dõi bằng Codepen, thì bạn sẽ đã cài đặt Sass và sẵn sàng để đi. Bạn chỉ cần nhấp vào biểu tượng / nút Cài đặt Bút và chọn SCSS làm tiền xử lý CSS của bạn. Sau đó, chúng ta có thể tiếp tục và thêm vào một số biến sẽ lưu trữ tất cả các màu của chúng tôi. Chúng tôi đã sử dụng RGBA làm giá trị màu để cho phép chúng tôi kiểm soát ý nghĩa hơn về độ mờ của tất cả các màu '.

 $ Bluegradient: RGBA (103, 188, 223, .8);
$ LightGreen: RGBA (188, 219, 183, 0,5);
$ Green: RGBA (119, 180, 109, 0,5);
$ Green-Border: RGBA (171, 221, 164, 0,5);
$ Blue: RGBA (80, 205, 227, 1);
$ Blue-Border: RGBA (147, 223, 236, 1); 

06. Tải lên một hình nền

Để làm cho mọi thứ trông hấp dẫn hơn, chúng ta sẽ đặt một hình nền đẹp trên cơ thể. Ở đây chúng ta có thể sử dụng bộ biến đầu tiên của chúng tôi và cung cấp cho hình nền một lớp phủ gradient dễ chịu đi từ màu xanh nhạt đến màu xanh. Sau đó để làm cho hình ảnh nền của chúng tôi đáp ứng đầy đủ, chúng tôi sẽ đặt chiều cao xem lên 100vh.

 Cơ thể {
 Bối cảnh: Gradient tuyến tính (sang phải, $ LightGreen, $ Bluegradient), URL ('https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') Trung tâm không lặp lại;
 Kích thước nền: Che;
 Chức vụ: Người thân;
 Chiều cao: 100vh;
 } 

07. Chọn một nền hồ sơ và hình ảnh

Mỗi hồ sơ đội sẽ được cung cấp cùng một phong cách và nhóm lớp sẽ được sử dụng cho việc này. Nền sẽ có màu trắng, tất cả các nội dung tập trung và chúng ta cần đảm bảo vị trí được đặt thành tương đối. Sau đó, chúng ta có thể bao gồm các CSS cho hình ảnh hồ sơ. Để có kết quả tốt nhất, hãy đảm bảo hình ảnh gốc bạn sử dụng có kích thước không lớn hơn quảng trường 200px. Tuy nhiên, chúng tôi sẽ thay đổi chiều cao và chiều rộng của những điều này trong quy tắc CSS ảnh.

 .Team {
 Đệm: 30px 0 40px;
 Margin-top: 60px;
 Bối cảnh: #fff;
 Text-Căn chỉnh: Trung tâm;
 tràn: ẩn;
 Chức vụ: Người thân;
 Con trỏ: Con trỏ;
 Box-Shadow: 0 0 25px 1px RGBA (0,0,0,0.3);
 .tấm ảnh {
 Hiển thị: Khối nội tuyến;
 Chiều rộng: 130px;
 Chiều cao: 130px;
 Biển dưới cùng: 50px;
 Chức vụ: Người thân;
 Z-Index: 1;
 Không thể
 } 

08. Thêm hình ảnh động

Phần hoạt hình đầu tiên chúng ta sẽ thêm sẽ ở đầu phần tử hồ sơ của chúng tôi. Ý tưởng là khi chúng ta di chuột qua toàn bộ nguyên tố, một hình tròn màu xanh sẽ hoạt hình xuống. Chúng ta có thể kiểm soát mức độ màu xanh chúng ta có thể nhìn thấy bằng cách chỉ định vị trí này để có tỷ lệ phần trăm dưới cùng. Vì vậy, chơi xung quanh với tỷ lệ này và bạn sẽ nhận được ý tưởng tốt hơn về cách thức hoạt động này. Bạn không bao giờ biết: bạn thậm chí có thể khám phá một hiệu ứng tốt hơn!

 .Blue .Photo: trước {
 Nội dung: "";
 Chiều rộng: 100%;
 Chiều cao: 0px;
 bán kính biên giới: 50%;
 Bối cảnh: $ Blue;
 Vị trí: Tuyệt đối;
 đáy: 130%;
 Phải: 0;
 Trái: 0;
 biến đổi: quy mô (3);
 Chuyển đổi: Tất cả .3S tuyến tính 0S;
Không thể
.Team: di chuột .Photo: trước {
 Chiều cao: 100%;
} 

09. Animate Ảnh nhóm

Ảnh nhóm là tiêu điểm của chúng tôi trong giao diện người dùng này và có lẽ là yếu tố rõ ràng nhất mà bạn mong đợi để hoạt hình trong một số hình dạng hoặc hình thức. CSS Chúng tôi sẽ thêm vào bước này trước tiên sẽ biến ảnh thành một vòng tròn nhỏ hơn, sau đó bay qua, sẽ có một viền màu xanh nhạt được thêm vào nó và ảnh sẽ cùng với biên giới. Với sự chuyển đổi được thêm vào, chúng ta có một hình ảnh động chất lỏng tốt đẹp.

 .Blue .PIC: Sau {
 Nội dung: "";
 Chiều rộng: 100%;
 Chiều cao: 100%;
 bán kính biên giới: 50%;
 Bối cảnh: $ Blue;
 Vị trí: Tuyệt đối;
 Top: 0;
 Trái: 0;
 Z-Index: 1;
Không thể
.Team .photo img {
 Chiều rộng: 100%;
 Chiều cao: Tự động;
 bán kính biên giới: 50%;
 biến đổi: quy mô (1);
 Chuyển đổi: Tất cả 0.9S dễ dàng 0S;
Không thể
.blue: di chuột .photo img {
 Box-Shadow: 0 0 0 14px $ Blue-Border;
 biến đổi: quy mô (0,6);
 Không thể

10. Tinh chỉnh tên và vị trí hồ sơ

Tên hồ sơ và vị trí cần một chút dọn dẹp. Chúng sẽ không hoạt hình nhưng không nên ngăn bạn thêm hình ảnh động của riêng bạn vào những thứ này nếu bạn muốn. Có lẽ quy mô chúng một chút trên Hover, vì bạn sẽ có đủ không gian do thay đổi kích thước của bức ảnh.

 .profile-txt {
 Biển dưới cùng: 30px;
 .tiêu đề {
 Kích thước phông chữ: 2rem;
 Trọng lượng phông chữ: 700;
 Màu sắc: # 333;
 Khoảng cách thư: 1,5px;
 Chuyển đổi văn bản: tận dụng;
 Biển dưới cùng: 6px;
 Không thể
 .Chức vụ{
 Hiển thị: Khối;
 Kích thước phông chữ: 1rem;
 Màu sắc: # 555;
 Không thể
} 

11. Thêm biểu tượng xã hội

Các biểu tượng xã hội trước tiên sẽ được định vị ở dưới cùng của trang -100px. Sau đó, khi chúng ta di chuột qua nó, vị trí dưới cùng sẽ được đặt thành 0 và được thêm vào quá trình chuyển đổi, điều này sẽ cung cấp cho chúng ta một hình ảnh động tốt đẹp để di chuyển sao lưu. Các biểu tượng sẽ được cung cấp trạng thái di chuột của riêng họ, đặt nền của chúng thành màu trắng và biểu tượng thành màu xanh.

 .Blue .social-icons {
 Chiều rộng: 100%;
 Kiểu danh sách: Không có;
 Đệm: 0;
 Biên độ: 0;
 Bối cảnh: $ Blue;
 Vị trí: Tuyệt đối;
 Đáy: -100px;
 Trái: 0;
 Chuyển đổi: tất cả 0,6S dễ dàng;
 li {
 Hiển thị: Khối nội tuyến;
 
 một {
 Hiển thị: Khối;
 Đệm: 8px;
 Kích thước phông chữ: 1rem;
 Màu sắc: #fff;
 Trang trí văn bản: Không có;
 Chuyển đổi: Tất cả 0,5 dễ dàng;
 & amp;: di chuột {
 Màu sắc: $ Blue;
 Bối cảnh: #fff;
 Không thể
 Không thể
 Không thể
Không thể
.Team: Hover .Social-icons {
 Đáy: 0px;
} 

12. Làm cho thành viên nhóm xanh

Để trộn mọi thứ lên một chút, chúng ta có thể bắt đầu thêm nhiều thành viên vào đội của chúng tôi. Màu sắc chúng ta sẽ sử dụng cho cái này sẽ có màu xanh. Nhưng trước tiên hãy quay lại phần / tệp HTML và tất cả những gì chúng ta cần làm là sao chép lớp COL-MD-3 - không phải hàng - xuống vào thẻ div cuối cùng dưới các biểu tượng xã hội và dán nó vào.

 & lt; div class = "Team Green" & GT;
 & lt; div class = "ảnh" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt; 

Khi bạn đã thay đổi lớp màu xanh thành màu xanh lá cây, cuối cùng chúng ta có thể thêm vào tất cả các CSS sẽ cung cấp cho chúng ta cùng một hình động.

 .Green: Hover .Photo img {
 Box-Shadow: 0 0 0 14px $ Biên giới xanh;
 biến đổi: quy mô (0,6);
 Không thể
.Pleen .Photo: trước {
 Nội dung: "";
 Chiều rộng: 100%;
 Chiều cao: 0px;
 bán kính biên giới: 50%;
 Bối cảnh: $ xanh;
 Vị trí: Tuyệt đối;
 đáy: 135%;
 Phải: 0;
 Trái: 0;
 biến đổi: quy mô (3);
 Chuyển đổi: Tất cả .3S tuyến tính 0S;
Không thể
.sten .social-icons {
 Chiều rộng: 100%;
 Kiểu danh sách: Không có;
 Đệm: 0;
 Biên độ: 0;
 Bối cảnh: $ xanh;
 Vị trí: Tuyệt đối;
 Đáy: -100px;
 Trái: 0;
 Chuyển đổi: tất cả 0,6S dễ dàng;
 li {
 Hiển thị: Khối nội tuyến;
 một {
 Hiển thị: Khối;
 Đệm: 8px;
 Kích thước phông chữ: 1rem;
 Màu sắc: #fff;
 Trang trí văn bản: Không có;
 Chuyển đổi: Tất cả 0,5 dễ dàng;
 & amp;: di chuột {
 Màu sắc: $ xanh;
 Bối cảnh: #fff;
 Không thể
 Không thể
 Không thể
} 

Và vẻ đẹp của phương pháp này là bạn có thể lặp lại theo yêu cầu cho nhiều lớp màu khác nhau, cho phép bạn chủ đề một cách tinh tế, hoạt hình UI của bạn như được yêu cầu.

Nếu bạn đang xây dựng một trang web với một đội, hãy chắc chắn rằng bạn có được đáng tin cậy, an toàn lưu trữ đám mây để giữ cho mọi thứ gắn kết.

Bài viết này ban đầu được công bố trong số 307 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua số phát hành 307. hoặc là Đăng ký mạng lưới .

Bạn muốn tìm hiểu thêm về các hoạt hình UI?

Nếu bạn quan tâm đến việc tìm hiểu thêm về cách bạn có thể làm cho trang web của mình POP và Sparkle bằng cách sử dụng Animation UI kiểu dáng đẹp, hãy đảm bảo bạn đã chọn vé của mình cho Tạo ra London. .

Một nhà thiết kế và nhà phát triển phía trước hiện đang làm việc như nhà phát triển sáng tạo cho asemblr.com, Steven Roberts sẽ được cung cấp Talk - CSS Animation: ngoài quá trình chuyển đổi - trong đó anh ta sẽ chỉ cho bạn những công cụ tốt nhất cho công việc và tạo lại một số hình ảnh động tốt nhất Web phải cung cấp, trong khi khám phá các khả năng và hạn chế của hoạt hình chỉ với CSS.

Tạo London diễn ra từ ngày 19-21 tháng 9 năm 2018. Nhận vé của bạn bây giờ .

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

• Cách sử dụng hoạt hình trong ứng dụng di động
• Hướng dẫn sử dụng chuyên nghiệp về thiết kế UI
• Hướng dẫn dành cho người mới bắt đầu để thiết kế hình ảnh động giao diện