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

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

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

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

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

制作方法

HTML结构

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

<div class="cd-intro-block">
  <div class="content-wrapper">
    <h1>Squeezebox Portfolio Template</h1>
    <a href="#0" class='cd-btn' data-action="load-projects">Show projects</a>
  </div>
</div> <!-- .cd-intro-block -->
 
<div class="cd-projects-wrapper">
  <ul class="cd-slider">
    <li class="current">
      <a href="#0">
        <img src="img/img.png" alt="project image">
        <div class="project-info">
          <h2>Project 1</h2>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </a>
    </li>
 
    <li>
      <!-- project preview here -->
    </li>
 
    <!-- other projects here -->
  </ul>
 
  <ul class="cd-slider-navigation cd-img-replace">
    <li><a href="#0" class="prev inactive">Prev</a></li>
    <li><a href="#0" class="next">Next</a></li>
  </ul> <!-- .cd-slider-navigation -->
</div> <!-- .cd-projects-wrapper -->
 
<div class="cd-project-content">
  <div>
    <h2>Project title here</h2>
    <em>.....</em>
    <!-- other content here -->
  </div>
  <a href="#0" class="close cd-img-replace">Close</a>
</div> <!-- .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的宽度，使所有的<li>元素都在同一行上。这里使用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 <li> 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，和实现对图片幻灯片的基本控制：前后导航按钮，键盘导航和移动触摸导航等。