Hôm nay, chúng tôi đã được thông báo về một bản cập nhật mới trên Divi cung cấp cái gọi là hiệu ứng hoạt hình cuộn. Chúng tôi đã xem xét nó và trong hướng dẫn này, chúng tôi sẽ tóm tắt những gì bạn nên mong đợi.
Chúng ta hãy bắt đầu.
Các hiệu ứng cuộn là gì?
Hiệu ứng cuộn là hoạt ảnh có thể tùy chỉnh phản ứng với khách khi họ cuộn lên và xuống trang. Không giống như hoạt ảnh truyền thống, hiệu ứng cuộn liên quan trực tiếp đến hành vi cuộn của bạn. khách thăm quan. Tốc độ và hướng của hoạt ảnh dựa trên tốc độ và hướng cuộn của khách thăm quan. Dòng thời gian hoạt ảnh dựa trên vị trí của phần tử trong cửa sổ trình duyệt.
Nghe có vẻ phức tạp, nhưng với Divi, nó khá đơn giản
Bất kỳ phần tử nào cũng có thể được tạo hoạt ảnh bằng cách sử dụng kết hợp các hiệu ứng tỷ lệ, xoay, chuyển động ngang và dọc, độ mờ và hiệu ứng làm mờ. Bạn kiểm soát cường độ của từng hiệu ứng tại các điểm khác nhau trong hoạt ảnh, sau đó Divi đảm nhiệm phần còn lại, tạo ra những chuyển tiếp đẹp mắt khi các phần tử này đi vào và di chuyển trong chế độ xem của bạn. khách thăm quan. Tạo các hoạt ảnh đơn giản để tăng thêm chiều sâu và sự tinh tế tinh tế hoặc kết hợp các hiệu ứng và tạo hoạt ảnh cho nhiều yếu tố để tạo ra các hoạt động bùng nổ ngoạn mục sẽ làm bạn kinh ngạc. khách!
6 hiệu ứng mới độc đáo
Hiệu ứng có sẵn để lựa chọn hoặc kết hợp. Divi đi kèm với sáu hiệu ứng cuộn khác nhau, mỗi hiệu ứng có thể được tùy chỉnh riêng bằng cách sử dụng giao diện người dùng hiệu ứng cuộn mới của chúng tôi. Bạn cũng có thể kết hợp bất kỳ hiệu ứng nào để tạo ra các hoạt ảnh phức tạp hơn.
Chuyển động thẳng đứng
Hiệu ứng chuyển động dọc cho phép bất kỳ phần tử nào di chuyển lên và xuống trang tùy thuộc vào tốc độ và hướng cuộn của khách truy cập. Kết quả là một hiệu ứng thị sai! Giờ đây, mọi thứ đều có thể được sử dụng để tạo hiệu ứng thị sai với Divi. Bạn thậm chí có thể kết hợp chuyển động dọc với hình nền thị sai để tạo ra một số thiết kế thực sự ấn tượng.
Chuyển động ngang
Hiệu ứng di chuyển ngang tương tự như hiệu ứng di chuyển dọc, chỉ khác là nó cho phép di chuyển các mục từ trái sang phải trên màn hình tùy thuộc vào hướng và tốc độ di chuyển của khách truy cập. . Bạn thậm chí có thể kết hợp chuyển động dọc và ngang, cho phép bạn kiểm soát hoàn toàn chuyển động của bất kỳ phần tử nào!
Bối cảnh mờ
Hiệu ứng làm mờ sẽ đưa các phần tử vào và mất nét tùy thuộc vào tốc độ và hướng di chuyển của khách truy cập. Vì Divi cho phép bạn kiểm soát các giá trị mờ đầu, giữa và cuối, bạn có thể đưa các yếu tố vào tiêu điểm ngay khi chúng ở trước mắt khách truy cập. Đó là một cách tuyệt vời để thu hút sự chú ý đến thông tin quan trọng.
nấu chảy
Hiệu ứng mờ dần với các phần tử mờ dần trong và ngoài tùy thuộc vào tốc độ và hướng cuộn của khách truy cập. Bạn có thể pha trộn các phần tử, làm cho chúng biến mất hoặc cả hai. Sự kết hợp của mờ dần, mờ và tỷ lệ có thể tạo ra một số hoạt ảnh thực sự tinh vi bổ sung thêm yếu tố "nó" cho thiết kế của bạn.
Hiệu ứng mở rộng quy mô
Hiệu ứng tỷ lệ sẽ tăng hoặc giảm kích thước của bất kỳ mục nào dựa trên tốc độ và hướng cuộn của khách truy cập. Nếu bạn muốn thu hút sự chú ý vào một phần tử cụ thể, chẳng hạn như lời kêu gọi hành động, bạn có thể đặt hiệu ứng tỷ lệ để tăng kích thước của phần tử khi nó đến gần tâm khung hơn. cửa sổ. Tất nhiên, cũng có nhiều khả năng khác!
Hiệu ứng xoay
Hiệu ứng xoay với việc xoay một mục theo một trong hai hướng dựa trên tốc độ và hướng cuộn của khách truy cập. Sự quay tinh tế thực sự có thể mang lại những cảnh sống động. Chỉ cần xoay một chút khi kết hợp với chuyển động ngang có thể trông rất tuyệt! Hoặc để các phần tử chuyển động thành vòng tròn.
Giao diện trực quan mới
Vẻ đẹp thực sự của các hiệu ứng cuộn của Divi là sự dễ sử dụng của chúng! Có một giao diện người dùng mới giúp đơn giản hóa quá trình tạo ảnh động web để mọi người có thể truy cập chúng. Chỉ với một cú nhấp chuột, bạn có thể thêm hoặc kết hợp một trong sáu hiệu ứng cuộn của Divi. Ngay khi ra khỏi hộp, chúng sẽ trông rất tuyệt! Sau đó, bạn có thể tinh chỉnh các hiệu ứng để tạo ra các hoạt ảnh nâng cao hơn nữa.
Một cú nhấp chuột và thế là xong!
Bạn muốn thêm hiệu ứng cuộn vào mô-đun? Một cú nhấp chuột sẽ thêm hiệu ứng và nó trông cũng rất tuyệt! Để thêm hiệu ứng cuộn, chỉ cần truy cập nhóm tùy chọn Hiệu ứng cuộn mới trong tab Nâng cao của bất kỳ mô-đun, hàng, cột hoặc phần nào. Nhiều hiệu ứng có thể được kích hoạt cùng lúc và các hiệu ứng sẽ được kết hợp thành một hoạt ảnh mượt mà biến đổi đẹp mắt khi bạn cuộn.
Bạn có muốn toàn quyền kiểm soát? bạn có nó !
Khi bạn kích hoạt hiệu ứng cuộn, bạn có toàn quyền kiểm soát độ lớn của hiệu ứng tại mỗi điểm trong hoạt ảnh. Bằng cách kiểm soát các giá trị bắt đầu, giữa và cuối, bạn kiểm soát làm gì hoạt hình. Sau khi các giá trị được đặt, Divi sẽ xử lý phần còn lại và sẽ chuyển đổi phần tử khi nó di chuyển xung quanh trong cửa sổ trình duyệt, tạo ra một hoạt ảnh.
- Giá trị khởi điểm - Trạng thái của hoạt ảnh bắt đầu được sử dụng khi phần tử nhập vào cuối cửa sổ trình duyệt.
- Giá trị trung gian - Trạng thái hoạt ảnh trung gian sẽ được chuyển khi phần tử di chuyển đến giữa cửa sổ.
- Giá trị cuối - Trạng thái hoạt ảnh kết thúc xảy ra khi mục rời khỏi cửa sổ trình duyệt ở đầu màn hình.
Ví dụ: hiệu ứng độ mờ với giá trị bắt đầu là 0 (vô hình), giá trị trung bình là 100 (hiển thị hoàn toàn) và giá trị kết thúc bằng 0 (ẩn), sẽ thay đổi từ trạng thái ẩn khi nó đi vào cho đến khi nó hiển thị 100% ở giữa cửa sổ, sau đó nó sẽ biến mất ở trạng thái vô hình khi thoát khỏi cửa sổ.
Điều chỉnh dòng thời gian hoạt ảnh
Bạn không chỉ có thể điều chỉnh các giá trị hoạt ảnh mà còn có thể điều chỉnh dòng thời gian hoạt ảnh. Giao diện người dùng dòng thời gian biểu thị chiều cao của cửa sổ trình duyệt. Mỗi khung hình ảnh động có thể được kích hoạt ở một vị trí khác nhau trong khung nhìn. Điều này cho phép bạn kiểm soát thời gian bắt đầu, kết thúc và thời gian của hoạt ảnh dựa trên vị trí của phần tử hoạt ảnh trong trục y của cửa sổ trình duyệt.
- Bắt đầu vị trí khung hình chính - Tùy chọn này kiểm soát thời gian bắt đầu hoạt ảnh. Nếu bạn muốn trì hoãn hoạt ảnh, hãy kéo vị trí của khung hình chính bắt đầu vào trong.
- Vị trí khung hình chính giữa - Điều này kiểm soát điểm mà tại đó hoạt ảnh đạt đến giá trị hoạt ảnh trung tâm của nó. Nó không nhất thiết phải chính xác ở giữa dòng thời gian hoạt ảnh. Bạn có thể di chuyển khung hình chính giữa đến bất kỳ vị trí nào trong cửa sổ.
- Vị trí cuối khung hình chính - Điều khiển này được sử dụng để kết thúc hoạt ảnh. Nếu bạn muốn hoạt ảnh kết thúc trước khi clip thoát khỏi cửa sổ trình duyệt, bạn có thể kéo vị trí khung hình chính kết thúc vào trong.
Thêm trạng thái tĩnh vào bất kỳ hoạt ảnh nào
Bạn cũng có thể thêm các khoảng tạm dừng vào hoạt ảnh của mình bằng cách tăng thời lượng của giá trị hiệu ứng tĩnh giữa. Để tạo thời lượng hoạt ảnh tĩnh, hãy nhấp vào hai mũi tên khi bạn di chuột qua khung hình chính giữa. Sau đó, bạn có thể mở rộng khung hình chính giữa bằng cách kéo các cạnh của nó qua lại. Trong thời điểm này trong hoạt ảnh, phần tử sẽ vẫn ở trạng thái tĩnh. Sau khi thời lượng tĩnh kết thúc, hoạt ảnh sẽ tiếp tục chuyển sang giá trị cuối cùng của nó.
Bạn nghĩ gì về những tính năng mới này? Đừng ngần ngại chia sẻ ý kiến của bạn trong phần bình luận.
