Tạo hiệu ứng cuộn bằng cách sử dụng Phần phân cách là một kỹ thuật đơn giản và thú vị có thể thêm sức sống cho Website sử dụng theme WordPress Divi. Bộ chia phần tiếp tục là một yếu tố thiết kế linh hoạt, hữu ích để tăng thêm chút sáng tạo cho quá trình chuyển tiếp của bạn. nội dung de trang.
Nhưng với hiệu ứng cuộn của Divi, việc chia phần càng trở nên thú vị hơn! Bí quyết là tách biệt một phần dành riêng cho phong cách lựa chọn của dải phân cách. Sau đó, bạn có thể thêm tất cả các loại chuyển động do cuộn tạo ra vào phần này để tạo hiệu ứng cuộn đẹp mắt làm nền cho nội dung trang.
Hãy bắt đầu nào!
Kết quả có thể
Dưới đây là tổng quan về các thiết kế mà chúng tôi sẽ có thể đạt được sau khi hoàn thành hướng dẫn này.
Cách tạo bộ chia phần cuộn hoạt hình với Divi
Tạo hai phần nội dung
Thêm một hàng
Để bắt đầu, tạo một hàng với một cột trong phần mặc định.
Phần lề (cho các bài kiểm tra)
Với mục đích thử nghiệm, hãy thêm một lề trên vào phần để chúng ta có thể có chỗ cho việc cuộn. Mở cài đặt phần và thêm phần sau:
- Lề trên: 80vh
Thêm một mô-đun văn bản
Trong hàng của một cột, hãy thêm một mô-đun văn bản mới.
Nội dung của mô-đun văn bản
Bên trong của nội dung của phần thân, thêm tiêu đề H2 sau:
<h2>Section Avec Séparateurs</h2>
Thiết kế mô-đun văn bản
Trong cài đặt thiết kế, cập nhật các thông tin sau:
- Phông chữ: Roboto
- Sắp xếp văn bản: trung tâm
- Mục 2 Màu văn bản: # bae0d8
- Tiêu đề 2 Kích thước văn bản: 80px (máy tính để bàn), 50px (máy tính bảng), 30px (điện thoại)
Thêm phần nội dung thứ hai
Trong phần trước, thêm một phần thông thường mới.
Thêm một hàng
Trong phần mới, thêm một hàng vào một cột.
Thêm một mô-đun văn bản
Sau đó thêm một mô-đun văn bản mới vào dòng.
Thiết kế mô-đun văn bản
Bây giờ chúng ta có thể giữ nội dung đệm mặc định bên trong phần thân. Hãy chuyển sang tab thiết kế và cập nhật những điều sau:
- Phông chữ: Roboto
- Màu văn bản văn bản: #dddddd
- Kích thước văn bản: 16px
- Chiều cao dòng văn bản: 1,5 em
- Căn chỉnh văn bản: bên trái
- Chiều rộng tối đa: 400 px
- Sắp xếp mô-đun: trung tâm
Cài đặt phần
Đảm bảo loại bỏ màu nền mặc định của phần nhưng cung cấp cho nó một nền hoàn toàn trong suốt. Sau đó, chúng ta có thể loại bỏ phần đệm trên cùng và thêm một lề dưới cho mục đích kiểm tra cuộn.
Để thực hiện việc này, hãy mở cài đặt phần và cập nhật các mục sau:
- Màu nền: rgba (0,0,0,0)
- Lề dưới: 80vh
- Đệm: 0px
Tạo phần tách hoạt hình
Khi hai phần nội dung được hoàn thành, chúng tôi sẵn sàng thêm phần cho các phần chia phần hoạt hình của chúng tôi.
Thêm một phần mới
Đi trước và tạo một phần thông thường mới ở giữa hai phần nội dung.
Bối cảnh của phần
Và một lần nữa, hãy xóa màu nền mặc định của phần, nhưng cập nhật những điều sau:
- Màu nền: rgba (0,0,0,0)
Thiết kế vách ngăn
Đừng lo lắng, chúng tôi sẽ tạo màu nền của chúng tôi bằng các vạch chia phần. Để thực hiện việc này, hãy nhấp vào tab thiết kế và thêm một dải phân cách trên và dưới vào phần như sau:
Thiết kế vách ngăn cao cấp
- Kiểu dải phân cách trên cùng: xem ảnh chụp màn hình
- Màu của dải phân cách trên: # 524fbf
- Chiều cao của dải phân cách trên: 20vw
- Sự lặp lại theo chiều ngang của dải phân cách trên: 0,6x
- Lật của dải phân cách trên: ngang
Thiết kế vách ngăn dưới
- Kiểu dải phân cách dưới cùng: xem ảnh chụp màn hình
- Màu phân cách dưới: # 524fbf
- Chiều cao của dải phân cách dưới: 20vw
- Sự lặp lại theo chiều ngang của dải phân cách dưới: 0,5x
- Độ phân chia dưới: ngang và dọc
Phần chiều cao và phần đệm
Vì phần này hoàn toàn dành cho thiết kế dải phân cách, chúng ta có thể loại bỏ chiều cao và phần đệm để chỉ hiển thị kiểu dáng của dải phân cách và không có khoảng trống không cần thiết giữa hai phần nội dung. Cập nhật thông tin sau:
- Chiều cao: 0px
- Đệm: cao 0px, thấp 0px
Phần hiệu ứng cuộn phân cách
Sau đó cung cấp cho các phần hiệu ứng cuộn sau đây:
Dưới tab Chuyển động ngang ...
- Kích hoạt chuyển động ngang: CÓ
Chúng tôi có thể giữ cài đặt mặc định cho cài đặt này trên giao diện của văn phòng .
Sau đó cập nhật các tham số chuyển động ngang trên máy tính bảng :
- Bắt đầu bù: 3 (ở mức 0% của cửa sổ)
- Độ lệch trung bình: 0 (ở 50% khung nhìn)
- Độ lệch cuối: -3 (ở 100% chế độ xem)
Dưới tab Mở rộng quy mô lên và xuống , cập nhật những điều sau đây trên văn phòng ...
- Tỷ lệ bắt đầu: 200% (ở mức 0% của cửa sổ)
- Tỷ lệ trung bình: 150% (ở 45% -65% khung nhìn)
- Tỷ lệ kết thúc: 150% (ở 100% khung nhìn)
Sau đó, cập nhật hiệu ứng Scaling Up and Down trên máy tính bảng như sau:
- Tỷ lệ bắt đầu: 400% (ở 0% cửa sổ)
- Tỷ lệ trung bình: 300% (ở 45% -65% khung nhìn)
- Tỷ lệ kết thúc: 400% (ở 100% khung nhìn)
Lý do chính mà chúng ta cần điều chỉnh hiệu ứng chuyển động trên máy tính bảng (và điện thoại) là do các giá trị chuyển động ngang sử dụng đơn vị độ dài pixel (tức là 3 = 300 pixel), là tuyệt đối và không điều chỉnh theo chiều rộng của trình duyệt.
Bây giờ hãy xem kết quả cuối cùng của bộ chia phần hoạt hình cuộn của chúng tôi.
cuối cùng suy nghĩ
Tạo hoạt ảnh cho các ngăn chia phần trên cuộn là một cách thú vị và hiệu quả để làm cho một trang web trở nên sống động. Hy vọng điều này mang lại cho bạn một số cảm hứng để tự mình tạo ra nhiều thiết kế sáng tạo hơn nữa.
