Khi hiển thị nhiều lời gọi hành động trên trang của bạn, có thể hữu ích khi tạo hiệu ứng cuộn tương tác kết hợp các yếu tố khác nhau. Một giải pháp là chuyển đổi các mô-đun thành các phần tử cố định trong khi chúng đang di chuyển trong vùng chứa cột của chúng. Trong hướng dẫn hôm nay, chúng tôi sẽ chỉ cho bạn cách tạo một thiết kế đẹp mắt xử lý kỹ thuật này. Bạn cũng sẽ có thể tải xuống tệp JSON miễn phí!
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem xét lần cuối về cách nó hoạt động với các kích thước màn hình khác nhau.
Hãy bắt đầu tái tạo!
Thêm một phần mới
Bắt đầu bằng cách thêm một phần thông thường mới vào trang bạn đang làm việc.
khoảng cách
Mở cài đặt phần và thay đổi lề dưới và lề trên cho các kích thước màn hình khác nhau.
- Đầu bọc: 7vw (máy tính để bàn), 10vw (máy tính bảng), 15vw (điện thoại)
- Upholstery ở phía dưới: 20vw (máy tính để bàn), 7vw (máy tính bảng), 10vw (điện thoại)
Thêm một dòng mới
Cấu trúc cột
Tiếp tục thêm một hàng mới bằng cấu trúc cột sau:
kích thước
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và để nó chiếm toàn bộ chiều rộng của phần. Cậu ấy cũng là rất quan trọng kích hoạt tùy chọn 'Cân bằng độ cao cột'. Bằng cách này, bạn sẽ tạo không gian trống trong các cột cho phép các mô-đun cố định di chuyển tự do trong khi cuộn trang.
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Cân bằng chiều cao cột: Có
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
Cột 2 Đệm trên
Sau đó mở cài đặt cho cột 2 và thêm một số phụ trên cùng trên màn hình.
- Phần đệm trên: 20vw (máy tính để bàn), 0vw (máy tính bảng và điện thoại)
Cột 3 Đệm trên
Ngoài ra, thêm một giá trị điền hàng đầu tùy chỉnh vào cột thứ ba.
- Đệm tốt nhất: 40vw (máy tính để bàn), 0vw (máy tính bảng và điện thoại)
Cột 4 Đệm trên
Và hoàn thành các tham số của dòng bằng cách thêm giá trị điền cao hơn vào cột 4.
- Phần đệm trên: 60vw (máy tính để bàn), 0vw (máy tính bảng và điện thoại)
Thêm CTA vào cột 1
Thêm nội dung
Đã đến lúc bắt đầu thêm mô-đun! Mô-đun đầu tiên chúng ta cần trong cột 1 là mô-đun CTA (Kêu gọi hành động). Chèn nội dung de Votere choix.
Liên
Đồng thời thêm một liên kết đến nút. Điều này sẽ cho phép nút hiển thị trong thiết kế.
- URL của liên kết của nút: #
Màu nền
Thay đổi màu nền của mô-đun sau đó.
- Màu nền: #ffffff
Cài đặt văn bản
Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản chung.
- Sắp xếp văn bản: trung tâm
- Màu văn bản: tối
Cài đặt văn bản tiêu đề
Cũng thay đổi cài đặt văn bản của tiêu đề.
- Cấp độ tiêu đề: H3
- Tiêu đề văn bản: Phổ
- Tiêu đề văn bản màu: # 000000
- Kích thước tiêu đề văn bản: 2vw (máy tính để bàn), 4vw (máy tính bảng), 6vw (điện thoại)
Cài đặt văn bản
Với các thông số của cơ thể của văn bản.
- Phông chữ cơ thể: Fira Sans
- Trọng lượng của phông chữ: Nhẹ
- Văn bản màu cơ thể: # 000000
- Kích thước văn bản cơ thể: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Chiều cao cơ thể: 1.8em
Cài đặt nút
Đừng quên tạo kiểu cho nút mô-đun CTA của bạn.
- Sử dụng kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Màu văn bản nút: #ffffff
- Màu nền của nút: #444eff
- Chiều rộng của đường viền nút: 0px
- Bán kính đường viền của nút: 50vw
- Phông chữ: Fira Sans
- Phần đệm trên: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Upholstery ở phía dưới: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Lớp đệm bên trái: 3vw (máy tính để bàn), 7vw (máy tính bảng), 13vw (điện thoại)
- Upholstery bên phải: 3vw (máy tính để bàn), 7vw (máy tính bảng), 13vw (điện thoại)
khoảng cách
Sau đó, chuyển đến cài đặt giãn cách và thêm lề trong và lề dưới tùy chỉnh.
- Đệm hàng đầu: 8vw
- Đệm đáy: 8vw
biên giới
Cũng thêm các góc tròn cho mô-đun.
- Góc tròn: 1vw (tất cả các góc)
Hộp bóng
Hoàn thành thiết kế mô-đun bằng cách thêm một bóng hộp tinh tế.
- Bóng của hộp Vị trí nằm ngang: 10px
- Lực lượng bóng mờ hộp: 50px
- Màu bóng: rgba (0,0,0,0,08)
Lớp CSS
Bây giờ, để hiệu ứng cuộn dính hoạt động, chúng ta sẽ cần thêm một vài dòng mã CSS vào cuối hướng dẫn này. Để chuẩn bị, chúng tôi sẽ thêm một lớp CSS vào mô-đun CTA.
- Lớp CSS: dính-cta
Thêm mô-đun hình ảnh vào cột 1
Tải lên ảnh
Hãy chuyển sang mod tiếp theo và cuối cùng mà chúng ta cần trong cột 1, đó là mod hình ảnh. Tải lên hình ảnh PNG mà bạn chọn.
sự liên kết
Thay đổi căn chỉnh hình ảnh tiếp theo.
- Căn chỉnh hình ảnh: Trung tâm
kích thước
Hãy chắc chắn để buộc toàn bộ chiều rộng trên mô-đun.
- Buộc toàn băng thông: Có
khoảng cách
Hoàn thành cài đặt mô-đun bằng cách đi tới cài đặt giãn cách và thêm các giá trị giãn cách tùy chỉnh cho các kích thước màn hình khác nhau.
- Lề trên: -5vw (máy tính bảng và điện thoại)
- Lề dưới: -12vw (máy tính để bàn), 5vw (máy tính bảng và điện thoại)
- Lớp đệm bên trái: 3vw (máy tính để bàn), 10vw (máy tính bảng), 25vw (điện thoại)
- Upholstery bên phải: 3vw (máy tính để bàn), 10vw (máy tính bảng), 25vw (điện thoại)
Nhân bản hai mô-đun ba lần và đặt các cột còn lại
Khi bạn đã hoàn thành cả hai mô-đun trong cột 1, bạn có thể nhân đôi chúng ba lần và đặt các bản sao vào các cột còn lại của hàng.
Thay đổi hình ảnh
Đảm bảo thay đổi hình ảnh trong mỗi mô-đun hình ảnh trùng lặp.
Thay đổi nội dung của CTA và màu nền của các nút
Đồng thời thay đổi nội dung CTA với màu nền của nút.
- Mô-đun CTA #2: #89ffb4
- Mô-đun CTA #3: #ff89f1
- Mô-đun CTA #4: #ffd389
Thêm lớp CSS vào mô-đun hình ảnh trong cột 1, 2 và 3
Bây giờ, để đảm bảo rằng hiệu ứng dính cũng hoạt động trên hình ảnh, chúng ta sẽ cần thêm một lớp CSS vào các mô-đun hình ảnh trong cột 1, 2 và 3.
- Lớp CSS: hình ảnh dính
Thêm dòng 2
Cấu trúc cột
Tất cả những gì còn lại là thêm mã CSS. Để làm điều này, hãy thêm một dòng mới.
Thêm một mô-đun mã với mã CSS
Thêm một mô-đun mã vào dòng, chèn mã CSS bên dưới và bạn đã hoàn tất!
<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>
khảo sát
Bây giờ tất cả các bước đã được thực hiện, chúng ta hãy nhìn lại lần cuối những gì đã xảy ra với các kích thước màn hình khác nhau.
cuối cùng suy nghĩ
Trong bài viết này, chúng tôi đã chỉ cho bạn cách giữ các mô-đun cố định trong vùng chứa cột của chúng. Sử dụng kỹ thuật này có thể tạo ra các hiệu ứng cuộn tuyệt đẹp cho phép bạn làm nổi bật các lời gọi hành động khác nhau trên trang của mình. Bạn cũng có thể tải xuống tệp JSON miễn phí! Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.