メインコンテンツまでスキップ

Animation 01

Tên dự án: Renai Grand
Mục tiêu: Đào tạo kỹ thuật Liquid Design kết hợp với thư viện GSAP để xây dựng hiệu ứng animation chuyên nghiệp cho website.

Design​

Công cụ: Figma

👉 renai-grand

Yêu cầu công việc​

  • Nghiên cứu về kỹ thuật liquid design, kết hợp linh hoạt giữa liquid design và responsive design trong quá trình thực hiện task.
  • Đảm bảo website tự động co giãn linh hoạt theo nguyên lý liquid design.
  • Tìm hiểu và ứng dụng thư viện GSAP để xây dựng các hiệu ứng animation.
  • Đọc kỹ mô tả animation cho trang top page trong file thiết kế và triển khai chính xác theo yêu cầu. Nếu Trainee vẫn không hiểu rõ mô tả, vui lòng tham khảo video example.mp4.
  • Nếu không có yêu cầu bổ sung từ leader, chỉ cần thực hiện code cho top page và location page.
  • Trường hợp không có thiết kế SP, chủ động xây dựng giao diện tablet và SP dựa trên kinh nghiệm, đảm bảo thân thiện với người dùng.

Nhiệm vụ và điểm quan trọng​

  • Mark up bằng EJS sao cho các phần tử HTML có thể tái sử dụng ở các trang khác.
  • Với các trang không có SP design thì phải tự giả định trạng thái phù hợp với responsive nhất.

Hướng dẫn setup liquid design​

Tổng quan: liquid design hướng tới giao diện tự co giãn theo kích thước viewport, ưu tiên tỉ lệ phần trăm, unit linh hoạt và tránh giá trị cố định ảnh hưởng layout khi thay đổi kích thước.

Nguyên tắc chính:

  • Dùng phần trăm (%) cho width/height khi có thể; dùng max-width để giới hạn chiều rộng tối đa.
  • Dùng rem / vw / clamp() / calc() cho font-size, spacing để có scale mượt giữa các breakpoint.
  • Đặt padding/margin dạng rem thay vì px cố định.

Thiết lập css như sau:

/* Giá trị cơ sở: 1rem = 10px */
html {
  font-size: 10px;
}

/* Trên các viewport nhỏ hơn breakpoint lớn, scale tuyến tính dựa trên chiều rộng viewport.
   Thay 1400 bằng breakpoint phù hợp nếu cần. */
@media (max-width: 1400px) {
  html {
    font-size: calc(100vw / 1400 * 10); 
  }
}

/* Thiết lập đặc biệt cho mobile nhỏ hơn.
   Thay 390 bằng width tham chiếu của thiết kế mobile nếu cần. */
@media (max-width: 767px) {
  html {
    font-size: calc(100vw / 390 * 10);
  }
}