インタラクティブな NFT プレビュー カード コンポーネントの作成

このチュートリアルでは、HTML、CSS、JavaScript を使用してインタラクティブな NFT プレビュー カードを構築する方法を説明します。 フロントエンド メンターのチャレンジからインスピレーションを得たこのプロジェクトは、画像、価格、残り時間、作成者情報などの NFT の詳細を表示する魅力的で魅力的なカードを作成します。

設計目標:

カードには次のような NFT が表示されます:

1. NFT画像表示
2. 画像上のカラー オーバーレイを表示するホバー効果。
3. ホバーするとテキストと色が動的に変化します (NFT と作成者名)。
4. さまざまなデバイスに対応したレスポンシブデザイン。

ステップ 1: HTML 構造

HTML は単純で、NFT の画像、詳細、作成者情報が整理されています。 id 属性は JavaScript の対話にとって重要です。 簡略化した例:

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

この構造は、必要な NFT データを効率的に提示します。

ステップ 2: CSS スタイル

ホバー効果とレイアウトを優先したデザインです。インタラクティブ性のための重要な CSS:

<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 には最初は opacity: 0 があり、active クラスが追加されると表示されます (不透明度 0.5)。 transition プロパティを使用すると、スムーズな移行が保証されます。 NFT 名または作成者の名前の上にマウスを置くと、JavaScript によって処理される name-active クラスと author-active クラスを介してテキストの色が変わります。

ステップ 3: JavaScript の対話性

JavaScript はホバー効果を処理します:

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

これにより、mouseenter/mouseleave で active クラスが追加/削除され、オーバーレイの表示/非表示を制御します。 同様のイベント リスナーが、NFT と作成者の名前の色の変更を管理します。

ステップ 4: カスタマイズ

:root セレクターは配色を定義し、カスタマイズを簡素化します:

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

これらの変数を変更すると、コンポーネント全体の色が更新されます。

結論:

この NFT プレビュー カードは、NFT を紹介するクリーンでインタラクティブな方法を提供します。 HTML 構造、CSS スタイル、および JavaScript インタラクティブ性の組み合わせにより、応答性の高い魅力的なユーザー エクスペリエンスが作成されます。

完全なプロジェクトは次から入手できます: https://www.php.cn/link/f591ed4b09492933c2de77c78c9d9a66

以上がインタラクティブな NFT プレビュー カード コンポーネントの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。