Vitrine d'art textuel : Bataille de gladiateurs ⚔️

Vous êtes-vous déjà demandé comment combiner un superbe art textuel 3D avec une expérience Web hautement interactive et immersive ? Ce projet démontre comment nous avons atteint cet objectif pour Gladiators Battle, un jeu de cartes sur navigateur dans lequel les joueurs collectionnent, combattent et conquièrent dans une arène de gladiateurs épique.

Construit dans le cadre d'un défi créatif, ce projet présente des animations CSS avancées, une interactivité JavaScript et des effets 3D pour créer une expérience inoubliable. Que vous soyez un développeur en quête d'inspiration ou un passionné de gladiateurs, cette vitrine saura vous captiver !

✨ Aperçu de la magie

Lorsque vous visiterez la démo, voici ce que vous vivrez :

• Une conception artistique de texte 3D rotative qui réagit dynamiquement aux entrées de votre souris.
• Particules flottantes qui ajoutent un élément magique et interactif.
• Effets lumineux interactifs suivant votre curseur, améliorant l'impact visuel.
• Un bouton d'appel à l'action réactif qui vous dirige vers la page d'accueil de Gladiators Battle.

? Découvrez la démo en direct sur CodePen

https://codepen.io/HanGPIIIErr/pen/ZYzzMvO

? Derrière le design

Ce projet a été construit en utilisant les trois technologies front-end principales : HTML, CSS et JavaScript. Voici comment tout se déroule :

1. Structure HTML

La structure est simple et facile à suivre :

• Un conteneur pour contenir tous les éléments 3D et interactifs.
• Un logo pour l'image de marque, garantissant que Gladiators Battle se démarque.
• Un CTA (Call-to-Action) encourageant les utilisateurs à visiter et à jouer au jeu.
• Extrait HTML :

<div>



<ol>
<li>CSS Styling</li>
</ol>

<p>The CSS transforms the structure into an immersive masterpiece:</p>

<ul>
<li>3D Perspective: Elements like the title and subtitle have depth using translateZ and rotation.</li>
<li>Dynamic Gradients and Shadows: These provide glowing effects, making the text pop.</li>
<li>Animations: Floating movements and glowing halos give a modern, fluid look.</li>
</ul>

<p>Key CSS Highlights:<br>
</p>

<pre class="brush:php;toolbar:false">.title {
  font-family: 'Cinzel', serif;
  font-size: 7rem;
  color: transparent;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffcc00, #ff4700, #e5b240, #ffcc00);
  -webkit-background-clip: text;
  text-shadow: 0px 6px 10px rgba(255, 71, 0, 0.6), 0 0 30px rgba(255, 204, 0, 0.8);
  transform: translateZ(100px) rotateX(10deg) rotateY(-10deg);
  animation: floating-title 4s infinite alternate ease-in-out, pulse 5s infinite;
}

Retrouvez le CSS complet dans le projet CodePen.

1. Interactivité JavaScript

Le JavaScript donne vie à la page :

Mouse Tracking: Tilts the text dynamically based on cursor movement.
Floating Particles: Particles follow your mouse, adding a magical touch.
Smooth Entry Animations: The logo and text art fade in gracefully when the page loads.

Points forts de JavaScript :

/

/ Dynamic 3D Tilt Effect
textArt.addEventListener('mousemove', (e) => {
  const { clientX, clientY } = e;
  const { width, height } = container.getBoundingClientRect();

  const xRotation = ((clientY / height) - 0.5) * 30;
  const yRotation = ((clientX / width) - 0.5) * 30;

  textArt.style.transform = `rotateX(${xRotation}deg) rotateY(${yRotation}deg)`;
});

Retrouvez le code JavaScript complet dans le projet CodePen.

⚔️ Pourquoi les gladiateurs se battent ?

Gladiators Battle n'est pas seulement un jeu, c'est un univers de stratégie et d'aventure. Voici ce à quoi vous pouvez vous attendre :

• Collectez des cartes puissantes : construisez le deck de vos rêves et dominez l'arène.
• Combattez l'IA ou de vrais joueurs : testez votre stratégie et revendiquez la gloire.
• Gagnez des récompenses : débloquez des cartes rares et de la précieuse monnaie du jeu.
• Explorez les mini-jeux : plus de 21 mini-jeux uniques, du combat aux énigmes.

? Visitez maintenant : GladiatorsBattle.com

? Comment l'essayer vous-même

? Conclusion : Un univers de possibilités

Ce projet 3D Text Art est un petit aperçu de ce qui est possible avec HTML, CSS et JavaScript. Que vous soyez débutant ou développeur chevronné, des projets créatifs comme celui-ci sont un excellent moyen de mettre en valeur vos compétences et de créer des expériences interactives.

Mais ce n'est que le début. Plongez dans Gladiators Battle, où vous découvrirez des batailles épiques, des mini-jeux captivants et une communauté florissante de joueurs et de développeurs.

? Explorez davantage

• Site Web : https://gladiatorsbattle.com/
• X (anciennement Twitter) : https://x.com/GladiatorsBT
• LinkedIn : https://www.linkedin.com/in/pierre-romain-lopez/
• Discorde : https://discord.gg/YBNF7KjGwx

Merci d'avoir lu et bon codage ! ?

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!