這是一款非常有創意的卡片式項目管理界面UI設計效果。該UI設計中，將各個項目以卡片的方式堆疊排列在屏幕上，當點擊了其中的某個項目的時候，該項目圖片會全屏放大，向下滾動鼠標可以看到該項目的介紹信息。
該項目管理界面還提供了一個全屏的導航菜單，用戶可以通過右上角的漢堡包圖標來觸發全屏菜單。
使用方法
HTML結構
該卡片式項目管理界面的HTML結構分為3個部分：.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 class，該class應用了一個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偽元素是一個空白占位，它等于屏幕視口的寬度和高度，它的作用是讓項目圖片開始時可以全屏顯示，而不是被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;} 對于全屏導航菜單，開始時.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%);} JavaScript
該UI設計中使用jQuery來監聽.cd-nav-trigger和.single-project元素上的點擊事件，并為相應的元素添加和移除相應的class。
js實現卡片式項目管理界面UI設計效果就為大家分享到這，希望本文所述對大家學習javascript程序設計有所幫助。
新聞熱點
疑難解答
