Sliding Panels Template by CodyHouse

Sliding Panels Template

Sliding panels template is yet another great project by CodyHouse. It is a simple portfolio template that presents a range of project images that slide out to reveal a selected work.

This template can be used to present a creative professional’s work in a very appealing and unusual way. Another great thing is that the template looks good on all major browsers (IE9+) and also on small mobiles.

The structure is simple enough to be easily adapted to your needs.

HTML

The HTML consists of two unordered lists – ul.cd-projects-previews for preview images and ul.cd-projects for project details. There is also nav.cd-primary-nav which wraps up the main navigation.

<div class="cd-projects-container">
<ul class="cd-projects-previews">
<li>
<a href="#0">
<div class="cd-project-title">
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</a>
 </li>
<li>
<!-- project preview here -->
</li> 
<!-- other project previews here -->
</ul> <!-- .cd-projects-previews -->
<ul class="cd-projects">
<li>
<div class="preview-image">
<div class="cd-project-title">
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</div>
<div class="cd-project-info">
<!-- project description here -->
</div> <!-- .cd-project-info -->
</li>
<!-- projects here -->
</ul> <!-- .cd-projects -->
<button class="scroll cd-text-replace">Scroll</button>
</div> <!-- .cd-project-container -->
<nav class="cd-primary-nav" id="primary-nav">
<ul>
<li class="cd-label">Navigation</li>
<li><a href="#0">The team</a></li>
<!-- navigation items here -->
</ul>
</nav> <!-- .cd-primary-nav -->

CSS

As already mentioned the on small devices this template looks really great and this is done by adding the required styles. On small devices,each of the <li> that is used for project images has the same width as the viewport and the height that equals to one-fourth of the viewport. Current template is using 4 project in the demo.

.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%);
}

A detail explanation of the code can be found at the project page.

Meanwhile, you can look at the demo or download the project to play with.

DEMO DOWNLOAD


A project by CodyHouse

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *