Produit Gladiator Vitrine de produits sur le thème Gladiator avec particules dynamiques et animations interactives-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Produit Gladiator Vitrine de produits sur le thème Gladiator avec particules dynamiques et animations interactives

Nov 14, 2024 pm 03:39 PM

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

Présentation

Dans ce didacticiel, nous allons créer une vitrine de produits ultra-premium sur le thème d'un gladiateur 3D avec des cartes de produits animées, des effets de survol dynamiques, des interactions par clic et un effet de particules lumineuses qui donnent vie à chaque article. Conçue pour des expériences utilisateur immersives, cette vitrine combine des transformations 3D, des animations lumineuses et des reflets palpitants pour donner à chaque produit une sensation unique et interactive. Ce design est inspiré de Gladiators Battle, un jeu interactif où les joueurs vivent le frisson des batailles et de la stratégie anciennes.

Suivez pour créer votre propre vitrine de produits interactive et apprenez à utiliser HTML, CSS et JavaScript pour des visuels époustouflants et des animations dynamiques.

Étape 1 : Configuration de la structure HTML
Chaque fiche produit représente un objet sur le thème des gladiateurs, comme un bouclier ou une épée, avec des éléments interactifs tels que des badges, des icônes et des statistiques.

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;3D Gladiator Product Showcase&lt;/title&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;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;
}

Copier après la connexion

Styles de cartes de produits
Chaque carte est conçue avec un aspect 3D et comprend des effets de survol pour l'interactivité. L'effet :hover offre une rotation et un éclat subtils, améliorant la sensation premium.

.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);
}

Copier après la connexion

Statistiques et barres de progression
Nous utilisons des barres de progression pour afficher des attributs tels que la défense et la durabilité, ce qui ajoute un élément visuel unique à la vitrine.

.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);
}

Copier après la connexion

Ajout d'effets de particules
L'ajout de particules qui bougent et changent de couleur améliore la sensation immersive. Ces particules peuvent pulser pour donner un effet lumineux.

.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;
}

Copier après la connexion

Étape 3 : Ajout de l'interactivité JavaScript
Le JavaScript gère les animations de survol, les événements de clic et l'effet de particules lumineuses.

Ajout d'animations de survol et de clic
Nous animons la rotation et la mise à l'échelle de la carte lors du mouvement de la souris et basculons le zoom en un clic.

const cards = document.querySelectorAll('.product-card');

cards.forEach((card) =&gt; {
  let isClicked = false;

  card.addEventListener('mousemove', (e) =&gt; {
    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', () =&gt; {
    if (!isClicked) {
      card.style.transform = 'rotateY(0deg) rotateX(0deg) scale(1)';
    }
  });

  card.addEventListener('click', () =&gt; {
    isClicked = !isClicked;
    card.style.transform = isClicked
      ? 'scale(1.2) rotateY(0deg) rotateX(0deg)'
      : 'rotateY(0deg) rotateX(0deg) scale(1)';
  });
});

Copier après la connexion

Ajout de particules lumineuses
Pour sublimer l'ambiance, nous créons des particules qui se déplacent de manière aléatoire autour de chaque fiche produit.

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(() =&gt; particle.remove(), 5000);
}

setInterval(() =&gt; {
  cards.forEach(() =&gt; addParticleEffect());
}, 1000);

Copier après la connexion

Conclusion
Construire une vitrine de produits sur le thème des gladiateurs 3D avec des animations dynamiques et des effets de particules crée une expérience attrayante et interactive qui peut captiver les utilisateurs. En combinant CSS pour le style visuel et JavaScript pour l'interactivité, nous avons créé un composant immersif de haute qualité, idéal pour les présentations de produits ou les sites liés aux jeux. Inspirée de Gladiators Battle, cette vitrine met en évidence la puissance de la combinaison d'une conception Web moderne et de thèmes historiques.

? Découvrez-en davantage :

Explorez Gladiators Battle : plongez dans un monde d'anciens guerriers et un gameplay stratégique sur https://gladiatorsbattle.com.
GitHub : consultez plus de projets sur https://github.com/HanGPIErr.
LinkedIn : connectez-vous pour des mises à jour sur les projets sur https://www.linkedin.com/in/pierre-romain-lopez/.
Twitter : suivez-nous pour obtenir des informations sur la conception et le développement sur https://x.com/GladiatorsBT.
Restez à l'écoute pour plus de didacticiels sur la création de composants attrayants et interactifs !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn