Cũng giống như trong PowerPoint hoặc Keynote, hoạt ảnh có thể được sử dụng để tập trung sự chú ý của khách truy cập vào những điều quan trọng
Thật không may, đối với hầu hết chủ sở hữu trang web, việc thêm hoạt ảnh không dễ dàng như chọn chúng từ menu thả xuống
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn những cách dễ dàng nhất để thêm hoạt ảnh phổ biến vào trang web của bạn
Ghi chú. bởi vì các trang web được xây dựng trên nhiều nền tảng xử lý mã khác nhau, chúng tôi sẽ giới thiệu cách tiếp cận phổ biến nhất bằng cách sử dụng Animate. css và sau đó giải thích một giải pháp thay thế đơn giản bằng Pagecloud, nơi không yêu cầu mã
Hoạt ảnh CSS là gì?
Có thể bạn đã biết hoặc chưa biết, CSS là viết tắt của Cascading Style Sheets. CSS được trình duyệt Web sử dụng để xác định cách hiển thị các phần tử HTML trên trang của bạn
Hoạt ảnh CSS cho phép nội dung của bạn chuyển đổi trực quan từ cấu hình kiểu này sang cấu hình kiểu khác. Đối với những người mới bắt đầu thiếu kinh nghiệm viết mã, điều này có thể khá đáng sợ
Đây là một ví dụ đơn giản trong đó văn bản di chuyển trên trang bằng HTML và CSS
Xin chào
Khi bạn đọc CSS, bạn có thể thấy
- Tổng thời lượng của hoạt ảnh là 8 giây [dòng 2]
- Hoạt hình đang được sử dụng là “slidein” [dòng 3]
- Hoạt hình nằm trên một vòng lặp vô hạn [dòng 4]
- “Slidein” bắt đầu ở phía bên trái của trang [dòng 9]
- Ở một nửa thời lượng, tiêu đề cách 300px ở phía bên trái của trang [dòng 12]
- Khi kết thúc hoạt ảnh, văn bản trở lại ở phía bên trái của trang [dòng 15]
Nếu bạn muốn thử viết một số CSS, bạn có thể sửa đổi ví dụ trên bằng CodePen
Khi bạn khám phá các hoạt ảnh CSS, bạn sẽ khám phá ra hàng chục thuộc tính cho phép bạn tùy chỉnh các hiệu ứng chuyển tiếp để chúng hoạt động liền mạch trong thiết kế của bạn
Mặt khác, nếu bạn muốn tiết kiệm thời gian bằng cách sử dụng hoạt ảnh dựng sẵn, bạn sẽ muốn sử dụng Animate. css
Hoạt hình là gì. cs?
sinh động. css là một thư viện hoạt hình CSS trên nhiều trình duyệt được tạo bởi Daniel Eden. Kể từ năm 2019, thư viện chứa 77 hoạt ảnh dựng sẵn cho phép bạn nhanh chóng tạo hoạt ảnh cho nội dung trên trang web của mình
Đây là một ví dụ về mã do Daniel Eden viết cho hoạt ảnh “SlideInLeft” được tìm thấy trong biểu định kiểu
Bằng cách sử dụng thư viện này, bạn có thể tránh mất hàng giờ để viết và tinh chỉnh các hoạt ảnh đơn giản. Phần tốt nhất?
Cách sử dụng Animate. css trong phát triển web tiêu chuẩn
Bước 1. Cài đặt hoặc tải lên Animate. css stylesheet vào trình quản lý tệp của bạn. Điều này sẽ thay đổi dựa trên nền tảng bạn sử dụng. Ngoài ra, bạn có thể sử dụng phiên bản Mạng phân phối nội dung [CDN] để tránh tải tệp lên máy chủ web của mình
Bước 2. Liên kết hoạt hình. css stylesheet trong [các] trang web hoặc mẫu của bạn. Ví dụ
Bước 3. Thêm tên lớp thích hợp vào phần tử của bạn
Bạn phải bao gồm "hoạt hình" trước tên của hoạt ảnh. Bạn cũng có thể bao gồm lớp “infinite” để hoạt ảnh của bạn lặp lại vô thời hạn.
Ví dụ.
Khi bạn cảm thấy thoải mái với CSS, bạn có thể sửa đổi bất kỳ thuộc tính nào được tìm thấy trong biểu định kiểu để phù hợp với sở thích độc đáo của riêng bạn
Nếu bạn muốn một phần tử cụ thể khác với hoạt ảnh mặc định, bạn có thể thêm các công cụ sửa đổi để thay đổi các thuộc tính như thời lượng, độ trễ hoặc số lần hoạt ảnh sẽ phát
Ví dụ
Và đó là nó
Bằng cách làm theo các bước trên, bạn có thể thêm hoạt ảnh vào bất kỳ phần tử nào trên bất kỳ trang web nào mà bạn có quyền truy cập vào mã nguồn
Để tìm hiểu thêm về hoạt ảnh CSS tùy chỉnh và những gì có thể được thực hiện với Javascript, chúng tôi khuyên bạn nên xem qua w3schools và GitHub
Tuy nhiên, nếu phát triển web không phải sở trường của bạn, thì có những lựa chọn thay thế đơn giản hơn như Pagecloud mà bạn không cần phải xử lý mã nào cả
Chúng tôi chắc chắn khuyên bạn nên dùng thử nếu bạn chưa quen với việc xây dựng trang web.
Phương pháp 1
Bước 1 - Tải xuống Animate. css từ đây;
Bước 2 - Đăng nhập vào PageCloud và mở trang bạn muốn chỉnh sửa;
Bước 3 - Kéo và thả biểu tượng “Animate. css” mà bạn đã tải xuống trang của mình;
Bước 4 - Chọn thành phần bạn muốn tạo hiệu ứng động và nhấp vào “NÂNG CAO” trong menu chỉnh sửa;
Bước . nảy động];
Bước 6 - Lưu và xem trang web trực tiếp của bạn.
Phương pháp 2
Bước 1 - Đăng nhập vào Pagecloud và mở trang bạn muốn chỉnh sửa;
Bước 2 - Kéo “Tệp hoạt ảnh khi cuộn” vào trang của bạn;
Step 3 - Select the element you want to animate and click on “ADVANCED” in the editing menu;
Step 4 - Add the name of the desired animation to the class field;
Step 5 - Save and view your live website.
Và Voila. Bạn đã hoàn tất
mẹo chuyên nghiệp. Việc sử dụng hoạt ảnh thông minh có thể nâng tầm bất kỳ thiết kế nào. Tuy nhiên, quá nhiều hình ảnh động có thể gây mất tập trung và làm mất khách hàng tiềm năng. Khi nghi ngờ, ít hơn là nhiều hơn. Nếu bạn muốn thực sự giỏi về hoạt hình, chúng tôi khuyên bạn nên xem Sổ tay hoạt hình
Tóm lược
Bất kể kinh nghiệm của bạn với CSS như thế nào, thì việc làm theo các hướng dẫn trong bài viết này sẽ cho bạn khả năng thêm các hoạt ảnh tuyệt đẹp vào bất kỳ trang web nào
Tuy nhiên, hoạt ảnh chỉ là một trong nhiều thuộc tính CSS được các trang web sử dụng để hiển thị nội dung tuyệt đẹp. Gần như mọi yếu tố trên trang web của bạn sẽ cần một số CSS để nhìn đúng. văn bản, hình nền, hình ảnh, video
Nếu bạn không muốn dành nhiều ngày để học hoặc loay hoay với mã, chúng tôi khuyên bạn nên dùng thử một trình tạo trang web như Pagecloud cung cấp giao diện thân thiện với người dùng cho phép bạn tạo hoạt ảnh và tùy chỉnh giao diện trang web của mình mà không cần viết một dòng mã nào
Trên hết, Pagecloud cung cấp một nhóm hỗ trợ đẳng cấp thế giới sẽ sẵn lòng trả lời bất kỳ câu hỏi nào của bạn, hãy tạo trang web miễn phí của bạn ngay hôm nay