대화형 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>

이것은 마우스 입력/마우스 삭제에 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!