Một sản phẩm, ba hương vị, cả trang web chuyển màu theo từng nhịp cuộn. Đó là ý tưởng của prompt “One product, three flavours”: khi khách xem cacao, đào rồi mâm xôi, màu nền, chữ và nút mua hàng cùng thay đổi. Các nguyên liệu bay ở nhiều tốc độ tạo cảm giác sản phẩm nổi giữa không gian.
Điểm thú vị là hiệu ứng này có thể làm bằng HTML, CSS và JavaScript thông thường. Bài viết dưới đây phân tích prompt, chỉ ra một chi tiết kỹ thuật cần sửa và cung cấp bản prompt hoàn chỉnh để bạn giao cho công cụ AI lập trình.
Web 3D trong prompt này thực chất là gì?
Đây là cách tạo chiều sâu thị giác bằng các lớp ảnh 2D, thường được gọi là hiệu ứng 2.5D. Bạn không có một mô hình để xoay tự do như trong không gian 3D thật. Thay vào đó, ảnh sản phẩm nằm ở lớp chính; hạt cacao, miếng đào hoặc quả mâm xôi được đặt trước và sau nó, với kích thước, độ nét và chuyển động khác nhau.
Khi người dùng cuộn, các lớp di chuyển lệch tốc độ. Mắt nhận ra sự khác biệt đó như khoảng cách gần – xa. Cách này phù hợp với landing page đồ uống, mỹ phẩm, thực phẩm hoặc sản phẩm có nhiều phiên bản màu sắc. Việc có nhẹ hơn hay không vẫn phụ thuộc dung lượng ảnh, số lớp và cách cập nhật hoạt ảnh.
Giải mã 8 yêu cầu trong prompt gốc
1. Chia hành trình thành ba hương vị
Đặt ID cho ba section là cacao, peche và framboise. Peche tương ứng hương đào; framboise là mâm xôi. Giữ ID không dấu để JavaScript và liên kết neo dễ sử dụng. Trong mỗi section, thông tin quan trọng vẫn là tên vị, lợi ích sản phẩm, hình ảnh, giá và lời kêu gọi hành động.
2. Dùng một bộ biến màu cho mỗi vị
Thay vì ghi màu riêng cho hàng chục thành phần, khai báo --bg cho nền và --ink cho chữ, viền, nút. Trạng thái hiện tại nằm trên thẻ HTML dưới dạng data-flavour. Khi trạng thái đổi, các thành phần dùng chung biến màu sẽ cập nhật theo.
3. Kích hoạt khi section đi qua giữa màn hình
Prompt gốc đề xuất IntersectionObserver với rootMargin: "-50% 0px -50% 0px". Ý đồ là thu vùng quan sát về trung tâm. Tuy nhiên, phần trăm của rootMargin được tính theo chiều rộng vùng gốc, kể cả lề trên và dưới. Vì vậy, cấu hình này không bảo đảm tạo đường giữa theo chiều cao màn hình; trên màn hình ngang, vùng quan sát còn có thể bị thu quá mức. Xem quy tắc trong đặc tả Intersection Observer của W3C.
Khi triển khai, nên tính lề âm bằng pixel từ chiều cao viewport, chừa một dải khoảng 2px ở giữa và khởi tạo lại observer khi resize. Đây là điều chỉnh để thực hiện đúng ý tưởng của prompt.
4. Đổi trạng thái trên phần tử gốc
Khi xác định được section hiện tại, đặt document.documentElement.dataset.flavour = section.id. Cách quản lý một trạng thái chung giúp nền trang, tiêu đề, điều hướng và nút có cùng ngôn ngữ màu sắc.
5. Chuyển màu trong 600 mili giây
Đặt transition cho background-color và color của body. Các section cần nền trong suốt nếu muốn thấy nền chung chuyển màu. Nếu mỗi section phủ một nền đặc, hiệu ứng chuyển màu của body sẽ bị che. Nút có màu nền riêng cũng cần transition riêng để chuyển đồng bộ.
6. Dùng 6–8 ảnh nguyên liệu cho mỗi vị
Mỗi ảnh PNG nền trong suốt có hệ số chuyển động riêng từ 0.2 đến 0.6. Ví dụ, với công thức độ lệch bằng quãng cuộn nhân hệ số, cuộn 100px tạo độ dịch chuyển bổ sung từ 20px đến 60px. Cần ghi rõ hệ quy chiếu này trong prompt để AI không diễn giải tốc độ theo nhiều cách khác nhau.
7. Phân lớp bằng kích thước và độ mờ
Theo hướng nghệ thuật của prompt, ảnh nhỏ đi chậm và mờ 2px ở lớp sau; ảnh lớn đi nhanh, sắc nét ở lớp trước. Đặt các ảnh trang trí lệch khỏi nội dung và nút bấm. Sáu đến tám lớp là yêu cầu cho bản desktop, không phải số lượng bắt buộc trên điện thoại.
8. Đồng bộ nút Add to bag
Nền nút dùng --ink, chữ trên nút dùng --bg. Bạn có thể đổi nhãn thành “Thêm vào giỏ”. Hiệu ứng giao diện không tự tạo chức năng giỏ hàng: bản chạy thật vẫn cần nối nút với hệ thống thương mại điện tử và phản hồi trạng thái sau khi thêm sản phẩm.
Prompt làm web 3D hoàn chỉnh để sao chép
Bản dưới đây giữ ý tưởng một sản phẩm – ba hương vị, đồng thời bổ sung yêu cầu responsive, tài nguyên ảnh, khả năng truy cập và cách bàn giao. Thay tên sản phẩm, giá và mô tả bằng dữ liệu thật trước khi sử dụng.
Build a responsive product landing page for one product with three flavours: cacao, peche (peach), and framboise (raspberry).
Visual direction: premium editorial layout, oversized typography, generous spacing, a clear product image, and floating ingredient cutouts. Create a layered 2.5D effect using HTML, CSS and vanilla JavaScript. Do not use WebGL or a 3D engine.
1. Create three consecutive sections with ids cacao, peche and framboise. Each contains a flavour heading, short description, product image, price and Add to bag button.
2. Define one palette per flavour with CSS custom properties on :root[data-flavour]. Use --bg and --ink. Cacao: rgb(243,232,222) and rgb(74,44,30). Choose readable peach and raspberry palettes for the other two.
3. Change document.documentElement.dataset.flavour when a section crosses the viewport centre. Use IntersectionObserver. The original concept uses rootMargin "-50% 0px -50% 0px"; improve it by calculating pixel margins from viewport height to create a 2px band at the centre. Rebuild the observer on resize and set the correct initial flavour, including on direct hash navigation.
4. Apply background-color 600ms and color 600ms transitions to body. Keep section backgrounds transparent. Make header links and buttons use the same palette.
5. Add 6–8 transparent ingredient PNGs per flavour on desktop. Give every ingredient its own speed between 0.2 and 0.6 relative to scroll displacement. Use smaller, slower, blurred layers (blur 2px) behind the product, and larger, sharper, faster layers in front. Keep text and buttons unobstructed.
6. Update parallax transforms through requestAnimationFrame scheduled by passive scroll events. Read layout before writing transforms. Only animate visible sections and avoid a permanent idle animation loop.
7. Use --ink for the Add to bag background and --bg for its label. Keep visible keyboard focus states. Do not claim that a demo button completes a purchase; connect it only when real cart logic is provided.
8. On mobile, reduce decorative layers and movement. Respect prefers-reduced-motion in both CSS and JavaScript, disabling parallax and colour transitions when requested. Use alt="" and aria-hidden="true" for decorative ingredient images.
9. Use supplied assets only. If assets are missing, show clearly labelled placeholders and list the needed files. Do not invent image URLs, testimonials or conversion claims.
Deliver separate index.html, styles.css and script.js files, an asset checklist and a short testing guide. Verify scrolling both directions, resizing, keyboard access, direct section links and reduced motion.Mã mẫu: đổi màu cả trang theo hương vị
Đây là hai phần cốt lõi để minh hoạ cơ chế, chưa phải toàn bộ landing page hay chức năng giỏ hàng. HTML cần có ba phần tử <section class="flavour-section" id="cacao">, tương tự cho peche và framboise. Nút trong mỗi section dùng class add-to-bag.
CSS: palette và transition
:root, :root[data-flavour="cacao"] {
--bg: rgb(243, 232, 222);
--ink: rgb(74, 44, 30);
}
:root[data-flavour="peche"] {
--bg: rgb(255, 231, 216);
--ink: rgb(107, 46, 27);
}
:root[data-flavour="framboise"] {
--bg: rgb(251, 225, 235);
--ink: rgb(104, 23, 56);
}
body {
background-color: var(--bg);
color: var(--ink);
transition: background-color 600ms, color 600ms;
}
.flavour-section { background: transparent; }
.add-to-bag {
background-color: var(--ink);
color: var(--bg);
transition: background-color 600ms, color 600ms;
}
.add-to-bag:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
body, .add-to-bag { transition: none; }
.ingredient { transform: none !important; }
}JavaScript: quan sát một dải nhỏ giữa viewport
// Chạy sau khi DOM đã sẵn sàng.
const sections = [...document.querySelectorAll('.flavour-section')];
let observer;
function setFlavourAtCentre() {
const middle = document.documentElement.clientHeight / 2;
const section = sections.find((item) => {
const rect = item.getBoundingClientRect();
return rect.top <= middle && rect.bottom > middle;
});
if (section) document.documentElement.dataset.flavour = section.id;
}
function observeFlavours() {
observer?.disconnect();
const height = document.documentElement.clientHeight;
const inset = Math.max(0, height / 2 - 1);
observer = new IntersectionObserver((entries) => {
if (entries.some((entry) => entry.isIntersecting)) {
setFlavourAtCentre();
}
}, {
rootMargin: '-' + inset + 'px 0px -' + inset + 'px 0px',
threshold: 0
});
sections.forEach((section) => observer.observe(section));
setFlavourAtCentre();
}
observeFlavours();
window.addEventListener('resize', observeFlavours);
window.addEventListener('hashchange', setFlavourAtCentre);
window.addEventListener('pageshow', setFlavourAtCentre);Mẫu này giả định ba section nằm liên tiếp, không có khoảng trống lớn giữa chúng. Với trang có bố cục phức tạp hoặc thao tác nhảy nhanh qua nhiều section, cần kiểm tra thêm việc đồng bộ trạng thái theo vị trí cuộn. Bạn có thể đọc cách rootMargin thay đổi vùng quan sát trong tài liệu MDN.
Chuẩn bị ảnh để hiệu ứng đẹp mà không làm trang quá tải
Với mỗi hương vị, chuẩn bị một ảnh sản phẩm chính và một bộ ảnh nguyên liệu đã tách nền. Giữ hướng sáng và phong cách chụp tương đồng. Cắt gọn khoảng trong suốt thừa, xuất đúng kích thước hiển thị và kiểm tra dung lượng trước khi tải lên website.
- Cacao: hạt, mảnh chocolate hoặc bột cacao, tuỳ thành phần thật của sản phẩm.
- Đào: quả, lát cắt và lá dùng làm trang trí.
- Mâm xôi: quả nguyên, cụm quả hoặc lá có phong cách nhất quán.
Không để AI tự ghép nguyên liệu gây hiểu nhầm công thức sản phẩm. Ảnh trang trí dùng alt rỗng; ảnh sản phẩm chính cần mô tả phù hợp. Ghi kích thước ảnh để hạn chế xê dịch bố cục, ưu tiên tải ảnh quan trọng đầu trang và trì hoãn ảnh ở phần phía dưới khi phù hợp.
Checklist trước khi đưa landing page lên chạy thật
- Cuộn xuống và cuộn ngược: nền, chữ, điều hướng và nút có đổi đúng hương vị không?
- Thu nhỏ cửa sổ, xoay điện thoại, mở liên kết trực tiếp đến từng section: trạng thái có cập nhật đúng không?
- Trên mobile: ảnh nguyên liệu có che tên sản phẩm, giá hoặc nút mua không?
- Bàn phím: có nhìn thấy focus và sử dụng được toàn bộ nút, liên kết không?
- Bật chế độ giảm chuyển động: parallax và chuyển màu có được dừng không? JavaScript cũng cần tôn trọng tuỳ chọn này, không chỉ CSS. Tham khảo prefers-reduced-motion trên MDN.
- Đo trên thiết bị thật: ảnh tải có quá nặng, cuộn có giật, nút giỏ hàng có phản hồi chính xác không?
Áp dụng prompt này vào marketing như thế nào?
Điểm mạnh của ý tưởng là biến mỗi phiên bản sản phẩm thành một phần trải nghiệm riêng mà vẫn giữ cùng cấu trúc mua hàng. Màu cacao gợi cảm giác ấm; đào và mâm xôi tạo những khoảng chuyển tiếp khác biệt. Bạn có thể áp dụng cùng nguyên tắc cho bộ sưu tập mỹ phẩm, các dòng nước hoa hoặc màu vỏ thiết bị.
Hãy chọn một hành động chính cho trang, giữ thông tin sản phẩm rõ ràng và dùng chuyển động để dẫn mắt về hành động đó. Muốn đánh giá hiệu quả, cần đo tương tác và chuyển đổi của trang thực tế; giao diện có chiều sâu tự nó không bảo đảm tăng doanh số.
Một prompt hữu ích cần nói rõ kết quả muốn thấy, hành vi khi cuộn, cách xử lý trên mobile và điều kiện kiểm tra. Với bộ yêu cầu này, bạn đã có bản giao việc đủ cụ thể để bắt đầu xây dựng và tiếp tục tinh chỉnh theo thương hiệu.
Leave a Reply