这是一款简洁时尚的全屏项目列表滑动面板UI设计效果。该项目菜单列表开始以缩略图的方式全屏垂直排列,当用户点击了相应的缩略图之后,其它缩略图面板向上滑动,将该项目的内容全部显露出来。
使用方法
HTML结构
该全屏项目列表滑动面板的HTML结果包括2个无序列表。ul.cd-projects-previews是项目缩略图,ul.cd-projects是项目明细。另外,nav.cd-primary-nav是一个全屏的导航菜单。
-
Project 1
Brief description of the project here
Scroll
- Navigation
- The team
CSS样式
在小屏幕设备中,每一个项目预览图的
元素的宽度等于整个视口的宽度,高度等于1/4视口的高度(因为DEMO中有4个子项目)。项目预览图片使用它们的子元素 来设置背景图片,它的高度等于整个视口的高度,并通过translate将它们分别移动到合适的位置上。.cd-projects-previews li {
height: 25%;
width: 100%;
overflow: hidden;
transition: transform 0.5s;
}
.cd-projects-previews a {
display: block;
height: 100vh;
width: 100%;
opacity: 0;
transition: opacity 0.5s;
transform: translateY(0%);
}
.cd-projects-previews li:nth-of-type(2) a {
transform: translateY(-25%);
}
.cd-projects-previews li:nth-of-type(3) a {
transform: translateY(-50%);
}
.cd-projects-previews li:nth-of-type(4) a {
transform: translateY(-75%);
}
对于项目明细.cd-projects > li,每一个列表项都设置为绝对定位,并且宽度和高度都等于视口的宽度和高度,默认它们是隐藏的。
.cd-projects > li {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 0.3s;
}
当用户选择了一个项目之后,相应的.cd-projects > li会被添加.selected class,同时会为项目的预览图添加.slide-out class。
.cd-projects-previews li.slide-out {
transform: translateX(-100%);
}
.cd-projects > li.selected {
z-index: 1;
opacity: 1;
transition: opacity 0s;
}
在大屏幕设备中(视口大于1024像素),项目预览图片的高度被设置为100%视口高度,宽度等于1/4视口宽度,同时向左移动
@media only screen and (min-width: 1024px) {
.cd-projects-previews li {
display: inline-block;
height: 100%;
width: 25%;
float: left;
}
.cd-projects-previews li.slide-out {
transform: translateY(-100%);
}
.cd-projects-previews a {
/* width equal to window width */
width: 400%;
}
.cd-projects-previews li:nth-of-type(2) a {
transform: translateX(-25%);
}
.cd-projects-previews li:nth-of-type(3) a {
transform: translateX(-50%);
}
.cd-projects-previews li:nth-of-type(4) a {
transform: translateX(-75%);
}
}
对于全屏导航菜单,.cd-primary-nav被放置在.cd-projects-container中,当用户点击了.cd-nav-trigger,项目预览图片会被添加.slide-out class。
.cd-primary-nav {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: auto;
text-align: center;
opacity: 0;
transition: opacity 0.6s;
}
.cd-primary-nav.nav-visible {
opacity: 1;
}
JavaScript
该UI设计中使用jQuery来检测项目预览图片的点击事件和.cd-nav-trigger的点击事件。当用户选择了一个项目或打开了主导航菜单,slideToggleProjects()函数会处理相应的项目滑入滑出效果,而makeUniqueRandom()函数则用于获取1-4之间的随机数。
function slideToggleProjects(projectsPreviewWrapper, projectIndex, index, bool) {
var randomProjectIndex = makeUniqueRandom();
if( index < numRandoms - 1 ) {
projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool);
setTimeout( function(){
//animate next preview project
slideToggleProjects(projectsPreviewWrapper, projectIndex, index + 1, bool);
}, 150);
} else {
//this is the last project preview to be animated
projectsPreviewWrapper.eq(randomProjectIndex)
.toggleClass('slide-out', bool)
.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
// ...
animating = false;
});
}
}