Tạo Nhãn dán Facebook bằng CSS3 Animations

03/05/2017 0 17 2 phút đọc Demo

Nếu bạn muốn tạo sticker (nhãn dán) giống như Facebook – bao gồm loại động (animated) và tĩnh (static) – thì bài viết này sẽ hướng dẫn bạn thực hiện dễ dàng chỉ với CSS3.

Tạo Nhãn dán Facebook bằng CSS3 Animations
Mục lục

Xem demo Tải về

1. Cấu trúc HTML

Mỗi nhãn dán là một thẻ div. Class sticker dùng chung cho định dạng; thêm sticker-animate để tạo chuyển động hoặc sticker-static cho dạng tĩnh.

<div class="sticker sticker-1 sticker-animate"></div>
<div class="sticker sticker-2 sticker-animate"></div>
<div class="sticker sticker-3 sticker-static"></div>
<div class="sticker sticker-4 sticker-static"></div>

2. Định dạng CSS chung

Dưới đây là phần style dùng cho tất cả sticker.

.sticker {
    width: 120px;
    height: 120px;
    cursor: pointer;
    background-size: 432px 288px;
    background-position: -12px -12px;
    image-rendering: -webkit-optimize-contrast;
}

3. Sticker tĩnh

Chỉ hiển thị 1 frame – ảnh được resize đúng kích thước hiển thị.

.sticker-static {
    background-size: 120px 120px !important;
    background-position: 0 0 !important;
}

4. Sticker động (animation sprite)

Chúng ta dùng CSS3 keyframes để tạo hiệu ứng lật frame như sprite sheet.

.sticker-animate {
    -webkit-animation-name: stickerAnimation;
    -webkit-animation-duration: 0.9s;
    -webkit-animation-timing-function: step-start;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: both;
}

Keyframes

@-webkit-keyframes stickerAnimation {
    0%   { background-position: -12px -12px; }
    25%  { background-position: -156px -12px; }
    50%  { background-position: -300px -12px; }
    75%  { background-position: -156px -156px; }
    100% { background-position: -12px -156px; }
}

5. Ảnh nền cho mỗi sticker

Mỗi sticker có ảnh riêng, bạn có thể đổi thành background-image: url(...) trực tiếp hoặc dùng inline style="..." nếu cần động.

.sticker-1 {
    background-image: url(sticker.png);
}
.sticker-2 {
    background-image: url(sticker-2.png);
}
.sticker-3 {
    background-image: url(sticker-static.png);
}
.sticker-4 {
    background-image: url(sticker-static-2.png);
}

6. Kết quả

Kết luận

  • Dùng sprite sheet có thể tiết kiệm băng thông và xử lý chuyển động mượt.
  • Phân biệt sticker động và tĩnh qua class giúp tái sử dụng code dễ dàng.
  • Đây là cách lý tưởng để tạo sticker animation cho blog, forum hoặc hệ thống phản hồi UX vui nhộn.

Đây là một ví dụ hay về ứng dụng CSS3 animation kết hợp sprite sheet mà bạn có thể dùng làm nền tảng cho nhiều UI khác như emoji động, hiệu ứng phản hồi (reaction) hoặc thậm chí minigame.

Series: Thủ thuật Front-end

Bài Viết Liên Quan

Bình Luận

  • Không có bình luận.