html 展示文件列表,创意图片画廊形式展示文件项目UI界面设计

这是一款非常有创意的以图片画廊形式展示文件项目UI界面设计效果。该效果在第一个界面上有一个“显示项目”按钮，用户点击后可进入图片画廊界面，每一个项目以图片的方式滑动显示，点击相应的图片又会进入相应的项目介绍页面。

该文件展示效果设计在显示项目”按钮界面，图片画廊界面和项目介绍界面之间，用户可以自由的来回切换。

这个效果采用响应式设计，它支持移动手机的滑动触摸。在桌面设备上，还可以使用鼠标滑动来滚动图片。它所有的动画过渡效果都采用CSS3来制作，非常平滑自然。

下面的GIF图片展示了这个图片画廊形式展示文件项目UI界面设计效果的工作过程。

制作方法

HTML结构

这个UI设计效果的HTML结构分为3个部分：.cd-intro-block是包含“显示项目”按钮的元素。.cd-slider元素是图片画廊(幻灯片)。.cd-project-content是项目的介绍页面。

CSS样式

当用户点击了按钮a[data-action="show-projects"]的时候，.cd-intro-block元素和.cd-projects-wrapper会被添加.projects-visible class，这个class会使按钮界面向上移动和使项目图片画廊进入页面中。.cd-intro-block会沿Y轴向上移动90%，同时.cd-projects-wrapper的可见性被设置为visible。

.cd-intro-block {

transition: transform 0.5s;

transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);

}

.cd-intro-block.projects-visible {

/* translate the .cd-intro-block element to reveal the projects slider */

transform: translateY(-90%);

box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);

cursor: pointer;

}

.cd-projects-wrapper {

position: fixed;

z-index: 1;

top: 0;

left: 0;

width: 100%;

height: 100%;

visibility: hidden;

transition: visibility 0s 0.5s;

}

.cd-projects-wrapper.projects-visible {

visibility: visible;

transition: visibility 0s 0s;

}

对于项目图片进入屏幕的动画效果，是在每一个项目上添加了一个.slides-in class，它们有50毫秒的时间延迟。这个class会根据屏幕的尺寸来产生不同的动画效果。

在移动手机设备中，每一个列表元素默认有100%的宽度和opacity: 0，当.slides-in class被添加的时候，cd-translate 动画就会被执行。

.cd-slider li {

opacity: 0;

}

.cd-slider li.slides-in {

opacity: 1;

animation: cd-translate 0.5s;

}

@keyframes cd-translate {

0% {

opacity: 0;

transform: translateY(100px);

}

100% {

opacity: 1;

transform: translateY(0);

}

}

在桌面设备中(视口大于900像素)，每一个列表项元素默认26%的宽度，并设置translateX: 400%和rotate: -10deg，当.slides-in class被添加的时候，每一个项目图片被移动会原来的位置(translateX:0)，以及旋转角度变为0。

@media only screen and (min-width: 900px) {

.cd-slider li {

position: relative;

float: left;

width: 26%;

top: 50%;

transform: translateX(400%) translateY(-50%) rotate(-10deg);

transition: opacity 0s 0.3s, transform 0s 0.3s;

}

.cd-slider li.slides-in {

/* reset style */

animation: none;

transform: translateY(-50%);

}

}

另外在桌面设备的项目图片幻灯片中，所有的项目都是相对定位，并有一个固定的宽度(26%)和一个左浮动(float: left)。.cd-slider元素的总宽度是可能会发生变化的(在javascript代码中实现)，所以这里将所有的列表项元素都放置在同一行上面。

当用户点击.prev和.next前后导航箭头按钮时，.cd-slider中的列表项会被向左或向右移动3倍列表项宽度加上它们的margin值的宽度。

这个设计中还有一种非常特别的手风琴弹性拉伸效果，它是通过执行cd-slide-n动画来实现的。

@keyframes cd-slide-n {

0%, 100% {

transform: translateY(-50%);

}

50% {

transform: translateY(-50%) translateX(translateValue);

}

}

上面的代码的意思是在.cd-slider的列表项进行过渡动画的时候统一执行一个动画效果，每一个动画效果在50%帧的时候优惠执行一个不同translateX值的动画。

下面的GIF图片展示了这个效果：

JAVASCRIPT

在桌面设备上，该设计改变.cd-slider的宽度，使所有的

元素都在同一行上。这里使用setSliderContainer()方法来设置宽度，并在屏幕尺寸改变时修改它。另外，在屏幕尺寸改变时，还会更新.cd-slider的移动值。

function setSliderContainer() {

var mq = checkMQ(); //function to check mq value

if ( mq == 'desktop' ) {

var slides = projectsSlider.children('li'), // projectsSlider = $('.cd-slider')

slideWidth = slides.eq(0).width(),

marginLeft = Number(projectsSlider.children('li').eq(1).css('margin-left').replace('px', '')),

sliderWidth = ( slideWidth + marginLeft )*( slides.length ) + 'px',

slideCurrentIndex = projectsSlider.children('li.current').index(); //index of the first visible slide

projectsSlider.css('width', sliderWidth);

//if the first visible slide is not the first

child, update the projectsSlider translate value

( slideCurrentIndex != 0 ) && setTranslateValue(projectsSlider, ( slideCurrentIndex * (slideWidth + marginLeft) + 'px'));

} else {

//on mobile, reset style

projectsSlider.css('width', '');

setTranslateValue(projectsSlider, 0);

}

resizing = false;

}

function setTranslateValue(item, translate) {

item.css({

'-moz-transform': 'translateX(-' + translate + ')',

'-webkit-transform': 'translateX(-' + translate + ')',

'-ms-transform': 'translateX(-' + translate + ')',

'-o-transform': 'translateX(-' + translate + ')',

'transform': 'translateX(-' + translate + ')',

});

}

var resizing = false;

setSliderContainer();

$(window).on('resize', function(){

//on resize - update projectsSlider width and translate value

if( !resizing ) {

window.requestAnimationFrame(setSliderContainer);

resizing = true;

}

});

另外，还使用jQuery来添加和删除相应的class，和实现对图片幻灯片的基本控制：前后导航按钮，键盘导航和移动触摸导航等。