Mencipta Komponen Kad Pratonton NFT Interaktif

Tutorial ini membimbing anda membina kad pratonton NFT interaktif menggunakan HTML, CSS dan JavaScript. Diilhamkan oleh cabaran Mentor Frontend, projek ini mencipta kad yang menarik dan menarik yang memaparkan butiran NFT: imej, harga, baki masa dan maklumat pencipta.

Matlamat Reka Bentuk:

Kad itu mempamerkan NFT dengan:

1. Paparan imej NFT.
2. Kesan tuding mendedahkan tindanan warna pada imej.
3. Teks dinamik dan perubahan warna pada tuding (NFT dan nama pencipta).
4. Reka bentuk responsif merentas pelbagai peranti.

Langkah 1: Struktur HTML

HTML adalah mudah, mengatur imej NFT, butiran dan maklumat pencipta. Atribut id adalah penting untuk interaksi JavaScript. Contoh ringkas:

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

Struktur ini membentangkan data NFT yang diperlukan dengan cekap.

Langkah 2: Penggayaan CSS

Reka bentuk mengutamakan kesan lekukan dan reka letak. CSS utama untuk interaktiviti:

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

.overlay pada mulanya mempunyai opacity: 0, menjadi kelihatan (kelegapan 0.5) apabila kelas active ditambah. Peralihan yang lancar dipastikan menggunakan harta transition. Menuding pada nama NFT atau nama pencipta menukar warna teks melalui kelas name-active dan author-active, dikendalikan oleh JavaScript.

Langkah 3: Interaktiviti JavaScript

JavaScript mengendalikan kesan tuding:

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

Ini menambah/mengalih keluar kelas active pada mouseenter/mouseleave, mengawal keterlihatan tindanan. Pendengar acara yang serupa mengurus perubahan warna untuk NFT dan nama pencipta.

Langkah 4: Penyesuaian

Pemilih :root mentakrifkan skema warna, memudahkan penyesuaian:

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

Menukar pembolehubah ini mengemas kini keseluruhan warna komponen.

Kesimpulan:

Kad pratonton NFT ini menawarkan cara yang bersih dan interaktif untuk mempamerkan NFT. Gabungan struktur HTML, penggayaan CSS dan interaktiviti JavaScript mencipta pengalaman pengguna yang responsif dan menarik.

Projek lengkap boleh didapati di: https://www.php.cn/link/f591ed4b09492933c2de77c78c9d9a66

Atas ialah kandungan terperinci Mencipta Komponen Kad Pratonton NFT Interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!