Xây dựng trang đích chia tách màn hình hoạt hình

Trang đích của bạn là một yếu tố quan trọng trong của bạn Bố trí trang web . Đây là cơ hội thực sự đầu tiên bạn phải giới thiệu doanh nghiệp của mình, hoặc sản phẩm bạn bán, vì vậy thiết kế của nó là chìa khóa. Các trang đích được thiết kế với một mục tiêu tập trung duy nhất được gọi là một cuộc gọi để hành động (CTA). Việc sử dụng màu sắc và hình ảnh để bổ sung cho các cuộc gọi hành động và Kinh nghiệm người dùng là một điều bắt buộc.

• Xem mã làm việc cho hướng dẫn này

Trong hướng dẫn này, chúng tôi sẽ đi qua cách xây dựng một trang đích hấp dẫn cho một thương hiệu thời trang hư cấu. Nó sẽ được tập trung vào một thiết kế màn hình chia nhỏ với hình ảnh lớn và các chuyển đổi hoạt hình xảy ra trên di chuột. Trang này sẽ có hai nút hành động rõ ràng và chúng tôi sẽ sử dụng HTML, Sass. Để tạo kiểu và cảm ứng JavaScript vani sử dụng cú pháp ES6 (hãy nhớ đảm bảo bạn web hosting phù hợp với nhu cầu trang web của bạn). Quá phức tạp? Tạo một trang web mà không cần mã, hãy thử đơn giản người tạo ra trang web .

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

Nếu bạn đang sử dụng Codepen, hãy đảm bảo CSS được đặt thành 'SCS' trong cài đặt Bút. Bạn có thể thực hiện thay đổi này bằng cách nhấp vào tab Cài đặt, chọn 'CSS' và thay đổi bộ tiền xử lý CSS sang SCSS trong các tùy chọn thả xuống.

Sau đó, chúng ta có thể bắt đầu thêm vào HTML của chúng tôi. Chúng ta sẽ bọc một phần gọi là 'bên trái' và một phần có tên 'đúng' trong một lớp container, với cả hai phần được cung cấp một lớp 'màn hình'.

 & lt; div class = "container" & gt;
  & lt; phần class = "màn hình còn lại" & gt;
  & lt; / phần & gt;
  & lt; phần class = "màn hình đúng" & gt;
  & lt; / phần & gt;
& lt; / div & gt; 

02. Kết thúc HTML

Để hoàn tất HTML của chúng tôi, chúng tôi sẽ thêm một tiêu đề cho mỗi phần bằng cách sử dụng một H1. nhãn. Bên dưới rằng chúng ta sẽ cần thêm một nút, sẽ liên kết đến một trang khác nếu đây là một dự án trong thế giới thực. Chúng tôi sẽ cung cấp cho một lớp học cái nút Để giữ mọi thứ tốt đẹp và đơn giản.

 & lt; div class = "container" & gt;
   & lt; phần Class = "Màn hình còn lại" & GT;
    & lt; H1 & GT; Thời trang nam & Lt; / H1 & GT;
      & lt; nút & gt;
       & lt; một href = "#" class = "nút" & gt; Tìm hiểu thêm & lt; / a & gt;
      & lt; / nút & gt;
    & lt; / phần & gt;

    & lt; phần class = "màn hình đúng" & gt;
       & lt; H1 & GT; Thời trang nữ & Lt; / H1 & GT;
        & lt; nút & gt;
          & lt; một href = "#" class = "nút" & gt; Tìm hiểu thêm & lt; / a & gt;
        & lt; / nút & gt;
     & lt; / phần & gt; 

03. Khám phá các biến Sass

Một điều chúng ta đều yêu thích Sass là việc sử dụng các biến. Mặc dù các biến CSS bản địa đang nhận được nhiều hỗ trợ hơn, chúng tôi sẽ giữ mọi thứ an toàn bằng cách sử dụng Sass. Chúng tôi sẽ đặt những thứ này ở đầu của chúng tôi .scss. và bạn có thể chọn bất cứ màu nào bạn muốn, nhưng sử dụng RGBA. Giá trị sẽ cho chúng ta sự linh hoạt hơn.

 / ** Biến ** /

$ container-bgcolor: # 444;
$ free-bgcolor: RGBA (136, 226, 247, 0,7);
$ free-Nút-Hover: RGBA (94, 226, 247, 0,7);
$ Phải-BGColor: RGBA (227, 140, 219, 0.8);
$ Phải-Nút-Hover: RGBA (255, 140, 219, 0,7);
$ Hover-Width: 75%;
$ Chiều rộng nhỏ: 25%;
$ animatespeed: 1000ms; 

