Hướng dẫn tạo vòng quay may mắn giao diện giáng sinh

Bạn muốn tạo một vòng quay may mắn thật nổi bật để tri ân khách hàng trong mùa Giáng Sinh? Và giao diện vòng quay phải mang đúng “chất” Noel – xanh, đỏ, lung linh? Dưới đây là hướng dẫn chi tiết từng bước giúp bạn tạo một vòng quay theo đúng phong cách lễ hội ngay trên vongquaymayman.co.

Chuẩn bị

Trước tiên, bạn cần chuẩn bị bộ hình ảnh gồm các icon quà tặng, hộp quà và phần text… Tất cả nên ở dạng PNG nền trong suốt để khi đưa vào vòng quay sẽ đẹp và sắc nét nhất.

Bước 1: Thay đổi màu

Khi đã có đủ hình ảnh, bạn truy cập trang chủ vongquaymayman.co, xóa toàn bộ nội dung mặc định của vòng quay rồi upload tất cả ảnh quà tặng lên.

Tiếp theo, vào Cài đặt → Giao diện và chọn hai mã màu chủ đạo:

• #109900
• #dd0015

Đây là hai gam màu xanh – đỏ quen thuộc của mùa Giáng Sinh.

Ở mục Viền kim cương, bạn chọn thêm hai mã bên dưới để hoàn thiện phong cách Noel:

• #004836
• #fbfbef

Bước 2: Thay đổi nền

Tại trang chủ Vòng quay may mắn, truy cập Cài đặt → Thư viện và gõ từ khóa xmas.
Tìm ảnh nền xmas_desktop, sau đó bấm nút Nền để áp dụng cho giao diện Desktop.

Tiếp theo, bấm chuột phải vào ảnh Xmas_mobile và chọn Copy Image Address để lấy link ảnh.

Quay lại Cài đặt → Giao diện, kéo xuống mục Body, chuyển sang tab có icon Mobile và dán link ảnh vừa copy vào ô nền dành cho mobile → Lưu lại.

Bước 3: Thay đổi nút quay

Cài đặt → Giao diện, kéo xuống Nút quay, xóa văn bản “Quay” mặc định. Tiếp đó vào tab Thư viện, gõ vào ô search chữ “Quay” để tìm ảnh nền nút quay -> ấn Nút Quay như ảnh dưới đây.

Bước 4: Ấn nút Chia sẻ

• Tab Cơ bản: Bỏ chọn mục Hiển thị giá đỡ.
• Tab Nâng cao: Kéo xuống cuối và thêm 2 thẻ <div> vào phần body.

Sau đó, dán đoạn CSS sau vào ô CSS bổ sung:

.div_bosung_1,
.div_bosung_2{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.div_bosung_1{
    background-image: url("https://imagedelivery.net/z0TAgxj7IFsaIAXe2ehpvA/ac229ce4-8731-44e5-1614-ffef8b9afb00/public");
    aspect-ratio: 650 / 300;
}

.div_bosung_2{
    background-image: url("https://imagedelivery.net/z0TAgxj7IFsaIAXe2ehpvA/abd868eb-2adb-4923-afa5-93ac4b712500/public");
    aspect-ratio: 632 / 395;
}

@media (min-width:1360px){

  .wheel-container{
    position: absolute;
    left:unset;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  .div_bosung_1{
      width: 650px;
      left: 100px;
      transform: none;
      top: -100%;
      animation: slideDownOnce 1.2s ease-out forwards;
  }

  .div_bosung_2{
      width: 632px;
      left: -100%;
      top: 55%;
      transform: translateY(-50%);
      animation: slideInOnce 1.2s ease-out forwards;
  }
}

@media (max-width:1199px){
    .wheel-container{
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        top: unset;
    }

    .div_bosung_1,
    .div_bosung_2{
        width: 70vw;
        animation: fadeUp 0.7s ease-out forwards;
        opacity: 0;
    }

    .div_bosung_1{
        top: 0;
    }

    .div_bosung_2{
        top: calc(70vw * (300/650) - 30px);
    }
}

@media (max-width:768px){
    .div_bosung_1,
    .div_bosung_2{
        width: 70vw;
    }

    .div_bosung_2{
        top: calc(70vw * (300/650) - 30px);
    }
}

@keyframes slideInOnce {
  from { left:-100%; opacity:0; }
  to   { left:100px; opacity:1; }
}

@keyframes slideDownOnce {
  from { top:-100%; opacity:0; }
  to   { top:60px; opacity:1; }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

Bạn hoàn toàn có thể chỉnh sửa kích thước, đổi hình ảnh hoặc tinh chỉnh lại bố cục sao cho phù hợp với thiết kế vòng quay của riêng bạn.

Bước 5: Ấn nút Tiếp tục để hoàn thành

Vậy là xong! Đây chính là vòng quay sau khi hoàn thiện:

Bạn có thể xem bản demo tại: https://vongquaymayman.co/c:35A510B6

Lời nhắn của admin:
Vì mình không chuyên về thiết kế nên bộ ảnh trong demo chỉ mang tính minh họa cách làm. Rất mong bạn thông cảm và tự thay thế bằng hình đẹp hơn để vòng quay của bạn lung linh đúng chuẩn Giáng Sinh nhé!