JS implementation of card project management interface UI design effect _javascript Skills

This is a very creative card-type project management interface UI design effect. In this UI design, the items are stacked on the screen as cards, and when you click on one of the items, the project picture is enlarged in full screen, scrolling down to see the item's introductory information.
The project management interface also provides a Full-screen navigation menu where users can trigger a full-screen menu by using the Hamburger icon in the upper-right corner.

How to use
HTML structure
The HTML structure of the card project management interface is divided into 3 parts:. Cd-nav-trigger is the trigger button for the Full-screen menu, Nav.cd-primary-nav is the full screen navigation menu,. Cd-projects-container is the container for the unordered list of items.

Each project contains a Div.cd-title element that represents the project title and a Div.cd-project-info element that represents the project information. The picture of the item is set to the background picture of the. Cd-title::before pseudo element.

CSS Styles
the Div.cd-project-info Element (project information) is set to 100% height and relative positioning. Each individual project uses absolute positioning and sets the height of 100% and places the upper-left corner of the Cd-project-info in their parent container. At first they are stacked together.

Then, the second and third items are moved down the y-axis using the Translatey property, respectively. Cd-project-info 1/3 and 2/3. This is where 3 items 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%);
}       

The. Cd-title (title of the item) is set to 33.33% (the height of the 1/3 viewport), and its pseudo element. Cd-title::before is set to 300%, which is actually equal to the height of the viewport.

. cd-title {
 height:33.3333333333%
}
. Cd-title::before {/
 * background picture *
 /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, the item is added a. Selected class, which applies a translatey (0) conversion. Also move the sibling element of the item to the outside of the screen Translatey (100%) so that the item fills the entire screen.

. Cd-projects-container. single-project.selected {
 /* selected item *
 /transform:translatey (0);
}
. Cd-projects-container. single-project.selected ~ li {
 /* hide Other Items *
 /Transform:translatey (100%);
}        

For. Cd-project-info (project information), it has a height of 100%, a Overflow:auto property (so that it can scroll), and it is placed in the upper-left corner of the parent element. Single-project. Its:: Before pseudo element is a blank placeholder, it equals the width and height of the screen viewport, and its function is to let the project picture begin full screen, not be covered by Content-wrapper content.

. 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 {
 /* with placeholder, show project picture/
 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, the. Cd-primary-nav element is placed underneath the. Cd-projects-container. When the user clicks on the. Cd-nav-trigger button, all items are moved below 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" 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 monitor the click events on the. Cd-nav-trigger and. Single-project elements, and to add and remove the corresponding class for the corresponding element.

JS implementation of the card-type project management interface UI design effect for everyone to share this, I hope this article will help you learn JavaScript program design.