全天新浪三分彩走势欢迎您的到來!

                                        創意卡片式項目管理界面UI設計

                                        12/6/2015來源:Javascript教程人氣:11809

                                        這是一款非常有創意的卡片式項目管理界面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。



                                        全天新浪三分彩走势 腾讯5分全天计划 全天分分彩走势计划 三分快三精准计划 腾讯分分彩开奖官网