NộI Dung
- 01. Thiết lập
- 02. Kết thúc HTML
- 03. Khám phá các biến Sass
- 04. Điều chỉnh kiểu dáng cơ thể
- 05. Tạo kiểu cho các tiêu đề phần
- 06. Làm cho các CTA nổi bật
- 07. Đặt nền và màn hình vùng chứa
- 08. Thêm hình nền
- 09. Thêm hiệu ứng chuyển tiếp và di chuột
- 10. Chuyển sang JavaScript
- 11. Thêm và xóa một lớp
- 12. Làm cho nó phản hồi
Trang đích của bạn là một yếu tố quan trọng trong bố cục trang web của bạn. Đây là cơ hội thực sự đầu tiên bạn có để 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. Trang đích được thiết kế với một mục tiêu tập trung duy nhất được gọi là lời kêu gọi hành động (CTA). Việc sử dụng màu sắc và hình ảnh để bổ sung cho lời kêu gọi hành động và trải nghiệm người dùng là điều bắt buộc.
- Xem CodePen làm việc cho hướng dẫn này
Trong hướng dẫn này, chúng ta sẽ hướng dẫn cách xây dựng trang đích hấp dẫn cho một thương hiệu thời trang hư cấu. Nó sẽ tập trung xung quanh thiết kế chia đôi màn hình với hình ảnh lớn và quá trình chuyển đổi động xảy ra khi di chuột.Trang này sẽ có hai nút gọi hành động rõ ràng và chúng tôi sẽ sử dụng HTML, Sass để tạo kiểu và một chút JavaScript vani sử dụng cú pháp ES6 (hãy nhớ đảm bảo rằng dịch vụ lưu trữ web của bạn 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ử một trình tạo trang web đơn giản.
01. Thiết lập
Nếu bạn đang sử dụng CodePen, hãy đảm bảo CSS được đặt thành 'SCSS' 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 thành SCSS trong tùy chọn thả xuống.
Sau đó, chúng tôi có thể bắt đầu thêm vào HTML của mình. Chúng tôi sẽ bao bọc một phần được gọi là 'bên trái' và một phần được gọi là 'bên phải' trong một lớp vùng chứa, với cả hai phần được cung cấp một lớp là 'màn hình'.
div> section> / section> section> / section> / div>
02. Kết thúc HTML
Để hoàn thiện HTML của chúng tôi, chúng tôi sẽ thêm tiêu đề cho mỗi phần bằng cách sử dụng h1 nhãn. Bên dưới đó, chúng tôi sẽ cần thêm một nút, nút này 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 điều này một lớp gồm cái nút để giữ cho mọi thứ tốt đẹp và đơn giản.
div> section> h1> Thời trang nam / h1> nút> a href = "#"> Tìm hiểu thêm / a> / button> / section> section> h1> Thời trang nữ / h1> nút> a href = "#"> Tìm hiểu Thêm / a> / nút> / phần>
03. Khám phá các biến Sass
Một điều mà tất cả chúng ta yêu thích về Sass là việc sử dụng các biến. Mặc dù các biến CSS gốc đang được hỗ trợ nhiều 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 lên đầu .scssvà bạn có thể chọn bất kỳ màu nào bạn muốn, nhưng sử dụng rgba giá trị sẽ mang lại cho chúng ta sự linh hoạt hơn.
/ * * Biến * * / $ container-BgColor: # 444; $ left-bg Màu: rgba (136, 226, 247, 0,7); $ left-button-hover: rgba (94, 226, 247, 0,7); $ right-bg Màu: rgba (227, 140, 219, 0.8); $ right-button-hover: rgba (255, 140, 219, 0,7); $ hover-width: 75%; $ small-width: 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 phần thân và sau đó đặt họ phông chữ thành Open Sans. Điều này sẽ chỉ ảnh hưởng đến nút, vì vậy không quan trọng lắm chúng ta sử dụng phông chữ nào. Sau đó, chúng tôi sẽ đặt chiều rộng và chiều cao thành 100% và đảm bảo rằng bất kỳ thứ gì tràn trên trục X đều bị ẩn.
html, body {padding: 0; lề: 0; font-family: 'Open Sans', sans-serif; chiều rộng: 100%; chiều cao: 100%; tràn-x: ẩn; }
05. Tạo kiểu cho các tiêu đề phần
Đã đến lúc chọn phông chữ Google cho tiêu đề phần - chúng tôi đã chọn Playfair Display. Sau đó sử dụng dịchX chúng ta có thể đảm bảo tiêu đề phần luôn được căn giữa trên trục X.
h1 {font-size: 5rem; màu: #fff; vị trí: tuyệt đối; trái: 50%; 20 hạng đầu%; biến đổi: translateX (-50%); khoảng trắng: nowrap; font-family: 'Playfair Display', serif; }
06. Làm cho các CTA nổi bật
Các nút của chúng tôi sẽ hoạt động như lời kêu gọi hành động của chúng tôi, vì vậy chúng cần phải to, đậm và được đặt ở vị trí dễ nhấp vào. Cả hai nút sẽ có viền trắng và hiệu ứng chuyển cảnh 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 của chúng khi di chuột.
.button {display: block; 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-align: center; màu trắng; border: 3px solid #fff; bán kính đường viền: 4px; font-weight: 600; text-biến đổi: chữ hoa; văn bản-trang trí: không có; biến đổi: translateX (-50%); chuyển tiếp: 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ó màu tương tự với màu nền của trang.
.screen.left .button: hover {background-color: $ left-button-hover; viền-màu: $ left-button-hover; } .screen.right .button: hover {background-color: $ right-button-hover; viền-màu: $ right-button-hover;
07. Đặt nền và màn hình vùng chứa
Lớp vùng chứa sẽ hoạt động như trình bao bọc trang của chúng ta và chúng ta sẽ đặt vị trí của lớp này thành tương đối, đơn giản vì chúng ta muốn định vị các màn hình ở vị trí tuyệt đối. Chúng tôi sẽ cung cấp cho vùng chứa 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 vì chúng tôi sẽ đặt các màu khác nhau cho cả hai nền màn hình.
.container {vị trí: họ hàng; chiều rộng: 100%; chiều cao: 100%; nền: $ container-BgColor; .screen {vị trí: tuyệt đối; chiều rộng: 50%; chiều cao: 100%; tràn: ẩn; }}
08. Thêm hình nền
Cả hai phần bên trái và bên phải sẽ hiển thị một hình ảnh và bạn có thể tìm thấy các hình ảnh có sẵn miễn phí bản quyền từ các trang web như Unsplash, Pixabay hoặc Pexels (mà tôi đã sử dụng trong hướng dẫn này). Để làm mọi thứ dễ dàng hơn, tôi đã sử dụng dịch vụ lưu trữ và chia sẻ hình ảnh miễn phí có tên imgbb mà chúng tôi có thể liên kết đến trong CSS của mình.
.screen.left {left: 0; background: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) trung tâm không lặp lại; background-size: bìa; &: trước {vị trí: tuyệt đối; Nội dung: ""; chiều rộng: 100%; chiều cao: 100%; nền: $ left-bgColor; }}
Phía bên phải của trang cũng sẽ hiển thị hì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 thành che. Điều này sẽ cho phép chúng tôi bao gồm toàn bộ phần tử chứa, trong trường hợp của chúng tôi là .màn lớp học.
.screen.right {right: 0; background: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) center center không lặp lại; background-size: bìa; &: trước {vị trí: tuyệt đối; Nội dung: ""; chiều rộng: 100%; chiều cao: 100%; nền: $ right-bgColor; }}
09. Thêm hiệu ứng chuyển tiếp và di chuột
Tốc độ hoạt ả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 quá trình chuyển đổi giữ giá trị của biến của chúng tôi $ animateSpeed, là 1000ms (một giây). Sau đó, chúng tôi sẽ kết thúc bằng cách giảm bớt hoạt ảnh, đó là một sự dễ dàng trong và ngoài sẽ giúp mang lại cho chúng tôi hoạt ảnh mượt mà hơn.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {transfer: $ animateSpeed all easy-in-out; }
Điều chúng ta 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 ta sẽ viết ở 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 nào của biến mà chúng tôi đã chỉ định - sẽ là 75% và sau đó phía bên phải sẽ được đặt thành biến chiều rộng nhỏ hơn (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: before {z-index: 2; }
Điều này hoạt động giống hệt như bên trái, trong đó một lớp mới sẽ được thêm vào khi di chuột bằng JavaScript và màn hình bên phải sẽ kéo dài ra tương ứng. Chúng tôi cũng cần đảm bảo chỉ số z được đặt thành 2 để nút CTA trở nên nổi bật hơn.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: before {z-index: 2; }
10. Chuyển sang JavaScript
Chúng tôi sẽ sử dụng một chút JavaScript vani để 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 mới của ES6. Điều đầu tiên chúng ta cần làm là khai báo một số biến hằng số.
Bởi vì chúng tôi sẽ sử dụng tài liệu nhiều 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 tôi có thể giữ cho từ 'tài liệu' đẹp và ngắn gọ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, .trái và .thùng đựng hàng bộ chọn. Lý do chúng tôi sử dụng hằng số là vì chúng tôi biết chúng tôi không muốn thay đổi giá trị của những giá trị này, vì vậy việc sử dụng hằng số có ý nghĩa. Với những điều này hiện đã được thiết lập, chúng tôi có thể tiếp tục và thêm một số sự kiện chuột vào chúng.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
Sử dụng trái biến hằng số mà chúng ta đã khai báo ở bước trước, bây giờ chúng ta có thể thêm một bộ xử lý sự kiện vào nó. Sự kiện này sẽ là con chuột sự kiện và thay vì sử dụng một hàm gọi lại, chúng tôi sẽ sử dụng một tính năng khác của ES6 được gọi là Hàm mũi tên ’(() =>).
// thêm một lớp vào phần tử vùng chứa trên hover left.addEventListener ("mouseenter", () => {containerner.classList.add ("hover-left");});
11. Thêm và xóa một lớp
Trong bước cuối cùng, trình nghe sự kiện của chúng tôi đã thêm con chuột sự kiện nhắm mục tiêu đến lớp vùng chứa chính và thêm một lớp mới được gọi là di chuột trái vào phần tử phần bên trái. Với cái gọi là được thêm vào, bây giờ chúng ta cần phải xóa nó khi chúng ta di chuột ra khỏi 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 hover left.addEventListener ("mouseleave", () => {containerner.classList.remove ("hover-left");});
Cho đến bây giờ chúng tôi đã thực hiện tất cả mọi thứ trên màn hình bên trái. Bây giờ chúng ta 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ữ cho mọi thứ trông đẹp và gọn gàng.
right.addEventListener ("mouseenter", () => {containerner.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {containerner.classList.remove ("hover-right");});
12. Làm cho nó phản hồi
Không có dự án nào - dù lớn hay nhỏ - đều không được đá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à làm cho dự án nhỏ này thích ứng với thiết bị di động nhất có thể. Bạn nên kiểm tra CodePen gốc để xem cách này hoạt động như thế nào.
@media (max-width: 800px) {h1 {font-size: 2rem; } .button {width: 12rem; }
Chúng tôi đã đảm bảo rằng khi chiều rộng của trang giảm xuống 800px, phông chữ và các nút sẽ giảm kích thước. Vì vậy, để kết thúc 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 dưới 700px.
@media (max-height: 700px) {.button {top: 70%; }}
Bạn muốn lưu các trang của mình? Xuất chúng dưới dạng PDF và lưu chúng trong bộ nhớ đám mây an toàn.
Sự kiện thiết kế web Tạo London trở lại vào ngày 19-21 tháng 9 năm 2018, mang đến một lịch trình dày đặc của các diễn giả hàng đầu trong ngành, một ngày hội thảo đầy đủ và các cơ hội kết nối có giá trị - đừng bỏ lỡ. Nhận vé Tạo của bạn ngay bây giờ.
Bài báo này ban đầu được xuất bản trên tạp chí net vấn đề 305. Theo dõi ngay.
