Створення інтерактивного компонента попереднього перегляду NFT-картки

У цьому блозі я проведу вас через процес створення компонента попереднього перегляду NFT-карти за допомогою HTML, CSS та JavaScript. Цей проєкт був натхненний викликом Frontend Mentor, де я мав на меті створити візуально привабливу та інтерактивну картку, що показує деталі NFT, включаючи зображення, ціну, залишок часу та інформацію про творця.

Концепція

Метою було створити картку, яку можна використовувати для демонстрації NFT. Компонент мав включати:

1. Зображення NFT.
2. Ефект наведення, де на зображенні з'являється кольоровий наклад.
3. Динамічні зміни тексту та кольорів, коли користувач наводить курсор на певні елементи (наприклад, на назву NFT та ім'я творця).
4. Адаптивний дизайн, який добре виглядає на різних пристроях.

Крок 1: Структурування HTML

HTML-структура проста, але ефективна для відображення необхідної інформації про NFT. Ось основна частина HTML:

<div id="nft-card">
  <div id="nft-image-container" class="nft-image-container">
    <img id="nft-image" src="image.jpg" alt="NFT Image" />
    <div class="overlay"></div>
  </div>
  <div class="nft-details">
    <h2 class="heading">Equilibrium #3429</h2>
    <p>Our Equilibrium collection promotes balance and calm.</p>
    <p>0.041 ETH</p>
    <p>3 days left</p>
    <p>Creation of Jules Wyvern</p>
  </div>
</div>

Ця структура є досить зрозумілою, з секціями для зображення NFT, деталей і творця. Атрибути id особливо важливі, оскільки вони дозволяють нам націлюватися на певні елементи за допомогою JavaScript для інтерактивної поведінки.

Крок 2: Додавання стилів за допомогою CSS

Я використав мінімалістичний та чистий дизайн, з акцентом на ефектах наведення та макеті. Ось основні стилі, які роблять картку інтерактивною та візуально привабливою:

.nft-image-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 270px;
  height: 100%;
  background-color: var(--active-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

div.overlay, який накриває зображення, спочатку має opacity: 0, і стає видимим, коли додається клас active. Властивість transition забезпечує плавний перехід прозорості.

Додатково, назва NFT і ім’я творця змінюють колір при наведенні:

.heading {
  font-size: 21px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.name-active {
  color: var(--active-color);
}

.author-active {
  color: var(--active-color);
}

Коли користувач наводить курсор на назву або автора, колір тексту змінюється, щоб вказати на активний стан. Це досягається за допомогою JavaScript.

Крок 3: Зробимо картку інтерактивною за допомогою JavaScript

Основна функціональність інтерактивних ефектів наведення реалізована за допомогою JavaScript. Ось як імплементовано поведінку при наведенні:

1. Ефект наведення на зображення:

let imageCard = document.querySelector("#nft-image");

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

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

Цей код слухає події входу та виходу миші на контейнер зображення (прослуховувач подій (Event Listener)).
Коли користувач наводить курсор на зображення, до нього додається клас active, що робить накладку видимою. Коли наведення закінчується, клас видаляється, і накладка зникає.

1. Ефект наведення на назву NFT:

let nftName = document.querySelector("#nft-name");  

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

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

Це забезпечує, що ім’я автора також реагує на наведення курсору, покращуючи інтерактивний досвід.

Крок 4: Налаштування зовнішнього вигляду та стилю

Дизайн використовує кольорову схему, визначену в селекторі :root, що робить легким зміну кольорів для всього компонента:

:root {  
  --main-bg: hsl(217, 54%, 11%);  
  --card-bg: hsl(216, 50%, 16%);  
  --dark-blue: hsl(215, 32%, 27%);  
  --soft-blue: hsl(215, 51%, 70%);  
  --active-color: hsl(178, 100%, 50%);  
  --text-color: hsl(0, 0%, 100%);  
}

Це налаштування дозволяє легко налаштовувати кольорову схему, змінюючи змінні в одному місці.

Висновок

Цей компонент попереднього перегляду NFT-картки — простий, але ефективний спосіб демонструвати колекцію NFT. Він поєднує чистий дизайн з плавною інтерактивністю, що робить його відмінною основою для будь-яких проєктів, пов’язаних з NFT. Використання CSS для стилізації, JavaScript для взаємодії та HTML для структури створює єдиний і адаптивний досвід для користувача.

Ви можете подивитися весь проєкт тут.

Дякую за прочитане! Дайте знати, якщо у вас є питання чи відгуки.

Перекладено з: Creating an Interactive NFT Preview Card Component