Nếu bạn đang tìm cách tạo hoạt ảnh mượt mà với các hiệu ứng cuộn được tích hợp sẵn của Divi, bạn sẽ thích hướng dẫn này. Chúng tôi sẽ chỉ cho bạn cách kết hợp snap cuộn với các hiệu ứng chuyển động tích hợp của Divi để tạo ra các phần có chiều cao đầy đủ mà bạn có thể cuộn qua một lượt.
Chúng ta sẽ bắt đầu bằng cách tạo phần đầu tiên. Do đó, chúng tôi sẽ sử dụng lại phần này trong suốt quá trình thiết kế trang của chúng tôi. Để bật tính năng chụp nhanh, chúng tôi sẽ sử dụng các thuộc tính chụp nhanh cuộn CSS mà chúng tôi sẽ gán cho các phần, HTML, đầu trang và chân trang của trang của chúng tôi.
Kết quả có thể
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh kết quả trên các kích thước màn hình khác nhau.
1. Tạo một trang mới và bắt đầu thiết kế phần đầu tiên
Thêm một trang mới và chuyển sang Visual Builder
Bắt đầu bằng cách thêm một trang mới. Nhập tiêu đề trang, xuất bản trang và chuyển sang Visual Builder.
Cài đặt phần
kích thước
Khi vào trong trang mới, hãy mở phần đã có ở đó và thay đổi cài đặt định cỡ.
- Chiều cao tối thiểu: 100vh
Yếu tố chính
Chúng tôi cũng thêm hai dòng mã CSS vào phần này. Những dòng mã CSS này sẽ giúp chúng ta biến phần này thành một điểm chụp nhanh cho thao tác cuộn.
scroll-snap-align: start; scroll-snap-stop: bình thường;
tầm nhìn
Để đảm bảo không có gì nằm ngoài phần chứa, chúng tôi sẽ ẩn phần tràn.
- Tràn ngang: ẩn
- Tràn dọc: ẩn
Thêm dòng số 1
Cấu trúc cột
Tiếp tục thêm một dòng mới vào phần bằng cấu trúc cột sau:
kích thước
Chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và sửa đổi kích thước như sau:
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
Khoảng cách
Chúng tôi cũng đang xóa phần đệm trên cùng và dưới cùng của phần.
- Đệm hàng đầu: 0px
- Đệm dưới: 0px
Chức vụ
Và chúng tôi sẽ định vị lại hàng cho phù hợp:
- Vị trí: Tuyệt đối
- Địa điểm: Trung tâm dưới cùng
Thêm mô-đun văn bản vào cột
Để trống hộp nội dung
Mô-đun duy nhất chúng ta cần trong hàng này là Mô-đun văn bản. Hãy chắc chắn rằng bạn để trống hộp nội dung của mô-đun.
Màu nền
Sau đó, thay đổi màu nền.
- Màu nền: # ffee00
Cài đặt văn bản
Chúng tôi cũng sẽ loại bỏ chiều cao dòng văn bản của mô-đun.
- Chiều cao dòng văn bản: 1em
Sizing
Sau đó, chúng tôi sẽ chuyển đến cài đặt kích thước và thay đổi chiều rộng.
- Chiều rộng: 30%
Khoảng cách
Chúng ta sẽ biến mô-đun thành một hình vuông bằng cách thêm một số phần đệm trên cùng.
- Đệm hàng đầu: 30%
Thêm hàng số 2
Cấu trúc cột
Trên dòng tiếp theo. Sử dụ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à thay đổi cài đặt định cỡ trong tab thiết kế:
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Chiều rộng: 60vw
- Chiều rộng tối đa: 100%
khoảng cách
Sau đó, thêm lề trên tùy chỉnh trên các kích thước màn hình khác nhau.
- Lề trên: 20vh (máy tính để bàn), 5vw (máy tính bảng và điện thoại)
Khoảng cách cột 2
Sau đó, chúng tôi sẽ mở các cài đặt trong cột 2 và thêm các giá trị điền tùy chỉnh.
- Phần đệm trên: 2vh (máy tính bảng và điện thoại)
- Đệm trái: 2vw
- Đệm phải: 2vw
Thêm mô-đun hình ảnh vào cột 1
Tải lên ảnh
Đã đến lúc thêm mod, thêm mod hình ảnh vào cột 1 và tải lên hình ảnh bạn chọn.
kích thước
Sau đó chúng tôi sẽ buộc toàn bộ chiều rộng trên mô-đun.
- Buộc toàn bộ chiều rộng: Có
Thêm mô-đun văn bản # 1 vào cột 2
Thêm nội dung H2
Trong cột thứ hai, mô-đun đầu tiên chúng ta cần là mô-đun văn bản có nội dung H2
Cài đặt văn bản H2
Chuyển đến tab thiết kế mô-đun và thay đổi cài đặt văn bản H2 như sau:
- Phông chữ 2: Anton
- Mục 2 Kích thước văn bản: 5vw (máy tính để bàn), 7vw (máy tính bảng), 9vw (điện thoại)
Thêm mô-đun văn bản # 2 vào cột 2
Thêm nội dung
Thêm một mô-đun văn bản khác ngay bên dưới mô-đun văn bản trước đó và chèn nội dung mô tả mà bạn lựa chọn.
Cài đặt văn bản
Thay đổi cài đặt văn bản của mô-đun như sau:
- Phông chữ: Mở Sans
- Kích thước văn bản: 0.8vw (máy tính để bàn), 2vw (máy tính bảng), 2.5vw (điện thoại)
- Chiều cao dòng văn bản: 1,8 em
khoảng cách
Và thêm lề trên và dưới tùy chỉnh vào cài đặt giãn cách.
- Lề trên: 2vw
- Lề dưới: 2vw
Thêm một mô-đun nút vào cột 2
Thêm một bản sao
Mô-đun tiếp theo và cuối cùng chúng ta cần trong cột này là mô-đun nút. Thêm một bản sao của sự lựa chọn của bạn.
Cài đặt nút
Kiểu nút phù hợp:
- 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: # 333333
- Màu viền nút: # 333333
- Bán kính nút: 1px
- Phông chữ: Anton
- Kiểu Phông chữ: Chữ hoa
khoảng cách
Và hoàn thành cài đặt mô-đun bằng cách thêm giá trị tùy chỉnh dựa trên kích thước màn hình.
- Ký quỹ nội bộ cao: 1vw (Máy tính để bàn), 2vw (Máy tính bảng), 3vw (Điện thoại)
- Tỷ lệ ký quỹ nội bộ thấp: 1vw (Máy tính để bàn), 2vw (Máy tính bảng), 3vw (Điện thoại)
- Ký quỹ nội bộ bên trái: 3vw (Máy tính để bàn), 5vw (Máy tính bảng), 7vw (Điện thoại)
- Ký quỹ Internet phải: 3vw (Máy tính để bàn), 5vw (Máy tính bảng), 7vw (Điện thoại)
2. Thêm hiệu ứng cuộn cho các yếu tố khác nhau
Mô-đun văn bản trong dòng # 1
Hoạt hình dọc
Khi tất cả các yếu tố đã sẵn sàng, đã đến lúc thêm các hiệu ứng cuộn. Mở Mô-đun văn bản trong hàng đầu tiên của bạn và sử dụng một số chuyển động dọc.
- Kích hoạt chuyển động dọc: Có
- Bắt đầu bù đắp: 4
- Bù đắp giữa: 0
- Kết thúc bù đắp: -4
- Kích hoạt hiệu ứng chuyển động: Giữa các yếu tố
Dòng 2
Cột 1
Hoạt hình ngang
Sau đó mở cột đầu tiên của hàng thứ hai của bạn và thêm một chuyển động ngang.
- Kích hoạt chuyển động ngang: Có
- Bắt đầu bù: -3
- Độ lệch trung bình: 0 (từ 40% đến 60%)
- Kết thúc bù: -3
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
Mất dần trong và ngoài
Chúng tôi cũng áp dụng hiệu ứng mờ dần và mờ dần cho cùng một cột đó.
- Kích hoạt mờ dần trong và ngoài: Có
- Độ mờ ban đầu: 0%
- Độ mờ trung bình: 100%
- Độ mờ kết thúc: 100%
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
Cột 2
Chuyển động ngang
Sau đó, chúng tôi sẽ mở các tham số của cột thứ hai và áp dụng các tham số chuyển động ngang sau đây:
- Kích hoạt chuyển động ngang: Có
- Bắt đầu bù: 3
- Độ lệch trung bình: 0 (từ 40% đến 60%)
- Kết thúc bù: 3
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
Mất dần trong và ngoài
Với một hiệu ứng mờ dần đến và đi.
- Kích hoạt mờ dần trong và ngoài: Có
- Độ mờ ban đầu: 0%
- Độ mờ trung bình: 100%
- Độ mờ kết thúc: 100%
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
4. Sử dụng lại phần đầu tiên
Bản sao phần bốn lần
Khi bạn đã hoàn thành phần đầu tiên và các hiệu ứng cuộn của nó, bạn có thể sao chép nó bao nhiêu lần tùy thích.
Thay đổi màu nền của tất cả các phần khác
Chúng tôi sẽ thay đổi màu nền của tất cả các phần khác.
- Màu nền: # 111111
5. Thêm mã CSS để cho phép chụp cuộn trên trang HTML
Thêm một mô-đun mã vào phần cuối của trang
Bây giờ để kích hoạt tính năng chụp cuộn trên HTML của trang, chúng tôi sẽ thêm một mô-đun mã vào bất kỳ đâu trong phần cuối cùng của trang.
Chèn mã CSS HTML
Những dòng mã CSS này sẽ giúp chúng tôi áp dụng căn chỉnh cuộn cho mã HTML của trang:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Thêm Scroll Snapping Start vào Header và Footer
Chúng tôi sẽ đảm bảo rằng đầu trang và chân trang của chúng tôi cũng là các điểm chụp cuộn (giống như các phần của chúng tôi) bằng cách thêm các dòng mã CSS sau:
tiêu đề, chân trang {scroll-snap-align: start;}
để thúc
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách tạo hoạt ảnh mượt mà bằng cách kết hợp thao tác cuộn với các hiệu ứng chuyển động tích hợp của Divi. Đó là một cách tuyệt vời để kích hoạt các hiệu ứng cuộn chỉ với một lần cuộn.
Chụp cuộn giúp khách để dễ dàng duyệt các phần khác nhau của bạn Website. Chúng tôi đã kết hợp nó với thiết kế phần chiều cao đầy đủ. 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 ý kiến trong phần bình luận bên dưới.