04. Điều chỉnh kiểu dáng cơ thể

Đầu tiên, chúng tôi sẽ xóa tất cả phần đệm và lề mặc định cho cơ thể và sau đó đặt gia đình phông chữ để mở Sans. Điều này sẽ chỉ ảnh hưởng đến nút, vì vậy nó không quan trọng quá nhiều phông chữ chúng ta sử dụng. Sau đó chúng ta sẽ đặt chiều rộng và chiều cao để 100% Và hãy chắc chắn rằng bất cứ điều gì tràn trên trục X bị ẩn.

 HTML, cơ thể {
  Đệm: 0;
  Biên độ: 0;
  Font-Family: 'mở sans', sans-serif;
  Chiều rộng: 100%;
  Chiều cao: 100%;
  Overflow-X: Ẩn;
} 

05. Kiểu tiêu đề phần

Đã đến lúc chọn một phông chữ Google cho các tiêu đề phần - chúng tôi đã chọn hiển thị Playfair. Sau đó sử dụng TranslateX. Chúng tôi có thể đảm bảo các tiêu đề phần luôn ở giữa trục X.

 H1 {
  Kích thước phông chữ: 5rem;
  Màu sắc: #fff;
  Vị trí: Tuyệt đối;
  trái: 50%;
  20 hạng đầu%;
  Biến đổi: TranslateX (-50%);
  Không gian trắng: Nowrap;

  Font-Family: 'Playfair Display', Serif;
} 

06. Làm cho CTA nổi bật

