菜单

js实现卡片式项目管理界面UI设计效果_javascript技巧_脚本之家澳门太阳集团

2020年3月8日 - 首页

那是一款非常有创新意识的卡牌式项目管理分界面UI设计功效。该UI设计中,将次第项目以卡牌的法子聚积排列在显示屏上,当点击了个中的某些项目标时候,该类型图片会全屏放大,向下滚动鼠标能够看来该项指标介绍新闻。该品种管理分界面还提供了贰个全屏的领航菜单,客户能够通过右上角的布达佩斯包Logo来触发全屏菜单。

应用方式HTML构造js实现卡片式项目管理界面UI设计效果_javascript技巧_脚本之家澳门太阳集团。该卡牌式项目管理界面包车型客车HTML构造分为3个部分:.cd-nav-trigger是全屏菜单的触及按键,nav.cd-primary-nav是全屏导航菜单,.cd-projects-container是项目冬季列表的器皿。

每二个门类都带有二个代表项目题指标div.cd-title成分和二个意味着项目音信的div.cd-project-info成分。项目标图片被安装为.cd-title::before伪成分的背景图片。

  Menu   Navigation The team        Project 1    Scroll down           

CSS样式div.cd-project-info成分被设置为100%的万丈和相对固定。每两个单独的体系都应用相对化定位,并设置百分百的莫斯中国科学技术大学学和停放在它们父容器.cd-project-info的左上角地点。伊始它们是聚积在联合签字的。

跟着,第二和第多个门类被利用translateY属性沿Y轴向下移动,分别移动.cd-project-info中度的52%和2/3。那样就是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 { transform: translateY;}.cd-projects-container .single-project:nth-of-type { transform: translateY;} 

.cd-title被安装为百分之四十,而它的伪成分.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 .cd-title::before { background-image: url;} 

当某些项目被筛选的时候,该类型被增添二个.selected
class,该class应用了三个translateY调换。同一时间将该品种的男士儿成分移动到显示屏之外translateY,那样使该类型占满整个显示屏。

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

对于.cd-project-info,它有百分百的中度,叁个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 =  - 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; transition: transform 0.4s;}.cd-primary-nav.nav-open { opacity: 1;}.cd-primary-nav.nav-open ul { transform: translateY;} .cd-projects-container.nav-open .single-project { box-shadow: 0 0 30px rgba; transform: translateY;}.cd-projects-container.nav-open .single-project:nth-of-type { transform: translateY;}.cd-projects-container.nav-open .single-project:nth-of-type { transform: translateY;} 

JavaScript该UI设计中接受jQuery来监听.cd-nav-trigger和.single-project成分上的点击事件,并为相应的因素加多和移除相应的class。

js达成卡片式项目管理分界面UI设计成效就为大家分享到这,希望本文所述对大家学习javascript程序设计有所支持。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图