布局框架

创意卡片式项目管理界面UI设计

面包多

创意卡片式项目管理界面UI设计-创客云
这是一款非常有创意的卡片式项目管理界面 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 伪元素的背景图片。

也想出现在这里?联系我们
创客主机
  1. <header>
  2.   <a href="#0" class="cd-logo"><img src="img/cd-logo.svg"></a>
  3.  
  4.   <button class="cd-nav-trigger">Menu<span aria-hidden="true" class="cd-icon"></span></button>
  5. </header>
  6.  
  7. <nav class="cd-primary-nav">
  8.   <ul>
  9.     <li class="cd-label">Navigation</li>
  10.     <li><a href="#0">The team</a></li>
  11.     <!-- 可以有更多的导航项 -->
  12.   </ul>
  13. </nav> <!-- .cd-primary-nav -->
  14.  
  15. <div class="cd-projects-container">
  16.   <ul>
  17.     <li class="single-project">
  18.       <div class="cd-title">
  19.         <h2>Project 1</h2>
  20.       </div> <!-- .cd-title -->
  21.  
  22.       <div class="cd-project-info">
  23.         <button class="cd-scroll">Scroll down</button>
  24.  
  25.         <div class="content-wrapper">
  26.           <p>
  27.             项目描述
  28.           </p>
  29.  
  30.           <!-- 额外的项目信息 -->
  31.         </div>
  32.       </div> <!-- .cd-project-info -->
  33.     </li>
  34.  
  35.     <!-- 其它项目 -->
  36.   </ul>
  37. </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 的部分。

  1. .cd-projects-container {
  2.   height: 100%;
  3.   position: relative;
  4.   overflow: hidden;
  5. }
  6. .cd-projects-container .single-project {
  7.   position: absolute;
  8.   top: 0px;
  9.   left: 0px;
  10.   height: 100%;
  11.   width: 100%;
  12.   transition: transform 0.4s;
  13. }
  14. .cd-projects-container .single-project:nth-of-type(2) {
  15.   transform: translateY(33.3333333333%);
  16. }
  17. .cd-projects-container .single-project:nth-of-type(3) {
  18.   transform: translateY(66.6666666667%);
  19. }

.cd-title(项目的标题)被设置为 33.33%(1/3 视口的高度),而它的伪元素.cd-title::before 被设置为 300%,实际是等于视口的高度。

  1. .cd-title {
  2.   height: 33.3333333333%;
  3. }
  4. .cd-title::before {
  5.   /* 背景图片 */
  6.   content: '';
  7.   position: absolute;
  8.   top: 0;
  9.   left: 0;
  10.   height: 300%;
  11.   width: 100%;
  12.   background-position: center center;
  13.   background-repeat: no-repeat;
  14.   background-size: cover;
  15. }
  16. .single-project:nth-of-type(1) .cd-title::before {
  17.   background-image: url(../img/img-1.jpg);
  18. }

当某个项目被选择的时候,该项目被添加一个.selected class,该 class 应用了一个 translateY(0)转换。同时将该项目的兄弟元素移动到屏幕之外 translateY(100%),这样使该项目占满整个屏幕。

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

对于.cd-project-info(项目信息),它有 100%的高度,一个 overflow: auto 属性(使其可以滚动),它被放置在父元素.single-project 的左上角位置。它的::before 伪元素是一个空白占位,它等于屏幕视口的宽度和高度,它的作用是让项目图片开始时可以全屏显示,而不是被 content-wrapper 的内容覆盖。

  1. .cd-project-info {
  2.   position: absolute;
  3.   top: 0;
  4.   left: 0;
  5.   width: 100%;
  6.   height: 100%;
  7.   overflow: auto;
  8.   opacity: 0;
  9.   visibility: hidden;
  10.   transition: opacity 0.4s, visibility 0.4s;
  11. }
  12. .cd-project-info::before {
  13.   /* 用与占位,显示项目图片 */
  14.   content: '';
  15.   display: block;
  16.   height: 100%;
  17.   width: 100%;
  18.   pointer-events: none;
  19. }
  20. .cd-project-info .content-wrapper {
  21.   position: relative;
  22.   z-index: 2;
  23.   padding: 2em 0 3em;
  24.   background-color: #FFFFFF;
  25. }
  26. .selected .cd-project-info {
  27.   opacity: 1;
  28.   visibility: visible;
  29.   transition: opacity 0s, visibility 0s;
  30. }

对于全屏导航菜单,开始时.cd-primary-nav 元素被放置在.cd-projects-container 的下面。当用户点击了.cd-nav-trigger 按钮之后,所有的项目被移动到屏幕的下方,这时全屏导航菜单被显示出来。

  1. .cd-primary-nav {
  2.   position: absolute;
  3.   top: 0;
  4.   left: 0;
  5.   /* height = (100% - 9%) - 9% is the space taken by the projects when the navigation is open */
  6.   height: 91%;
  7.   width: 100%;
  8.   overflow: auto;
  9.   opacity: 0;
  10. }
  11. .cd-primary-nav ul {
  12.   transform: translateY(50px);
  13.   transition: transform 0.4s;
  14. }
  15. .cd-primary-nav.nav-open {
  16.   opacity: 1;
  17. }
  18. .cd-primary-nav.nav-open ul {
  19.   transform: translateY(0);
  20. }
  21.  
  22. .cd-projects-container.nav-open .single-project {
  23.   box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  24.   transform: translateY(91%);
  25. }
  26. .cd-projects-container.nav-open .single-project:nth-of-type(2) {
  27.   transform: translateY(94%);
  28. }
  29. .cd-projects-container.nav-open .single-project:nth-of-type(3) {
  30.   transform: translateY(97%);
  31. }

JavaScript

该 UI 设计中使用 jQuery 来监听.cd-nav-trigger 和.single-project 元素上的点击事件,并为相应的元素添加和移除相应的 class。

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!