검투사 제품 동적 입자 및 대화형 애니메이션을 갖춘 검투사 테마 제품 쇼케이스

소개

이 튜토리얼에서는 애니메이션 제품 카드, 동적 호버 효과, 클릭 상호 작용, 각 항목에 생기를 불어넣는 빛나는 입자 효과를 갖춘 초프리미엄 3D 검투사 테마 제품 쇼케이스를 만들어 보겠습니다. 몰입형 사용자 경험을 위해 디자인된 이 쇼케이스는 3D 변환, 빛나는 애니메이션, 맥동하는 하이라이트를 결합하여 각 제품에 독특하고 상호 작용적인 느낌을 줍니다. 이 디자인은 플레이어가 고대 전투와 전략의 스릴을 경험할 수 있는 인터랙티브 게임인 Gladiators Battle에서 영감을 받았습니다.

나만의 대화형 제품 쇼케이스를 만들고 HTML, CSS 및 JavaScript를 사용하여 멋진 시각적 요소와 역동적인 애니메이션을 만드는 방법을 알아보세요.

1단계: HTML 구조 설정
각 제품 카드는 배지, 아이콘, 통계와 같은 대화형 요소와 함께 방패나 검과 같은 검투사 테마의 아이템을 나타냅니다.

  <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">


  <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에서 디자인 및 개발에 대한 통찰력을 얻으려면 팔로우하세요.
매력적인 대화형 구성 요소 생성에 대한 추가 튜토리얼을 계속 지켜봐 주시기 바랍니다!