js to achieve card-style project management interface UI design effect_javascript skills

This is a very creative card-style project management interface UI design effect. In this UI design, various items are stacked and arranged on the screen in the form of cards. When an item is clicked, the image of the item will be enlarged in full screen. You can scroll down to see the introduction information of the item.
The project management interface also provides a full-screen navigation menu that users can trigger through the hamburger icon in the upper right corner.

How to use
HTML structure
The HTML structure of the card-style project management interface is divided into three parts: .cd-nav-trigger is the trigger button of the full-screen menu, nav.cd-primary-nav is the full-screen navigation menu, and .cd-projects-container is the project unordered Container for lists.

Each project contains a div.cd-title element representing the project title and a div.cd-project-info element representing project information. The item's image is set as the background image of the .cd-title::before pseudo-element.

<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 style
The div.cd-project-info element (project information) is set to 100% height and relative positioning. Each individual project is positioned absolutely using 100% height and positioned in the upper left corner of their parent container .cd-project-info. Initially they are stacked on top of each other.

Then, the second and third projects are moved down along the Y-axis using the translateY attribute, moving 1/3 and 2/3 of the height of .cd-project-info respectively. In this way, 3 items each display 1/3 of the same screen.

.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 (the title of the project) is set to 33.33% (1/3 the height of the viewport), and its pseudo-element .cd-title::before is set to 300%, which is actually equal to the viewport height.

.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);
}        

When an item is selected, a .selected class is added to the item, which applies a translateY(0) transformation. At the same time, the sibling elements of the item are moved outside the screen translateY(100%), so that the item takes up the entire screen.

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

For .cd-project-info (project information), it has 100% height, an overflow: auto attribute (making it scrollable), and it is placed at the upper left corner of the parent element .single-project. Its ::before pseudo-element is a blank placeholder, which is equal to the width and height of the screen viewport. Its function is to allow the project image to be displayed in full screen at the beginning instead of being covered by the content of the content-wrapper.

.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;
}        

For full-screen navigation menus, initially the .cd-primary-nav element is placed below the .cd-projects-container. When the user clicks the .cd-nav-trigger button, all items are moved to the bottom of the screen and the full-screen navigation menu is displayed.

.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%);
}        

JavaScript
This UI design uses jQuery to listen for click events on the .cd-nav-trigger and .single-project elements, and add and remove corresponding classes for the corresponding elements.

JS implements the card-style project management interface UI design effect here. I hope this article will be helpful to everyone in learning javascript programming.