Nghệ thuật kể chuyện có thể đã bắt đầu từ lâu trước khi homo sapiens có thể nói. Nó phát triển với chúng tôi và thích nghi với các công cụ có sẵn. Những câu chuyện được sử dụng để được kể và truyền từ thế hệ này sang thế hệ khác đã chấp nhận sự tiến hóa theo nghĩa đen từ sách viết tay, in ấn hàng loạt, đến xử lý văn bản kỹ thuật số và gần đây là Internet. Từ quan điểm tiến hóa của con người, có vẻ như chúng ta chưa khai thác hết tiềm năng của tất cả các công nghệ hiện có mà chúng ta có ngày nay. Trong khi video đã bắt đầu chiến dịch thống trị thế giới ảo của họ, phần lớn nội dung của trang web vẫn ở dạng văn bản.

Nội dung web hiện đại phải tương tác và kết hợp nhiều phương tiện khác nhau cùng với văn bản thuần túy tốt. Một số công cụ có thể giúp chúng tôi làm nổi bật cách kể chuyện của chúng tôi lên một vài bậc. Và nếu bạn là người dùng WordPress, bạn có thể sử dụng Animate It! plugin để thêm hoạt ảnh CSS3 thú vị vào nội dung của bạn.

Khả năng là gì?

Cùng với HTML5, CSS3 là từ viết tắt liên quan đến thiết kế web hiện đại. Tóm lại, CSS là thành phần web cho phép người dùng kiểm soát sự xuất hiện của trang web như bố cục, vị trí, phông chữ, màu sắc, v.v., hiện thân mới nhất của nó, CSS3, đủ thông minh để cho phép người dùng tạo hình ảnh và hoạt ảnh bằng mã.

May mắn thay, bạn không phải là một coder để sử dụng CSS3 trên trang WordPress của bạn. Animate It! plugin cho phép bạn áp dụng hiệu ứng CSS3 cho Bài đăng, Tiện ích và Trang bằng cách nhấp vào nút trong trình chỉnh sửa. Bên cạnh đó, người dùng có thể kiểm soát các trình kích hoạt. Ví dụ: họ có thể áp dụng hoạt ảnh khi cuộn, nhấp và di chuột và thêm chênh lệch cuộn khác trên các khối hoạt ảnh riêng lẻ. Plugin cũng đi kèm với nhiều tính năng, chẳng hạn như:

  • 50+ Hoạt động nhập cảnh, xuất cảnh và người xem chú ý
  • Cung cấp tính năng chậm trễ và kiểm soát thời lượng trong hoạt ảnh để tạo chuỗi hoạt ảnh đẹp
  • Cho phép người dùng áp dụng hoạt ảnh vô hạn hoặc bất kỳ số lần cố định nào
  • Tùy chọn để thêm các lớp CSS tùy chỉnh vào khối hoạt ảnh riêng lẻ
  • Tùy chọn bật hoặc tắt hoạt ảnh trên điện thoại thông minh và máy tính bảng

Bạn có thể làm gì với Animate It! cắm vào? Bạn có thể thêm các tương tác đơn giản vào các bài viết của mình, tạo các trang bán hàng hấp dẫn, làm sâu sắc thêm cảm xúc của các hư cấu của bạn, hoặc thậm chí tạo ra một bài thuyết trình kinh doanh mạnh mẽ nếu bạn muốn. Chỉ cần nhớ không để đi overboard như bắn phá khách truy cập của bạn với hoạt hình không giới hạn không phải là cách tốt nhất để có được độc giả trung thành.

Bắt đầu với Animate It!

Sau khi cài đặt và kích hoạt plugin, bạn có thể tìm nút để thêm hoạt ảnh trong "WordPress 'Editor." Nút này sẽ chỉ hiển thị trong chế độ trực quan, nhưng nếu bạn đã học được các lệnh, bạn có thể chèn mã từ chế độ văn bản thuần túy (chi tiết về điều này sau).

Sau khi nhấn nút, bạn sẽ nhận được một cửa sổ tùy chọn. Có ba tab cho phép bạn tùy chỉnh hoạt ảnh. Tab đầu tiên là “Entry”. Đây là nơi để thêm các hình ảnh động sẽ nhập vào màn hình trên các điều kiện nhất định. Bốn tùy chọn thả xuống sẽ giúp bạn điều chỉnh hiệu ứng hoạt ảnh.

  • Hoạt ảnh là nơi để chọn loại hoạt ảnh bạn muốn.
  • Sự chậm trễ sẽ giúp bạn điều chỉnh thời gian trước khi hoạt ảnh bắt đầu.
  • Thời lượng là khoảng thời gian hoạt ảnh sẽ được phát từ đầu đến cuối. Con số càng lớn thì hoạt ảnh càng chậm.
  • Thời gian là tỷ lệ của hoạt ảnh để phát cùng một lúc. Ví dụ: hiệu ứng “easeIn” sẽ phát hoạt ảnh chậm hơn ở đầu và nhanh hơn về phía cuối.

Bạn có thể kiểm tra các kết hợp hiệu ứng bằng cách chơi nó bằng cách sử dụng nút "Animate It!". Nếu kết quả theo ý thích của bạn, bạn có thể nhấn nút “Chèn” để sử dụng nó trong nội dung của bạn.

Tab "Thoát" ít nhiều tương tự như Mục nhập nhưng để thêm hoạt ảnh sẽ rời khỏi màn hình. Bằng cách kết hợp cả hai, bạn có thể thêm một đối tượng sẽ xuất hiện trên màn hình và sau đó biến mất.

Tab "Tùy chọn" là nơi bạn kiểm soát cài đặt chung của hoạt ảnh. Tại đây, bạn có thể đặt hoạt ảnh để phát trên vòng lặp hoặc chỉ một lần, giữ trạng thái cuối cùng của phần tử, thêm mã CSS tùy chỉnh và đặt trình kích hoạt sẽ bắt đầu hoạt ảnh. Cụ thể về trình kích hoạt - cài đặt “Animate On” - bạn có thể chọn Cuộn, ví dụ và hoạt ảnh sẽ chỉ bắt đầu nếu khu vực đã hiển thị trên màn hình.

Thêm nội dung của bạn

Sau khi nhấn nút “Chèn”, bạn sẽ thấy một vài dòng mã ngắn được thêm vào vùng nội dung của bạn. Những shortcodes là những người sẽ kiểm soát các hình ảnh động. Và vì chúng chỉ là các mã có giá trị, bạn có thể thêm mã theo cách thủ công nếu bạn tốt với mã và muốn. Tuy nhiên, những người khác chỉ nên gắn bó với Animate It! nút.

Bạn cũng sẽ thấy một dòng văn bản có nội dung “ Hãy thêm nội dung của bạn vào khu vực này. Đây là nơi bạn có thể thêm các mục mà bạn muốn tạo hiệu ứng động. Nó có thể là văn bản, hình ảnh, biểu tượng, biểu tượng, âm thanh, video hoặc thậm chí cả các mã ngắn khác. Tôi đã thử thêm một shortcode gõ hiệu ứng được tạo ra bằng cách sử dụng plugin Typed Js, và kết quả là rất tốt.

Nếu có một điều tôi có thể nói về việc sử dụng Animate It! plugin, nó sẽ là "Thử nghiệm!" Chơi với nó và thử kết hợp khác nhau để có được kết quả mà bạn muốn. Điêu đo rât vui. Và đây là kết quả mà tôi đã đến trong vòng chưa đến một phút. Tôi kết hợp Animate It! plugin với plugin Typed Js.

Bạn có nghĩ rằng đó là khoảng thời gian để thêm các yếu tố tương tác vào nội dung web của bạn? Bạn có dự định thử plugin không? Bạn có sử dụng các plugin khác nhau cho hoạt ảnh không? Vui lòng chia sẻ bằng cách sử dụng các bình luận bên dưới.