Tạo hoạt ảnh cuộn trên nền văn bản là một cách độc đáo để thêm các họa tiết động đầy màu sắc vào văn bản của bạn. Website trong khi người dùng đang cuộn trang. Với Divi, quá trình này dễ dàng một cách đáng ngạc nhiên khi bạn học được một vài kỹ thuật chính.
Trong hướng dẫn này, chúng tôi sẽ chỉ sử dụng sức mạnh của các tham số tích hợp của Divi để tạo ra 3 thiết kế độc đáo có hoạt ảnh cuộn nền văn bản đầy màu sắc. Chúng tôi thậm chí sẽ chỉ cho bạn cách tạo phiên bản tối của mỗi thiết kế để có một cái nhìn hoàn toàn mới.
Hãy bắt đầu!
Kết quả có thể
Đây là một cái nhìn về các thiết kế mà chúng tôi sẽ xây dựng ngày hôm nay.
Thiết kế 1: Đổ dốc nền văn bản với hiệu ứng cuộn ngang
Thiết kế đầu tiên này sẽ có hiệu ứng cuộn ngang làm hoạt ảnh mô-đun phân tách màu đằng sau mô-đun văn bản với bộ lọc màn hình.
Thêm một cột
Để bắt đầu, hãy thêm hàng một cột vào phần mặc định.
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 cột.
Nội dung
vì nội dung cột, dán mã HTML sau vào hộp nội dung:
Định dạng văn bản
Sau đó cập nhật thiết kế văn bản như sau:
- Màu nền: #ffffff
- Kiểu chữ văn bản: TT
- Màu văn bản: # 000000
- Kích thước văn bản: 100 px (máy tính để bàn), 40 px (điện thoại)
- Khoảng cách chữ văn bản: 0.15em
- Chiều cao của dòng văn bản: 1em
- Sắp xếp văn bản: trung tâm
- Phông chữ: Merriweather
- Trọng lượng phông chữ: đậm
- Kiểu chữ tiêu đề: TT
- Căn chỉnh văn bản tiêu đề: Căn giữa
- Màu văn bản tiêu đề: # 000000
- Kích thước văn bản tiêu đề: 200px (Máy tính để bàn), 80px (Điện thoại)
- Khoảng cách tiêu đề thư: 0.15em
- Chiều cao của dòng tiêu đề: 1em
Đệm và bộ lọc
Bây giờ chúng ta cần thêm một số đệm và bộ lọc màn hình vào mô-đun văn bản. Bộ lọc là cần thiết để thiết kế này hoạt động vì nó là thứ cho phép màu nền / mod hiển thị phía sau văn bản.
Để thêm điền và lọc, cập nhật như sau:
- đệm: cao 15px, thấp 20px
- Chế độ hòa trộn: Màn hình
Lưu ý: Chế độ hòa trộn màn hình hoạt động tốt nhất với văn bản màu đen trên nền trắng. Nếu chúng ta muốn sử dụng văn bản màu trắng trên nền đen, chúng ta sẽ sử dụng chế độ hòa trộn Multiply.
Dải phân cách trên và dưới
Khi mô-đun văn bản của chúng tôi hoàn tất, hãy thêm một số dấu phân cách (bên trên và một bên dưới mô-đun văn bản) cho một thành phần thiết kế bổ sung.
Thêm một dấu phân cách thấp hơn
Thêm một mô-đun tách mới dưới mô-đun văn bản.
Cài đặt tách cao hơn
Mở cài đặt dải phân cách và chọn KHÔNG để hiển thị dải phân cách.
Sau đó, cập nhật nền và cung cấp cho bộ chia cùng chế độ hòa trộn như mô-đun văn bản như sau:
- Màu nền bên trái: # 000000
- Màu nền gradient bên phải: #ffffff
- Hướng Gradient: 90deg
- Vị trí bắt đầu: 48%
- Vị trí cuối: 0%
- Chế độ hòa trộn: Màn hình
Sau đó cập nhật chiều cao của dải phân cách trên màn hình điện thoại như sau:
- Chiều cao: 15px (điện thoại)
Thêm dải phân cách trên
Để tạo dải phân cách trên cùng, hãy nhân đôi dải phân cách dưới cùng trước đó và kéo nó lên trên mô-đun văn bản bằng cách sử dụng vùng hiển thị lớp.
Sau đó đảo ngược màu sắc trên nền gradient.
Cập nhật thông số dòng
Khi các dấu phân cách trên và dưới của chúng tôi được đặt đúng chỗ, hãy cập nhật các tham số dòng như sau:
- Độ rộng máng xối: 1 (để loại bỏ lề dưới giữa các mô-đun)
- Chiều rộng tối đa: 600 pixel (để giữ thiết kế mạch lạc trên máy tính để bàn và máy tính bảng)
- Căn chỉnh đường: trung tâm
- Đệm: cao 0px, thấp 0px
- Tràn ngang: ẩn
- Tràn dọc: ẩn
Tạo dấu phân cách cho màu nền của văn bản động
Yếu tố cuối cùng của thiết kế đầu tiên này là dải phân cách mà chúng ta sẽ sử dụng để làm sinh động màu nền của văn bản trên cuộn. Để thực hiện việc này, hãy thêm một mô-đun tách mới bên dưới dải phân cách dưới cùng.
Sau đó chọn KHÔNG để hiển thị dải phân cách.
Cài đặt dải phân cách nền
Cập nhật dấu phân cách với nền gradient như sau:
- Màu nền bên trái: # e02b20
- Màu gradient nền bên phải: # 8300e9
- Hướng Gradient: 90deg
- Vị trí bắt đầu: 30%
- Vị trí cuối: 70%
Chúng tôi muốn chiều cao của dấu phân cách đủ cao để tô màu cho tất cả văn bản của chúng ta trong mô-đun văn bản và các dấu phân cách trên và dưới. Đối với thiết kế này, hãy đặt chiều cao thành 400px.
- Chiều cao: 400px
Sau đó, cung cấp cho bộ chia một vị trí tuyệt đối để định vị nó ngay trên các mô-đun khác. Sử dụng chỉ số Z để đặt dải phân cách phía sau các mô-đun khác.
- Vị trí: Tuyệt đối
- Chỉ số Z: -1
Hiệu ứng cuộn của dải phân cách nền
Với dấu phân cách ở vị trí, tất cả những gì chúng ta phải làm là di chuyển dấu phân cách phía sau văn bản bằng cách sử dụng hiệu ứng cuộn của Divi. Đối với thiết kế này, chúng tôi sẽ chỉ thêm chuyển động ngang trên cuộn.
Cập nhật các mục sau:
Trong tab Di chuyển ngang ...
Văn phòng
- Kích hoạt chuyển động ngang: CÓ
- Bắt đầu bù: 6 (ở mức 20%)
- Độ lệch trung bình: 0 (ở mức 40% -60%)
- Kết thúc bù: -6 (ở mức 80%)
Điện thoại
- Bắt đầu bù: 3
- Kết thúc bù: -3
Ngoài ra, hãy đảm bảo đặt trình kích hoạt cho hiệu ứng chuyển động ở giữa clip:
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
Thêm khoảng cách phần
Để tạo một không gian cuộn tạm thời để kiểm tra thiết kế, hãy thêm phần sau vào phần:
- Ký quỹ: 80vh ở trên, 80vh dưới
cuối cùng suy nghĩ
Các thiết kế hoạt hình nền văn bản được hiển thị trong bài viết này thực sự sẽ hoạt động tốt như một thiết kế tĩnh mà không cần thêm chuyển động trên cuộn. Tuy nhiên, các hiệu ứng cuộn bổ sung thực sự đưa thiết kế lên một tầm cao mới. Hãy thử nghiệm với nhiều màu sắc và hiệu ứng hơn!
Tôi mong muốn được nghe từ bạn trong các ý kiến.
Để sức khỏe của bạn!
