Tạo Advanced Marquee tầm với CSS3 Animation
Hôm nay chúng ta sẽ xem xét “hầu tước” một lần nữa. Chúng tôi thực sự đã đề cập đến nó trong bài viết trước của chúng tôi đã nói về việc sử dụng -webkit-marquee tài sản, nhưng lần này chúng ta sẽ đưa chủ đề này xa hơn một chút.
Trong bài viết này, chúng tôi sẽ tạo ra một giống như marquee hiệu ứng bằng cách sử dụng CSS3 Animation. Bằng cách đó, chúng tôi sẽ có thể thêm nhiều chức năng không thể đạt được chỉ với -webkit-marquee.
Trừ khi bạn đã quen thuộc với mô-đun Hoạt hình CSS3, chúng tôi khuyên bạn nên xem các tài liệu tham khảo sau đây trước khi tiếp tục với tài liệu này:
- Ảnh động CSS3 - W3School
- Ảnh động CSS - Mozilla Dev. Mạng
Ngoài ra, hãy lưu ý rằng, hiện tại, CSS3 Animation chỉ có thể hoạt động trong Firefox 8+, Chrome 12+ và Safari 5.0+ với phiên bản tiền tố (-moz- và -webkit-). Tuy nhiên, chúng tôi sẽ chỉ sử dụng phiên bản chính thức từ W3C mà không có tiền tố để tránh làm quá tải bài viết này với các mã thừa.
Giải quyết vấn đề Marquee
Một trong những vấn đề với marquee là văn bản liên tục di chuyển. Hành vi này gây rối cho việc đọc, và văn bản cũng khó đọc. Lần này, chúng tôi sẽ cố gắng tạo phiên bản marquee của riêng mình và làm cho nó trở nên thân thiện hơn với người dùng. Ví dụ; thay vì văn bản di chuyển liên tục, chúng tôi sẽ dừng nó khi nó hiển thị đầy đủ, vì vậy người dùng có thể đọc văn bản trong giây lát.
Bảng phân cảnh (sắp xếp)
Mỗi sáng tạo và thiết kế, như logo, hình minh họa hoặc trang web, thường bắt đầu bằng một bản phác thảo. Trong lĩnh vực sản xuất hoạt hình, điều này được thực hiện với bảng phân cảnh. Trước khi chúng tôi bắt đầu với bất kỳ mã hóa nào, trước tiên chúng tôi sẽ tạo một loại kịch bản, để giúp chúng tôi hình dung hoạt hình của chúng tôi.
Như bạn có thể thấy từ bảng phân cảnh ở trên, chúng tôi dự định chỉ hiển thị hai dòng văn bản, cả hai sẽ di chuyển tuần tự từ phải sang trái.
Bảng phân cảnh của chúng tôi không phức tạp như bảng phân cảnh cho phim hoạt hình thực sự, nhưng vấn đề là: bây giờ chúng tôi có thể hình dung ra cách làm của hầu tước của chúng tôi sẽ như thế nào.
Đánh dấu HTML
Vì hoạt hình của chúng tôi sẽ đơn giản, nên việc đánh dấu HTML cũng sẽ đơn giản như:
Cách thêm bài viết liên quan đến WordPress mà không cần plugin
Tự động hóa tập tin Dropbox của bạn với các hành động
Các kiểu cơ bản
Trước khi làm việc xung quanh các công cụ hoạt hình, hãy thêm một số phong cách cơ bản. Hãy bắt đầu bằng cách thêm một kết cấu nền cho html thành phần.
html nền: url ('Nhìn /images / skewed_print.png'); Tiếp theo, chúng tôi sẽ đặt vùng chọn ở giữa cửa sổ trình duyệt cũng như thêm một số chi tiết như bóng trong, màu nền và đường viền.
.marquee chiều rộng: 500px; chiều cao: 50px; lề: tự động 25px; tràn: ẩn; vị trí: tương đối; viền: 1px solid # 000; lề: tự động 25px; màu nền: # 222; -webkit-Border-radius: 5px; bán kính đường viền: 5px; -webkit-box-Shadow: in 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); hộp bóng: inet 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Sau đó, chúng tôi sẽ định vị văn bản - trong trường hợp này được bọc bên trong thẻ đoạn văn - hoàn toàn và vì tuyệt đối vị trí sẽ làm cho phần tử sụp đổ, chúng ta sẽ phải xác định phần tử của chiều rộng để 100% để che chiều rộng của cha mẹ nó.
.marquee p vị trí: tuyệt đối; họ phông chữ: Tahoma, Arial, sans-serif; chiều rộng: 100%; chiều cao: 100%; lề: 0; chiều cao dòng: 50px; văn bản-align: trung tâm; màu: #fff; bóng văn bản: 1px 1px 0px # 000000; bộ lọc: dropshadow (color = # 000000, offx = 1, offy = 1);
Chúng ta hãy xem kết quả một lúc.
Tại thời điểm này, chúng tôi đã thực hiện với tất cả các phong cách cơ bản chúng tôi cần; bạn có thể tự do thêm nhiều hoặc cá nhân hóa các phong cách. Nhưng, chúng tôi khuyên bạn nên gắn bó với kích thước marquee được chỉ định của chúng tôi (chiều cao và chiều rộng) cho đến khi kết thúc hướng dẫn.
Các hình ảnh động
Nói tóm lại, hoạt hình là một bài thuyết trình về các đối tượng chuyển động. Mỗi chuyển động được xác định trong một khung thời gian. Vì vậy, khi chúng tôi đang làm việc trên hoạt hình, chúng tôi chủ yếu xử lý Thời gian. Chúng tôi tính đến các vấn đề như:
- Khi nào đối tượng bắt đầu di chuyển?
- Mất bao lâu để vật di chuyển từ điểm này sang điểm khác?
- Khi nào và bao lâu thì đối tượng duy trì tại một điểm nhất định?
Trong CSS3 Animation, thời gian có thể được định nghĩa với @keyframe cú pháp. Nhưng, trước khi nhảy vào phần này, trước tiên chúng ta hãy xác định vị trí bắt đầu văn bản marquee.
Chúng tôi đã lên kế hoạch rằng văn bản sẽ bắt đầu từ bên phải sau đó chuyển sang bên phải. Vì vậy, ở đây trước tiên chúng ta sẽ đặt nó sang bên phải bằng thuộc tính Chuyển đổi CSS3.
.marquee p biến đổi: translateX (100%);
Nhớ cái gì đó 100% mà chúng tôi đã xác định cho phần tử đoạn của chúng tôi bằng với phần tử mẹ của nó chiều rộng. Vì vậy, điều tương tự cũng sẽ được áp dụng ở đây; yếu tố đoạn văn sẽ là dịch bên phải cho 100% mà trong ví dụ này bằng 500px.
Khung hình chính
Các @keyframe cú pháp có thể hơi khó hiểu đối với một số người, vì vậy ở đây chúng tôi đã tạo một hướng dẫn trực quan đơn giản để giúp bạn dễ dàng hiểu những gì đang xảy ra trong @keyframe cú pháp.
Nhấn vào đây để xem phiên bản lớn hơn.
Toàn bộ hoạt hình sẽ kéo dài về 20 giây và được chia thành hai chuỗi kéo dài 10 giây mỗi.
Trong chuỗi đầu tiên, văn bản đầu tiên sẽ ngay lập tức trượt từ bên phải và vẫn hiển thị trong giây lát để cho phép người dùng đọc văn bản, trong khi văn bản thứ hai sẽ bị ẩn. Trong chuỗi thứ hai, văn bản marquee đầu tiên sẽ trượt ra bên trái và văn bản thứ hai sẽ ngay lập tức trượt vào từ bên phải.
Và đây là tất cả các mã keyframe chúng ta cần áp dụng để chạy hình động.
@keyframes left-one 0% Transform: translateX (100%); 10% biến đổi: translateX (0); 40% biến đổi: translateX (0); 50% biến đổi: translateX (-100%); 100% biến đổi: translateX (-100%); @keyframes left-hai 0% Transform: translateX (100%); 50% biến đổi: translateX (100%); 60% biến đổi: translateX (0); 90% biến đổi: translateX (0); 100% biến đổi: translateX (-100%);
Các một bên trái khung hình chính sẽ xác định chuỗi đầu tiên của hình ảnh động, trong khi trái hai khung hình chính sẽ xác định chuỗi thứ hai.
Áp dụng hoạt hình cho các yếu tố
Để hoạt hình hoạt động, đừng quên áp dụng hoạt hình cho thành phần. Trình tự đầu tiên được áp dụng cho văn bản đầu tiên hoặc trong trường hợp này là đoạn đầu tiên và trình tự thứ hai cũng được áp dụng cho đoạn thứ hai..
.marquee p: nth-child (1) animation: left-one 20s easy infinite; .marquee p: nth-child (2) animation: left-hai 20s easy infinite;
Tất cả chúng ta đều được thực hiện với hình ảnh động của chúng tôi; hãy xem kết quả trên trình duyệt.
- Bản giới thiệu
- Tải xuống nguồn
Tiền thưởng
Chúng ta cũng có thể định nghĩa văn bản marquee để di chuyển nó từ trên xuống dưới hoặc ngược lại, giống như chúng ta đã làm trong bài viết trước. Đây là cách làm; thay thế các mã Hoạt hình trên của chúng tôi bằng mã này bên dưới để di chuyển văn bản xuống dưới:
.marquee p biến đổi: translateY (-100%); @keyframes down-one 0% Transform: translateY (-100%); 10% biến đổi: translateY (0); 40% biến đổi: translateY (0); 50% biến đổi: translateY (100%); 100% biến đổi: translateY (100%); @keyframes xuống hai 0% biến đổi: translateY (-100%); 50% biến đổi: translateY (-100%); 60% biến đổi: translateY (0); 90% biến đổi: translateY (0); 100% biến đổi: translateY (100%);
Lưu ý rằng chúng tôi đã thay đổi Trục X đến Trục Y và lật tất cả dịch giá trị âm thành dương và ngược lại.
Chúng tôi cũng có đổi tên thành Animation đến xuống một và xuống hai, vì vậy chúng ta cũng cần áp dụng lại tên Animation trong phần tử đoạn.
.marquee p: nth-child (1) animation: down-one 20s easy infinite; .marquee p: nth-child (2) animation: down-hai 20s easy infinite;
Hoặc nếu không, nếu bạn muốn di chuyển nó ngược lại; từ dưới lên trên. Dưới đây là tất cả các mã bạn cần áp dụng:
.marquee.up p biến đổi: translY (100%); .marquee.up p: nth-child (1) animation: up-one 20s easy infinite; .marquee.up p: nth-child (2) animation: up-hai 20s easy infinite; @keyframes up-one 0% Transform: translateY (100%); 10% biến đổi: translateY (0); 40% biến đổi: translateY (0); 50% biến đổi: translateY (-100%); 100% biến đổi: translateY (-100%); @keyframes tăng hai 0% biến đổi: translateY (100%); 50% biến đổi: translateY (100%); 60% biến đổi: translateY (0); 90% biến đổi: translateY (0); 100% biến đổi: translateY (-100%);
- Bản giới thiệu
- Tải xuống nguồn
Phần kết luận
Mặc dù thiếu hỗ trợ trình duyệt hiện tại, CSS3 Animation, nếu được thực hiện đúng cách, chắc chắn sẽ giải quyết được nhiều vấn đề về khả năng sử dụng trong tương lai, giống như chúng ta đã làm trong ví dụ này. Nếu chúng ta chỉ cần một hoạt hình ngắn dành cho các trình duyệt hiện đại, sử dụng CSS3 Animation có lẽ tốt hơn là phải tải tập lệnh jQuery.
Cuối cùng, chúng tôi biết rằng bài viết này có thể hơi quá sức đối với một số người, vì vậy nếu bạn có bất kỳ câu hỏi nào liên quan đến bài viết này, vui lòng gửi nó trong phần bình luận bên dưới.