Các nút của chúng tôi sẽ hoạt động như các cuộc gọi hành động của chúng tôi, vì vậy những thứ này cần phải lớn, đậm và định vị nơi chúng dễ nhấp. Cả hai nút sẽ có viền trắng và một hiệu ứng chuyển tiếp thú vị. Các kiểu mặc định cho cả hai nút sẽ giống nhau, tuy nhiên chúng tôi sẽ thay đổi màu sắc của chúng trên Hover.

 .Button {
  Hiển thị: Khối;
  Vị trí: Tuyệt đối;
  trái: 50%;
  Top: 50%;
  Chiều cao: 2.6rem;
  PADDING-TOP: 1.2REM;
  Chiều rộng: 15rem;
  Text-Căn chỉnh: Trung tâm;
  màu trắng;
  Biên giới: 3px Solid #fff;
  Border-Radius: 4px;
  Trọng lượng phông chữ: 600;
  Chuyển đổi văn bản: Uppercase;
  Trang trí văn bản: Không có;
  Biến đổi: TranslateX (-50%);
  Chuyển đổi: Tất cả .2S; 

Các nút chính sẽ có hiệu ứng di chuột đơn giản đẹp mắt và chúng tôi sẽ sử dụng các biến Sass mà chúng tôi đã chỉ định cho màu sắc, sẽ là màu tương tự như nền của trang.

 .screen.left .button: Hover {
  Màu nền: $ LEFT-NÚT-HOVER;
  Màu viền: $ LEFT-NÚT-HOVER;
Không thể

.screen.right .button: di chuột {
  Màu nền: $ Phải nút-Hover;
  Màu viền: $ Phải-Nút-Hover; 

07. Đặt nền và màn hình container

Lớp container sẽ hoạt động như trình bao bọc trang của chúng tôi và chúng tôi sẽ đặt vị trí này thành tương đối, đơn giản vì chúng tôi muốn định vị các màn hình để định vị tuyệt đối. Chúng tôi sẽ cung cấp cho container một màu nền mặc định, nhưng tất nhiên điều này sẽ không được nhìn thấy bởi vì chúng tôi sẽ thiết lập các màu khác nhau cho cả hai nền màn hình.

 .Container {
  Chức vụ: Người thân;
  Chiều rộng: 100%;
  Chiều cao: 100%;
  Bối cảnh: $ container-bgcolor;
  
    .màn {
      Vị trí: Tuyệt đối;
      Chiều rộng: 50%;
      Chiều cao: 100%;
      tràn: ẩn;
    Không thể
} 

08. Thêm hình ảnh nền

Cả hai phần bên trái và bên phải sẽ hiển thị hình ảnh và bạn có thể tìm thấy hình ảnh chứng khoán miễn phí bản quyền từ các trang web như UNLLAST. Cái gì Pixabay. hoặc là Pexels. (mà tôi đã sử dụng trong hướng dẫn này). Để làm cho mọi thứ dễ dàng hơn, tôi đã sử dụng một dịch vụ chia sẻ và lưu trữ hình ảnh miễn phí có tên IMGBB rằng chúng tôi có thể liên kết đến trong CSS của chúng tôi.

 .screen.left {
  trái: 0;
  Bối cảnh: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Trung tâm trung tâm không lặp lại;
  Kích thước nền: Che;
  
    & amp;: trước {
       Vị trí: Tuyệt đối;
      Nội dung: "";
      Chiều rộng: 100%;
      Chiều cao: 100%;
      Bối cảnh: $ TRÁI-BGCLOR;
    Không thể
} 

Phía bên phải của trang cũng sẽ hiển thị hình ảnh nền bằng IMGBB và chúng tôi sẽ đặt màu nền thành màu hồng. Một lần nữa, chúng tôi đặt kích thước nền để che . Điều này sẽ cho phép chúng tôi bao phủ toàn bộ yếu tố chứa, trong trường hợp của chúng tôi là .màn lớp học.

 .screen.right {
  Phải: 0;
  Bối cảnh: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Trung tâm trung tâm không lặp lại;
  Kích thước nền: Che;
  
   & amp;: trước {
      Vị trí: Tuyệt đối;
      Nội dung: "";
      Chiều rộng: 100%;
      Chiều cao: 100%;
      Bối cảnh: $ Phải-BGColor;
    Không thể
} 

09. Thêm hiệu ứng chuyển tiếp và di chuột

Tốc độ hoạt hình cho hiệu ứng di chuột của chúng tôi trên cả hai màn hình sẽ được kiểm soát bởi một quá trình chuyển đổi chứa giá trị của biến của chúng tôi $ animatespeed. , 1000ms (một giây). Sau đó, chúng ta sẽ hoàn thành bằng cách tạo hoạt hình một số nới lỏng, một cách dễ dàng vào và ngoài sẽ giúp cung cấp cho chúng ta một hình ảnh động mượt mà hơn.

 .screen.left, .screen.right, .screen.right: trước, .screen.left: trước {
  Chuyển đổi: $ animatespeed tất cả dễ dàng vào;
} 

Những gì chúng tôi muốn xảy ra bây giờ là khi bạn di chuột qua màn hình bên trái, sẽ có một lớp được thêm vào phần đó bằng JavaScript (mà chúng tôi sẽ viết trong bước sau). Khi lớp này được thêm vào, thì màn hình đó sẽ kéo dài đến bất kỳ chiều rộng của biến mà chúng ta đã chỉ định - sẽ là 75% và sau đó bên phải sẽ được đặt thành biến chiều rộng nhỏ hơn (25%).

 .hover-trái .left {
  Chiều rộng: $ Hover-Width;
Không thể

.hover-left .right {
  Chiều rộng: $ Chiều rộng nhỏ;
Không thể
.hover-left .right: trước {
  Z-Index: 2;
} 

Điều này hoạt động giống hệt như bên trái, nơi một lớp mới sẽ được thêm vào chuột di chuột bằng JavaScript và màn hình bên phải sẽ kéo dài phù hợp. Chúng tôi cũng cần đảm bảo Z-Index. được đặt thành. 2. Vì vậy, nút CTA trở nên nổi bật hơn.

 .Hover-phải .right {
  Chiều rộng: $ Hover-Width;
Không thể

.hover-phải .left {
  Chiều rộng: $ Chiều rộng nhỏ;
Không thể

.hover-phải .left: trước {
  Z-Index: 2;
} 

10. Chuyển sang JavaScript

Chúng tôi sẽ sử dụng một liên lạc với JavaScript Vanilla để giúp chúng tôi thêm và xóa các lớp CSS và chúng tôi cũng sẽ sử dụng một số tính năng ES6 mới. Điều đầu tiên chúng ta cần làm là khai báo một số biến không đổi.

Bởi vì chúng tôi sẽ sử dụng TÀI LIỆU. nhiều hơn một lần, chúng tôi sẽ đặt một biến không đổi được gọi là doc. và lưu trữ tài liệu trong đó để chúng ta có thể giữ từ 'tài liệu' đẹp và ngắn.

 Const Doc = Tài liệu; 

Bây giờ chúng ta cần đặt thêm ba hằng số sẽ lưu trữ .đúng Cái gì .trái và .thùng đựng hàng Chọn lọc. Lý do chúng tôi đang sử dụng các hằng số là do chúng tôi biết rằng chúng tôi không muốn thay đổi giá trị của những thứ này, vì vậy sử dụng các hằng số có ý nghĩa. Với những điều này bây giờ được đặt, chúng ta có thể tiếp tục và thêm một số sự kiện chuột cho chúng.

 Const Right = Doc.QuarySelector (". Phải");
const còn lại = doc.querysector (". còn lại");
Const container = doc.queryselector (". container"); 

Sử dụng trái Biến không đổi Chúng tôi đã khai báo ở bước cuối cùng, bây giờ chúng ta có thể thêm một trình lắng nghe sự kiện vào nó. Sự kiện này sẽ là giả mạo sự kiện và thay vì sử dụng chức năng gọi lại, chúng tôi sẽ sử dụng một tính năng ES6 khác được gọi là Các hàm mũi tên '(() = & gt;) .

 // thêm một lớp vào phần tử container trên di chuột
Left.addeventlistener ("Mouseenter", () = & gt; {
  container. classlist.add ("di chuột-trái");
}); 

11. Thêm và xóa một lớp

Trong bước cuối cùng, người nghe sự kiện của chúng tôi đã thêm một giả mạo sự kiện nhắm mục tiêu lớp container chính và thêm một lớp mới được gọi là di chuột bên trái đến phần tử phần bên trái. Với cái gọi này được gọi là, bây giờ chúng ta cần phải loại bỏ nó khi chúng ta di chuyển nó. Chúng tôi sẽ làm điều này bằng cách sử dụng mouseleave. sự kiện và. .tẩy() phương pháp.

 // xóa lớp đã được thêm vào DOVER
bên trái.addeventlistener ("mouseleave", () = & gt; {
  container. classlist.remove ("di chuột-trái");
}); 

Cho đến bây giờ chúng tôi đã làm mọi thứ trên màn hình bên trái. Bây giờ chúng tôi sẽ hoàn thành JavaScript và thêm và xóa các lớp trên các phần tử phần bên phải. Một lần nữa, chúng tôi đã sử dụng cú pháp hàm mũi tên ở đây để giữ mọi thứ trông đẹp và gọn gàng.

 right.addeventlistener ("Mouseenter", () = & gt; {
  container. classlist.add ("Hover-Right");
});

right.addeventlistener ("mouseleave", () = & gt; {
  container. classlist.remove ("di chuột phải");
}); 

12. Làm cho nó đáp ứng

Không có dự án - bất kể lớn hay nhỏ - nên tránh bị đáp ứng. Vì vậy, trong bước này, chúng tôi sẽ thêm một số truy vấn phương tiện vào CSS của chúng tôi và thực hiện dự án nhỏ này là thích ứng với các thiết bị di động tốt nhất có thể. Nó đáng để kiểm tra Codepen gốc để xem làm thế nào điều này hoạt động.

 @Media (chiều rộng tối đa: 800px) {
  h1 {
    Kích thước phông chữ: 2rem; Không thể

  .cái nút {
    Chiều rộng: 12rem;
  } 

Chúng tôi đã đảm bảo rằng khi chiều rộng của trang của chúng tôi xuống tới 800px, phông chữ và các nút sẽ giảm kích thước. Vì vậy, để hoàn thành mọi thứ, chúng tôi cũng muốn nhắm mục tiêu chiều cao và đảm bảo các nút của chúng tôi di chuyển xuống trang khi chiều cao trang xuống dưới 700px.

 @Media (chiều cao tối đa: 700px) {
  .cái nút {
    Top: 70%;
}} 

Bạn muốn lưu các trang của bạn? Xuất chúng dưới dạng PDF và lưu chúng an toàn lưu trữ đám mây .

Sự kiện thiết kế web Tạo ra London. Trả lại vào ngày 19-21 tháng 9 năm 2018, cung cấp một lịch trình đóng gói của các diễn giả hàng đầu trong ngành, một ngày hội thảo đầy đủ và cơ hội kết nối có giá trị - Đừng bỏ lỡ nó. Nhận vé tạo của bạn ngay bây giờ .

Bài viết này ban đầu được xuất bản trên Tạp chí Net VẤN ĐỀ 305. . Theo dõi ngay .

Đọc thêm:

• 5 trang web mới giật gân để được truyền cảm hứng bởi
• Tạo hiệu ứng văn bản 3D hoạt hình
• 19 trang web cuộn Parallax tuyệt vời