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 -->
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu