Erstellen einer interaktiven NFT-Vorschaukartenkomponente

Dieses Tutorial führt Sie durch die Erstellung einer interaktiven NFT-Vorschaukarte mit HTML, CSS und JavaScript. Inspiriert von einer Frontend-Mentor-Challenge erstellt dieses Projekt eine attraktive und ansprechende Karte mit NFT-Details: Bild, Preis, verbleibende Zeit und Informationen zum Ersteller.

Designziele:

Die Karte zeigt NFTs mit:

1. NFT-Bildanzeige.
2. Hover-Effekt, der eine Farbüberlagerung auf dem Bild sichtbar macht.
3. Dynamische Text- und Farbänderungen beim Hover (NFT- und Erstellernamen).
4. Responsives Design auf verschiedenen Geräten.

Schritt 1: HTML-Struktur

Der HTML-Code ist unkompliziert und organisiert NFT-Bilder, Details und Erstellerinformationen. id Attribute sind für die JavaScript-Interaktion von entscheidender Bedeutung. Ein vereinfachtes Beispiel:

<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>

Diese Struktur stellt die notwendigen NFT-Daten effizient dar.

Schritt 2: CSS-Styling

Das Design legt Wert auf Hover-Effekte und Layout. Wichtiges CSS für Interaktivität:

<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>

Die .overlay hat zunächst opacity: 0 und wird sichtbar (Deckkraft 0,5), wenn die Klasse active hinzugefügt wird. Mit der Eigenschaft transition werden fließende Übergänge gewährleistet. Wenn Sie mit der Maus über den NFT-Namen oder den Namen des Erstellers fahren, ändert sich die Textfarbe über die Klassen name-active und author-active, verwaltet von JavaScript.

Schritt 3: JavaScript-Interaktivität

JavaScript verarbeitet die Hover-Effekte:

<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>

Dies fügt die Klasse active bei Mouseenter/Mouseleave hinzu bzw. entfernt sie und steuert so die Sichtbarkeit des Overlays. Ähnliche Ereignis-Listener verwalten die Farbänderungen für die NFT- und Erstellernamen.

Schritt 4: Anpassung

Ein :root-Selektor definiert das Farbschema und vereinfacht so die Anpassung:

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

Durch das Ändern dieser Variablen werden die Farben der gesamten Komponente aktualisiert.

Fazit:

Diese NFT-Vorschaukarte bietet eine übersichtliche, interaktive Möglichkeit, NFTs zu präsentieren. Die Kombination aus HTML-Struktur, CSS-Stil und JavaScript-Interaktivität sorgt für ein reaktionsschnelles und ansprechendes Benutzererlebnis.

Das vollständige Projekt ist verfügbar unter: https://www.php.cn/link/f591ed4b09492933c2de77c78c9d9a66

Das obige ist der detaillierte Inhalt vonErstellen einer interaktiven NFT-Vorschaukartenkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!