Création d'un composant de carte de prévisualisation NFT interactive

Ce didacticiel vous guide dans la création d'une carte d'aperçu NFT interactive en utilisant HTML, CSS et JavaScript. Inspiré d'un défi Frontend Mentor, ce projet crée une carte attrayante et attrayante affichant les détails du NFT : image, prix, temps restant et informations sur le créateur.

Objectifs de conception :

La carte présente les NFT avec :

1. Affichage d'images NFT.
2. Effet de survol révélant une superposition de couleurs sur l'image.
3. Texte dynamique et changements de couleur au survol (NFT et noms des créateurs).
4. Conception réactive sur divers appareils.

Étape 1 : Structure HTML

Le HTML est simple, organisant l'image NFT, les détails et les informations sur le créateur. Les attributs id sont cruciaux pour l'interaction JavaScript. Un exemple simplifié :

<code class="language-html"><div id="nft-card">
  <div id="nft-image">...</div>
  <div id="nft-details">...</div>
  <div id="nft-creator">...</div>
</div></code>

Cette structure présente efficacement les données NFT nécessaires.

Étape 2 : Style CSS

La conception donne la priorité aux effets de survol et à la mise en page. CSS clé pour l'interactivité :

<code class="language-css">.nft-image-container .overlay {
  position: absolute;
  /* ... other styles ... */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nft-image-container.active .overlay {
  opacity: 0.5;
}

.heading {
  cursor: pointer;
  transition: color 0.3s ease;
}

.name-active, .author-active {
  color: var(--active-color);
}</code>

Le .overlay a initialement opacity: 0, devenant visible (opacité 0,5) lorsque la classe active est ajoutée. Des transitions fluides sont assurées grâce à la propriété transition. Le survol du nom du NFT ou du nom du créateur modifie la couleur du texte via les classes name-active et author-active, gérées par JavaScript.

Étape 3 : Interactivité JavaScript

JavaScript gère les effets de survol :

<code class="language-javascript">let imageCard = document.querySelector("#nft-image");

imageCard.addEventListener("mouseenter", () => {
  imageCard.classList.add('active');
});

imageCard.addEventListener("mouseleave", () => {
  imageCard.classList.remove('active');
});

// Similar event listeners for #nft-name and #nft-creator</code>

Cela ajoute/supprime la classe active sur mouseenter/mouseleave, contrôlant la visibilité de la superposition. Les écouteurs d'événements similaires gèrent les changements de couleur pour les noms NFT et des créateurs.

Étape 4 : Personnalisation

Un sélecteur :root définit la palette de couleurs, simplifiant la personnalisation :

<code class="language-css">:root {
  --main-bg: hsl(217, 54%, 11%);
  /* ... other color variables ... */
}</code>

La modification de ces variables met à jour les couleurs de l'ensemble du composant.

Conclusion :

Cette carte d'aperçu NFT offre un moyen propre et interactif de présenter les NFT. La combinaison de la structure HTML, du style CSS et de l'interactivité JavaScript crée une expérience utilisateur réactive et engageante.

Le projet complet est disponible sur : https://www.php.cn/link/f591ed4b09492933c2de77c78c9d9a66

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!