Node.js를 사용하여 카드 스타일 프로젝트 관리 인터페이스 UI 디자인 effect_javascript 기술 달성

매우 창의적인 카드 스타일의 프로젝트 관리 인터페이스 UI 디자인 효과입니다. 이 UI 디자인에서는 다양한 아이템이 카드 형태로 화면에 쌓여 배열되어 있으며, 아이템을 클릭하면 해당 아이템의 이미지가 전체 화면으로 확대되어 아이템 소개 정보를 볼 수 있습니다. .
프로젝트 관리 인터페이스는 오른쪽 상단 모서리에 있는 햄버거 아이콘으로 실행할 수 있는 전체 화면 탐색 메뉴도 제공합니다.

사용방법
HTML 구조
카드 스타일 프로젝트 관리 인터페이스의 HTML 구조는 세 부분으로 나뉩니다. .cd-nav-trigger는 전체 화면 메뉴의 트리거 버튼이고, nav.cd-primary-nav는 전체 화면 탐색 메뉴이며, .cd-projects-container는 목록에 대한 순서가 지정되지 않은 프로젝트 컨테이너입니다.

각 프로젝트에는 프로젝트 제목을 나타내는 div.cd-title 요소와 프로젝트 정보를 나타내는 div.cd-project-info 요소가 포함되어 있습니다. 항목의 이미지는 .cd-title::before 의사 요소의 배경 이미지로 설정됩니다.

<header>
 <a href="#0" class="cd-logo"><img src="img/cd-logo.svg"></a>
  
 <button class="cd-nav-trigger">Menu<span aria-hidden="true" class="cd-icon"></span></button>
</header>
 
<nav class="cd-primary-nav">
 <ul>
  <li class="cd-label">Navigation</li>
  <li><a href="#0">The team</a></li>
  <!-- 可以有更多的导航项 -->
 </ul>
</nav> <!-- .cd-primary-nav -->
 
<div class="cd-projects-container">
 <ul>
  <li class="single-project">
   <div class="cd-title">
    <h2>Project 1</h2>
   </div> <!-- .cd-title -->
 
   <div class="cd-project-info">
    <button class="cd-scroll">Scroll down</button>
     
    <div class="content-wrapper">
     <p>
      项目描述
     </p>
 
     <!-- 额外的项目信息 -->
    </div>
   </div> <!-- .cd-project-info -->
  </li>
 
  <!-- 其它项目 -->
 </ul>
</div> <!-- .cd-projects-container -->    

CSS 스타일
div.cd-project-info 요소(프로젝트 정보)는 높이 100% 및 상대 위치로 설정됩니다. 각 개별 프로젝트는 100% 높이를 사용하여 절대적으로 위치가 지정되며 상위 컨테이너인 .cd-project-info의 왼쪽 상단에 위치합니다. 처음에는 서로 겹쳐져 있습니다.

그런 다음 두 번째와 세 번째 프로젝트는 TranslateY 속성을 사용하여 Y축을 따라 아래로 이동하여 각각 .cd-project-info 높이의 1/3과 2/3만큼 이동합니다. 이런 식으로 3개의 항목이 각각 동일한 화면의 1/3을 표시합니다.

.cd-projects-container {
 height: 100%;
 position: relative;
 overflow: hidden;
}
.cd-projects-container .single-project {
 position: absolute;
 top: 0px;
 left: 0px;
 height: 100%;
 width: 100%;
 transition: transform 0.4s;
}
.cd-projects-container .single-project:nth-of-type(2) {
 transform: translateY(33.3333333333%);
}
.cd-projects-container .single-project:nth-of-type(3) {
 transform: translateY(66.6666666667%);
}       

.cd-title(프로젝트 제목)은 33.33%(뷰포트 높이의 1/3)로 설정되고 의사 요소인 .cd-title::before는 300%로 설정됩니다. 실제로는 뷰포트 높이와 같습니다.

.cd-title {
 height: 33.3333333333%;
}
.cd-title::before {
 /* 背景图片 */
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 height: 300%;
 width: 100%;
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}
.single-project:nth-of-type(1) .cd-title::before {
 background-image: url(../img/img-1.jpg);
}        

항목을 선택하면 해당 항목에 .selected 클래스가 추가되어translateY(0) 변환이 적용됩니다. 동시에 항목의 형제 요소가 화면 TranslateY(100%) 밖으로 이동하여 항목이 전체 화면을 차지합니다.

.cd-projects-container .single-project.selected {
 /* 被选择的项目 */
 transform: translateY(0);
}
.cd-projects-container .single-project.selected ~ li {
 /* 隐藏其它项目 */
 transform: translateY(100%);
}        

.cd-project-info(프로젝트 정보)의 경우 높이가 100%이고 Overflow: auto 속성(스크롤 가능)을 가지며 상위 요소인 .single-project의 왼쪽 상단에 배치됩니다. ::before 의사 요소는 화면 뷰포트의 너비 및 높이와 동일한 빈 자리 표시자입니다. 해당 기능은 프로젝트 이미지가 시작 부분의 내용으로 가려지는 대신 전체 화면에 표시되도록 하는 것입니다. 콘텐츠 래퍼.

.cd-project-info {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.4s, visibility 0.4s;
}
.cd-project-info::before {
 /* 用与占位，显示项目图片 */
 content: '';
 display: block;
 height: 100%;
 width: 100%;
 pointer-events: none;
}
.cd-project-info .content-wrapper {
 position: relative;
 z-index: 2;
 padding: 2em 0 3em;
 background-color: #FFFFFF;
}
.selected .cd-project-info {
 opacity: 1;
 visibility: visible;
 transition: opacity 0s, visibility 0s;
}        

전체 화면 탐색 메뉴의 경우 처음에는 .cd-primary-nav 요소가 .cd-projects-container 아래에 배치됩니다. 사용자가 .cd-nav-trigger 버튼을 클릭하면 모든 항목이 화면 하단으로 이동되고 전체 화면 탐색 메뉴가 표시됩니다.

.cd-primary-nav {
 position: absolute;
 top: 0;
 left: 0;
 /* height = (100% - 9%) - 9% is the space taken by the projects when the navigation is open */
 height: 91%;
 width: 100%;
 overflow: auto;
 opacity: 0;
}
.cd-primary-nav ul {
 transform: translateY(50px);
 transition: transform 0.4s;
}
.cd-primary-nav.nav-open {
 opacity: 1;
}
.cd-primary-nav.nav-open ul {
 transform: translateY(0);
}
 
.cd-projects-container.nav-open .single-project {
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
 transform: translateY(91%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(2) {
 transform: translateY(94%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(3) {
 transform: translateY(97%);
}        

자바스크립트
이 UI 디자인은 jQuery를 사용하여 .cd-nav-trigger 및 .single-project 요소에서 클릭 이벤트를 수신하고 해당 요소에 대해 해당 클래스를 추가 및 제거합니다.

JS는 모든 사람을 위한 카드 스타일 프로젝트 관리 인터페이스의 UI 디자인 효과를 구현합니다. 이 글이 모든 사람이 자바스크립트 프로그래밍 디자인을 배우는 데 도움이 되기를 바랍니다.