Maison > interface Web > tutoriel CSS > Création d'un composant de carte de prévisualisation NFT interactive

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

Patricia Arquette
Libérer: 2025-01-16 18:19:09
original
987 Les gens l'ont consulté

Creating an Interactive NFT Preview Card Component

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal