Home > Article > Web Front-end > Gladiator Product Gladiator-Themed Product Showcase with Dynamic Particles & Interactive Animations

Gladiator Product Gladiator-Themed Product Showcase with Dynamic Particles & Interactive Animations

DDDOriginal: 2024-11-14 15:39:02335browse

소개

이 튜토리얼에서는 애니메이션 제품 카드, 동적 호버 효과, 클릭 상호 작용, 각 항목에 생기를 불어넣는 빛나는 입자 효과를 갖춘 초프리미엄 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에서 영감을 받은 이 쇼케이스는 현대적인 웹 디자인과 역사적인 주제를 결합한 힘을 강조합니다.

? 더 알아보기:

Explore Gladiators Battle: Dive into a world of ancient warriors and strategic gameplay at https://gladiatorsbattle.com.
GitHub: View more projects at https://github.com/HanGPIErr.
LinkedIn: Connect for updates on projects at https://www.linkedin.com/in/pierre-romain-lopez/.
Twitter: Follow for design and development insights at https://x.com/GladiatorsBT.
Stay tuned for more tutorials on creating engaging, interactive components!

The above is the detailed content of Gladiator Product Gladiator-Themed Product Showcase with Dynamic Particles & Interactive Animations. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html for this display github https zoom

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can You Detect Dark Mode in JavaScript?Next article：How Can You Detect Dark Mode in JavaScript?

See more

Gladiator Product Gladiator-Themed Product Showcase with Dynamic Particles & Interactive Animations

Related articles