DIVI có rất nhiều khả năng tạo hoạt ảnh để mang lại sự năng động cho trang web. Tuy nhiên, bạn chỉ có thể thêm các hoạt ảnh này một lần vào vùng chứa. Nếu đối với một số hoạt ảnh nào đó, nó đủ hoàn hảo, đúng lúc, bạn có thể nhanh chóng nhận thấy điều đó bị hạn chế. Ví dụ: đôi khi, bạn có thể muốn thêm nhiều hoạt ảnh văn bản và đó là nội dung chúng tôi sẽ đề cập hôm nay bằng cách sử dụng mô-đun văn bản, Letterize.js & Animate.js, là các thư viện javascript cung cấp hoạt ảnh CSS cho các phần tử DOM. Với cách tiếp cận đó, bạn sẽ có thể tạo hoạt ảnh như vậy bằng bất kỳ mô-đun Divi nào khác.
Bắt đầu nào.
Kết quả cuối cùng có thể
Đây là kết quả có thể đạt được ở cuối hướng dẫn.
1. Tạo thiết kế phần anh hùng
Chúng ta sẽ bắt đầu bằng cách tạo một phần lớn cũng có tên là "Phần anh hùng" và thêm một phần duy nhất vào đó.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờThêm phần mới
khoảng cách
Bắt đầu bằng cách tạo một trang mới. Bên trong trang đó, thêm một phần mới. Mở cài đặt phần và sửa đổi phần đệm trên và dưới như sau:
- Khoảng đệm trên cùng: 180px (Máy tính để bàn), 100px (Máy tính bảng), 50px (Điện thoại)
- Đệm dưới: 180px (Máy tính để bàn), 100px (Máy tính bảng), 50px (Điện thoại)
Thêm một hàng
Cấu trúc cột đơn
Tiến hành bằng cách thêm một hàng mới bằng cấu trúc cột sau:
Định cấu hình khoảng cách
Bây giờ chúng tôi sẽ không thêm bất kỳ mô-đun nào mà thay vào đó, hãy xác định cài đặt phần đệm.
- Đệm dưới cùng: 0px
Thêm mô-đun văn bản vào cột đầu tiên
Thêm bản sao H1
Mô-đun duy nhất chúng tôi sẽ thêm vào hàng này là Mô-đun văn bản. Thêm một số nội dung H1 theo lựa chọn của bạn.
Cài đặt văn bản H1
Chuyển sang tab thiết kế mô-đun và hãy thay đổi các cài đặt văn bản sau:
- Phông chữ tiêu đề: Montserrat
- Màu văn bản tiêu đề: rgba(232,232,232,0,41)
- Kích thước văn bản tiêu đề: 80px (Máy tính để bàn), 50px (Máy tính bảng), 40px (Điện thoại)
- Khoảng cách giữa các chữ cái tiêu đề: -10px (Máy tính để bàn), -4px (Máy tính bảng), -3px (Điện thoại)
- Chiều cao dòng tiêu đề: 0,6em (Máy tính để bàn), 0,7em (Máy tính bảng), 0,8em (Điện thoại)
Thêm hàng thứ hai
Cấu trúc cột
Hãy thêm một hàng khác ngay bên dưới hàng trước với cấu trúc cột sau:
Định cỡ
Mở cài đặt hàng và thay đổi độ rộng tối đa trong cài đặt kích thước.
- Chiều rộng tối đa: 1680px
khoảng cách
Tiếp theo, loại bỏ tất cả lề dưới và phần đệm.
- Lề dưới: 0px
- Đệm dưới cùng: 0px
Thêm mô-đun hình ảnh vào cột thứ hai
Tải lên một hình minh họa
Sau đó, hãy thêm Mô-đun hình ảnh và tải lên hình minh họa mà bạn chọn. Điều đó sẽ trông giống như một hình minh họa nền.
Định cỡ
Bây giờ hãy chuyển sang tab thiết kế của mô-đun và buộc toàn bộ chiều rộng trên hình ảnh.
- Buộc toàn bộ băng thông: Có
khoảng cách
Thêm một số lề dưới âm tiếp theo.
- Ký quỹ dưới cùng: -12%
Hoạt hình
Hãy hoàn tất cài đặt mô-đun bằng cách thêm các cài đặt hoạt ảnh sau:
- Phong cách hoạt hình: Fade
- Độ trễ hoạt ảnh: 3000ms
Thêm hàng thứ ba
Xác định cấu trúc cột
Ở hàng tiếp theo và cuối cùng. Sử dụng cấu trúc cột sau:
khoảng cách
Chuyển sang tab thiết kế của hàng và thêm một số giá trị đệm tùy chỉnh.
- Phần đệm trên cùng: 10%
- Đệm đáy: 5%
- Phần đệm bên trái: 3%
- Đệm bên phải: 3%
Bóng hộp
Sau đó, chọn một bóng hộp tinh tế.
- Độ mạnh của Box Shadow Blur: 80px
- Màu bóng: rgba(0,0,0,0,06)
Hoạt hình
Và hoàn tất cài đặt hàng bằng cách thêm hoạt ảnh sau:
- Phong cách hoạt hình: Fade
- Độ trễ hoạt ảnh: 3000ms
Thêm mô-đun văn bản vào hàng thứ ba
Cung cấp nội dung
Chúng ta đừng thêm mô-đun. Mô-đun đầu tiên chúng ta cần là Mô-đun văn bản có một số nội dung.
Cài đặt văn bản
Chuyển sang tab thiết kế của mô-đun và sửa đổi cài đặt văn bản cho phù hợp:
- Phông chữ văn bản: Lato
- Kích thước văn bản: 18px
- Khoảng cách chữ cái văn bản: 1px
- Chiều cao dòng văn bản: 2,7em
Thêm mô-đun nút vào cột
Cung cấp văn bản
Mô-đun cuối cùng chúng ta cần là Mô-đun Nút. Nhập văn bản bạn chọn.
Cài đặt nút
Chuyển sang tab thiết kế của mô-đun và thay đổi cài đặt nút như sau:
- Sử dụng kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 16px
- Màu văn bản nút: #171cff
- Độ rộng viền nút: 0px
- Bán kính viền nút: 0px
- Phông chữ nút: Montserrat
- Kiểu phông chữ nút: Chữ hoa
khoảng cách
Sau đó, áp dụng các giá trị đệm sau bên trong cài đặt khoảng cách:
- Phần đệm trên cùng: 2%
- Đệm dưới cùng: 2%
- Phần đệm bên trái: 5%
- Đệm bên phải: 5%
Bóng hộp
Hoàn tất cài đặt mô-đun bằng cách thêm bóng hộp sau:
- Vị trí dọc của bóng hộp: 5px
- Độ mạnh lan truyền của bóng hộp: -2px
- Màu bóng: #171cff
2. Thêm lớp CSS vào tiêu đề
Mở mô-đun văn bản đầu tiên và nhấp vào tab văn bản
Bây giờ chúng ta đã có sẵn tất cả các yếu tố thiết kế, đã đến lúc thêm hoạt ảnh văn bản nâng cao vào dòng tiêu đề của chúng ta. Mở Mô-đun văn bản chứa bản sao H1 và chọn tab văn bản.
Thêm thuộc tính ID vào Thẻ H1
Bên trong H1 thêm thuộc tính ID tùy chỉnh.
- ID="tiêu đề-sao chép"
3. Thêm thư viện Letterize & Anime
Thêm mô-đun mã vào cột
Để tạo hoạt ảnh, chúng tôi sử dụng thư viện letterize.js và anime.js. Để thêm các thư viện này, hãy chèn Mô-đun mã mới vào cột ở hàng cuối cùng của bạn.
Bao gồm cả hai thư viện
Sau đó, thêm hai thẻ tập lệnh khác nhau chứa các nguồn sau sẽ dẫn trở lại thư viện:
- <script src=”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”></script>
- <script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>
4. Thêm mã hoạt hình
Hoạt hình cho Thư ở cấp độ cá nhân
Đối với phần cuối cùng của hướng dẫn này, chúng ta sẽ thêm mã hoạt ảnh và nó sẽ hoạt động cho cả thư viện letterize.js và anime.js. Để đạt được hiệu ứng đẹp mắt trên văn bản, chúng ta sẽ áp dụng hai loại hoạt ảnh. Hoạt ảnh đầu tiên được áp dụng cho từng chữ cái riêng lẻ và liên tiếp. Điều này đạt được nhờ thư viện letterize.js. Thư viện này, kết hợp với phần đầu tiên của mã bên dưới, đặt mỗi chữ cái trong bản sao của bạn vào trong một khoảng riêng biệt. Sau đó, các khoảng này sẽ được nhắm mục tiêu riêng biệt trong suốt quá trình hoạt ảnh. Đảm bảo bạn đặt mã bên dưới vào giữa các thẻ tập lệnh.
jQuery(function ($) {
$(document).ready(function () {
var headlineCopy = new Letterize({
targets: "#headline-copy"
});
var animation = anime.timeline({
targets: headlineCopy.listAll(),
delay: anime.stagger(20),
loop: false
});
animation.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
}).add({
color: '#00FFF7',
}).add({
color: '#D2BEFB',
}).add({
color: '#171cff',
});
});
});Mỗi chức năng "thêm" đại diện cho một hoạt ảnh trong dòng thời gian của hoạt ảnh. Những hình ảnh động này áp dụng cho từng chữ cái một cách riêng biệt. Bạn có thể sửa đổi các hàm thêm này theo ý muốn theo API Letterize , thêm hàm mới hoặc xóa hàm hiện tại, chỉ cần đảm bảo rằng hàm thêm cuối cùng được đóng đúng cách bằng dấu ';' ở cuối (như bạn có thể thấy trong đoạn mã trên).
Bạn có thể thêm các thuộc tính CSS khác nhau bên trong các hàm "thêm" này. Bạn có thể tìm hiểu thêm về các thuộc tính và cách chúng được sử dụng trong các ví dụ về tài liệu anime.js .
Trong hướng dẫn này, chúng tôi đã chủ ý thêm nhiều hoạt ảnh để hiển thị cách dòng thời gian hoạt động, nhưng bạn có thể muốn sử dụng thứ gì đó tinh tế hơn hoặc ngắn hơn cho các dự án của riêng mình.
Hoạt hình cho câu
Sau khi bạn đã thêm phần đầu tiên của hoạt ảnh, nhắm mục tiêu từng chữ cái riêng lẻ, chúng ta sẽ chuyển sang phần thứ hai của hoạt ảnh. Phần này nhắm mục tiêu toàn bộ bản sao. Cách tiếp cận hoạt hình cũng giống như trên; chúng tôi đang đặt toàn bộ mô-đun bên trong hoạt ảnh dòng thời gian. Mỗi chức năng thêm đại diện cho một hoạt ảnh khác nhau bên trong dòng thời gian đó. Bạn có thể sửa đổi các chức năng thêm này, thêm chức năng mới hoặc xóa chức năng hiện tại. Đảm bảo bạn đặt mã mới này trước khi kết thúc mã tập lệnh như bạn có thể thấy trong màn hình in bên dưới.
anime.timeline({loop: false}).add({targets: '#headline-copy',lineHeight: '1em',delay: '1500'}).add({targets: '#headline-copy',translateX: ['-5%', 0],letterSpacing: '-2px',});
Thêm CSS tùy chỉnh cho Span
Bây giờ, vì chúng ta đã tạo một span riêng cho từng chữ cái nên chúng ta cần thay đổi thuộc tính hiển thị của từng span để cho phép các chữ cái xuất hiện cạnh nhau. Để làm điều đó, chúng tôi sẽ thêm một số mã CSS vào mô-đun mã của mình. Đảm bảo bạn đặt mã ở giữa các thẻ kiểu.
#headline-copy span {display: inline-block;}
Xem trước lần cuối
Bây giờ chúng ta đã thực hiện xong tất cả các bước, hãy cùng xem kết quả lần cuối trên các kích thước màn hình khác nhau.
suy nghĩ cuối cùng
Vì vậy, trong suốt bài đăng này, chúng tôi đã chỉ cho bạn cách tạo hoạt ảnh văn bản cho dòng tiêu đề của bạn. Chúng tôi đã xây dựng toàn bộ thiết kế bên trong Divi và kết hợp khung với thư viện letterize.js và anime.js . Bạn sẽ thử nghiệm hoạt ảnh này trên blog của mình chứ? Bạn có hình ảnh động nào khác để chia sẻ với chúng tôi không? Hãy cho chúng tôi biết.
