소개
이 튜토리얼에서는 애니메이션 제품 카드, 동적 호버 효과, 클릭 상호 작용, 각 항목에 생기를 불어넣는 빛나는 입자 효과를 갖춘 초프리미엄 3D 검투사 테마 제품 쇼케이스를 만들어 보겠습니다. 몰입형 사용자 경험을 위해 디자인된 이 쇼케이스는 3D 변환, 빛나는 애니메이션, 맥동하는 하이라이트를 결합하여 각 제품에 독특하고 상호 작용적인 느낌을 줍니다. 이 디자인은 플레이어가 고대 전투와 전략의 스릴을 경험할 수 있는 인터랙티브 게임인 Gladiators Battle에서 영감을 받았습니다.
나만의 대화형 제품 쇼케이스를 만들고 HTML, CSS 및 JavaScript를 사용하여 멋진 시각적 요소와 역동적인 애니메이션을 만드는 방법을 알아보세요.
1단계: HTML 구조 설정
각 제품 카드는 배지, 아이콘, 통계와 같은 대화형 요소와 함께 방패나 검과 같은 검투사 테마의 아이템을 나타냅니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Gladiator Product Showcase</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div> <p>Key HTML Elements<br> Badge: Labels each item with statuses like "New" or "Popular."<br> Product Image: Displays the item with a glowing effect and 3D depth.<br> Stats: Uses progress bars to display item attributes like defense or attack.<br> Icons: Interactive icons at the bottom of each card provide quick access to favorite actions.<br> Step 2: Designing with CSS<br> Basic Styles and Background<br> The background uses a radial gradient to create a dramatic look, while each product card is styled with gradients, shadows, and smooth transitions.<br> </p> <pre class="brush:php;toolbar:false">body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: radial-gradient(circle at center, #1b1b2f, #090909); font-family: Arial, sans-serif; overflow: hidden; color: #fff; } .product-showcase { display: flex; gap: 40px; perspective: 1200px; }
제품 카드 스타일
각 카드는 3D 모양으로 디자인되었으며 상호 작용을 위한 호버 효과가 포함되어 있습니다. :hover 효과는 미묘한 회전과 빛을 제공하여 고급스러운 느낌을 강화합니다.
.product-card { position: relative; width: 270px; height: 420px; padding: 25px; background: linear-gradient(145deg, #2a2a2a, #3c3c3c); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; transform-style: preserve-3d; transition: transform 0.5s, box-shadow 0.5s, background 0.5s; cursor: pointer; overflow: hidden; } .product-card:hover { transform: scale(1.1) rotateY(10deg); box-shadow: 0 30px 60px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 255, 0, 0.7); }
통계 및 진행률 표시줄
진행률 표시줄을 사용하여 방어력, 내구성 등의 속성을 표시하여 쇼케이스에 독특한 시각적 요소를 추가합니다.
.stats { width: 100%; margin-top: 15px; } .stat-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #ffd700; font-size: 14px; font-weight: bold; } .progress { width: 60%; height: 8px; background: rgba(255, 255, 255, 0.2); border-radius: 5px; } .progress-bar { height: 100%; background: linear-gradient(90deg, #ffcc00, #f9844a); }
입자 효과 추가
움직이고 색상을 변경하는 입자를 추가하면 몰입감이 향상됩니다. 이러한 입자는 진동하여 빛나는 효과를 줄 수 있습니다.
.particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 215, 0, 0.9); box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 255, 0, 0.3); animation: particleAnimation 3s ease-in-out infinite, particleMove 4s linear infinite; }
3단계: JavaScript 상호작용 추가
JavaScript는 호버 애니메이션, 클릭 이벤트 및 빛나는 입자 효과를 관리합니다.
호버 및 클릭 애니메이션 추가
마우스 움직임에 따른 카드 회전 및 크기 조정에 애니메이션을 적용하고 클릭 한 번으로 확대/축소를 전환합니다.
const cards = document.querySelectorAll('.product-card'); cards.forEach((card) => { let isClicked = false; card.addEventListener('mousemove', (e) => { if (!isClicked) { const { width, height } = card.getBoundingClientRect(); const offsetX = e.clientX - card.offsetLeft - width / 2; const offsetY = e.clientY - card.offsetTop - height / 2; const rotationX = (offsetY / height) * -25; const rotationY = (offsetX / width) * 25; card.style.transform = `rotateY(${rotationY}deg) rotateX(${rotationX}deg) scale(1.05)`; } }); card.addEventListener('mouseleave', () => { if (!isClicked) { card.style.transform = 'rotateY(0deg) rotateX(0deg) scale(1)'; } }); card.addEventListener('click', () => { isClicked = !isClicked; card.style.transform = isClicked ? 'scale(1.2) rotateY(0deg) rotateX(0deg)' : 'rotateY(0deg) rotateX(0deg) scale(1)'; }); });
빛나는 입자 추가
분위기를 높이기 위해 각 제품 카드 주위를 무작위로 움직이는 입자를 만듭니다.
function addParticleEffect() { const particle = document.createElement('div'); particle.classList.add('particle'); particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.animationDuration = `${2 + Math.random() * 3}s`; document.body.appendChild(particle); setTimeout(() => particle.remove(), 5000); } setInterval(() => { cards.forEach(() => addParticleEffect()); }, 1000);
결론
역동적인 애니메이션과 입자 효과를 갖춘 3D 검투사 테마의 제품 쇼케이스를 구축하면 사용자의 마음을 사로잡을 수 있는 매력적인 대화형 경험을 만들 수 있습니다. 시각적 스타일을 위한 CSS와 상호작용을 위한 JavaScript를 결합하여 제품 디스플레이 또는 게임 관련 사이트에 이상적인 고품질의 몰입형 구성 요소를 만들었습니다. Gladiators Battle에서 영감을 받은 이 쇼케이스는 현대적인 웹 디자인과 역사적인 주제를 결합한 힘을 강조합니다.
? 더 알아보기:
검투사 전투 살펴보기: https://gladiatorsbattle.com에서 고대 전사의 세계와 전략적인 게임플레이에 빠져보세요.
GitHub: https://github.com/HanGPIErr에서 더 많은 프로젝트를 확인하세요.
LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez/에서 프로젝트 업데이트를 확인하세요.
Twitter: https://x.com/GladiatorsBT에서 디자인 및 개발에 대한 통찰력을 얻으려면 팔로우하세요.
매력적인 대화형 구성 요소 생성에 대한 추가 튜토리얼을 계속 지켜봐 주시기 바랍니다!
위 내용은 검투사 제품 동적 입자 및 대화형 애니메이션을 갖춘 검투사 테마 제품 쇼케이스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!