Sliding preview images Panels Template with jQuery

Sliding preview images Panels Template with jQuery

 

This is A simple portfolio template, with project preview images that slide out to reveal the selected project.
We’re not new to experimenting with portfolio templates. This time, we’ve been playing around with the idea of moving blocks of content as a way to transition from the main/gallery page to the project page. All panels move along the y-axis (x-axis on smaller devices), and the movement is triggered by whether the user wants to learn more about a project, or wants to access the navigation.

Creating the structure

The HTML structure is composed of two unordered lists, the ul.cd-projects-previewsfor the project preview images and the ul.cd-projects for the project details, and anav.cd-primary-nav wrapping 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 -->

Read More https://codyhouse.co/gem/sliding-panels-template/