Computer >> Máy Tính >  >> Kết nối mạng >> Internet

Cách thêm hoạt ảnh CSS3 thú vị vào nội dung WordPress của bạn

Cách thêm hoạt ảnh CSS3 thú vị vào nội dung WordPress của bạn

Nghệ thuật kể chuyện có thể đã bắt đầu từ rất lâu trước khi những người đồng tính luyến ái biết nói. Nó phát triển cùng với chúng tôi và thích ứng với các công cụ có sẵn. Những câu chuyện từng được kể và truyền từ thế hệ này sang thế hệ khác đã bao hàm sự phát triển theo nghĩa đen từ sách viết tay, in hàng loạt, xử lý văn bản kỹ thuật số và gần đây là Internet. Theo quan điểm tiến hóa của loài người, có cảm giác 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. Mặc dù các video đã bắt đầu chiến dịch thống trị thế giới ảo, nhưng phần lớn nội dung của web vẫn ở dạng văn bản.

Nội dung web hiện đại phải có tính 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 ta nâng cao cách kể chuyện của mình lên một vài khía cạnh. Và nếu bạn là người dùng WordPress, bạn có thể sử dụng Animate It! plugin để thêm các 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 giao diện của trang web như bố cục, vị trí, phông chữ, màu sắc, v.v. Phiên bả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 cách sử dụng mã.

Cách thêm hoạt ảnh CSS3 thú vị vào nội dung WordPress của bạn

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

  • Hơn 50 hoạt ảnh Entry, Exit và Attention Seeker Animation
  • Cung cấp tính năng trì hoãn 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ẻ
  • Các 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 hoạt động 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 cho những hư cấu của bạn hoặc thậm chí tạo một bài thuyết trình kinh doanh mạnh mẽ nếu bạn muốn. Chỉ cần nhớ đừng quá đà vì việc bắn phá khách truy cập của bạn bằng hoạt ả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 thấy nút để thêm hoạt ảnh trong “WordPress’ Editor ”. Nút này sẽ chỉ hiển thị ở chế độ trực quan, nhưng nếu bạn đã học các lệnh, bạn có thể chèn mã từ chế độ văn bản thuần túy (sẽ tìm hiểu thêm về điều này sau).

Cách thêm hoạt ảnh CSS3 thú vị vào nội dung WordPress của bạn

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à “Mục nhập”. Đây là nơi để thêm hoạt ảnh sẽ vào màn hình trong một số đ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 các hiệu ứng hoạt hình.

  • Hoạt ảnh là nơi để chọn loại hoạt ảnh bạn muốn.
  • 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ố này càng lớn, hoạt ảnh sẽ càng chậm.
  • Thời gian là tỷ lệ hoạt ảnh sẽ phát tại một thời điểm. Ví dụ:hiệu ứng “easyIn” sẽ phát hoạt ảnh chậm hơn ở phần đầu và nhanh hơn ở phần 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 "Animate It!" cái nút. Nếu kết quả theo ý muốn của bạn, bạn có thể nhấn nút “Chèn” để sử dụng nó trong nội dung của mình.

Cách thêm hoạt ảnh CSS3 thú vị vào nội dung WordPress của bạn

Tab “Thoát” ít nhiều giống với 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.

Cách thêm hoạt ảnh CSS3 thú vị vào nội dung WordPress của bạn

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 một 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 “Bật hoạt ảnh” - chẳng hạn như bạn có thể chọn Cuộn và hoạt ảnh sẽ chỉ bắt đầu nếu vùng đó đã hiển thị trên màn hình.

Cách thêm hoạt ảnh CSS3 thú vị vào nội dung WordPress của bạn

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 mình. Những mã ngắn này là những mã sẽ điều khiển hoạt ảnh. Và vì chúng chỉ là những mã có giá trị, bạn có thể thêm mã theo cách thủ công nếu bạn giỏ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 “ Vui lòng 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 hoạt ảnh. Nó có thể là văn bản, hình ảnh, biểu tượng, logo, âm thanh, video hoặc thậm chí là các mã ngắn khác. Tôi đã thử thêm shortcode có hiệu ứng kiểu được tạo bằng plugin Typed Js và kết quả thật tuyệt.

Cách thêm hoạt ảnh CSS3 thú vị vào nội dung WordPress của bạn

Nếu có một điều mà 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ử các kết hợp khác nhau để có được kết quả mà bạn muốn. Nó vui. Và đây là kết quả mà tôi đã đưa ra trong vòng chưa đầy một phút. Tôi đã kết hợp Animate It! plugin với plugin Typed Js.

Cách thêm hoạt ảnh CSS3 thú vị vào nội dung WordPress của bạn

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