Шаблон слайд панелей

На этот раз в нашем эксперименте реализована идея перехода от элемента портфолио к странице полного описания. Панели движутся по оси y (на мобильных устройствах по оси x), а переход к полному описанию будет осуществляться при клике.

HTML

Cтруктура состоит из двух ненумерованных списков; в ul.cd-projects-previews будут содержаться миниатюрные изображения, а в ul.cd-projects детальная информация о проектах. В nav.cd-primary-nav поместим основную навигацию.

<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

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

.cd-projects > li {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: opacity 0.3s;
}

.cd-projects-previews li.slide-out {
 transform: translateX(-100%);
}

.cd-projects > li.selected {
 z-index: 1;
 opacity: 1;
 transition: opacity 0s;
}

 На устройствах с крупными экранам (разрешение более 1024px), высота проекта будет занимать 100% области видимости, а ширина проекта будет составлять ¼ экрана для отображения всех 4 миниатюр проекта.

@media only screen and (min-width: 1024px) {
 .cd-projects-previews li {
 display: inline-block;
 height: 100%;
 width: 25%;
 float: left;
 }
 .cd-projects-previews li.slide-out {
 transform: translateY(-100%);
 }
 .cd-projects-previews a {
 /* width equal to window width */
 width: 400%;
 }
 .cd-projects-previews li:nth-of-type(2) a {
 transform: translateX(-25%);
 }
 .cd-projects-previews li:nth-of-type(3) a {
 transform: translateX(-50%);
 }
 .cd-projects-previews li:nth-of-type(4) a {
 transform: translateX(-75%);
 }
}

Элемент навигации .cd-primary-nav помещаем ниже .cd-projects-container; при клике по .cd-nav-trigger, элементу будет добавлен класс .slide-out

.cd-primary-nav {
 position: absolute;
 z-index: 1;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 overflow: auto;
 text-align: center;
 opacity: 0;
 transition: opacity 0.6s;
}
.cd-primary-nav.nav-visible {
 opacity: 1;
}

Если вам нужно большее количество проектов, нежели 4, то вам следует обновить значения width/height превью изображения (так же изменить значение translate внутренних элементов <a>). Если вы пользуетесь SASS, то достаточно будет обновить значение переменной $items в файле > _variables.scss

jQuery

jQuery(document).ready(function($){
 //cache DOM elements
 var projectsContainer = $('.cd-projects-container'),
 projectsPreviewWrapper = projectsContainer.find('.cd-projects-previews'),
 projectPreviews = projectsPreviewWrapper.children('li'),
 projects = projectsContainer.find('.cd-projects'),
 navigationTrigger = $('.cd-nav-trigger'),
 navigation = $('.cd-primary-nav'),
 //if browser doesn't support CSS transitions...
 transitionsNotSupported = ( $('.no-csstransitions').length > 0);

 var animating = false,
 //will be used to extract random numbers for projects slide up/slide down effect
 numRandoms = projects.find('li').length, 
 uniqueRandoms = [];

 //open project
 projectsPreviewWrapper.on('click', 'a', function(event){
 event.preventDefault();
 if( animating == false ) {
 animating = true;
 navigationTrigger.add(projectsContainer).addClass('project-open');
 openProject($(this).parent('li'));
 }
 });

 navigationTrigger.on('click', function(event){
 event.preventDefault();
 
 if( animating == false ) {
 animating = true;
 if( navigationTrigger.hasClass('project-open') ) {
 //close visible project
 navigationTrigger.add(projectsContainer).removeClass('project-open');
 closeProject();
 } else if( navigationTrigger.hasClass('nav-visible') ) {
 //close main navigation
 navigationTrigger.removeClass('nav-visible');
 navigation.removeClass('nav-clickable nav-visible');
 if(transitionsNotSupported) projectPreviews.removeClass('slide-out');
 else slideToggleProjects(projectsPreviewWrapper.children('li'), -1, 0, false);
 } else {
 //open main navigation
 navigationTrigger.addClass('nav-visible');
 navigation.addClass('nav-visible');
 if(transitionsNotSupported) projectPreviews.addClass('slide-out');
 else slideToggleProjects(projectsPreviewWrapper.children('li'), -1, 0, true);
 }
 } 

 if(transitionsNotSupported) animating = false;
 });

 //scroll down to project info
 projectsContainer.on('click', '.scroll', function(){
 projectsContainer.animate({'scrollTop':$(window).height()}, 500); 
 });

 //check if background-images have been loaded and show project previews
 projectPreviews.children('a').bgLoaded({
 afterLoaded : function(){
 showPreview(projectPreviews.eq(0));
 }
 });

 function showPreview(projectPreview) {
 if(projectPreview.length > 0 ) {
 setTimeout(function(){
 projectPreview.addClass('bg-loaded');
 showPreview(projectPreview.next());
 }, 150);
 }
 }

 function openProject(projectPreview) {
 var projectIndex = projectPreview.index();
 projects.children('li').eq(projectIndex).add(projectPreview).addClass('selected');
 
 if( transitionsNotSupported ) {
 projectPreviews.addClass('slide-out').removeClass('selected');
 projects.children('li').eq(projectIndex).addClass('content-visible');
 animating = false;
 } else { 
 slideToggleProjects(projectPreviews, projectIndex, 0, true);
 }
 }

 function closeProject() {
 projects.find('.selected').removeClass('selected').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
 $(this).removeClass('content-visible').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
 slideToggleProjects(projectsPreviewWrapper.children('li'), -1, 0, false);
 });

 //if browser doesn't support CSS transitions...
 if( transitionsNotSupported ) {
 projectPreviews.removeClass('slide-out');
 projects.find('.content-visible').removeClass('content-visible');
 animating = false;
 }
 }

 function slideToggleProjects(projectsPreviewWrapper, projectIndex, index, bool) {
 if(index == 0 ) createArrayRandom();
 if( projectIndex != -1 && index == 0 ) index = 1;

 var randomProjectIndex = makeUniqueRandom();
 if( randomProjectIndex == projectIndex ) randomProjectIndex = makeUniqueRandom();
 
 if( index < numRandoms - 1 ) {
 projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool);
 setTimeout( function(){
 //animate next preview project
 slideToggleProjects(projectsPreviewWrapper, projectIndex, index + 1, bool);
 }, 150);
 } else if ( index == numRandoms - 1 ) {
 //this is the last project preview to be animated 
 projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
 if( projectIndex != -1) {
 projects.children('li.selected').addClass('content-visible');
 projectsPreviewWrapper.eq(projectIndex).addClass('slide-out').removeClass('selected');
 } else if( navigation.hasClass('nav-visible') && bool ) {
 navigation.addClass('nav-clickable');
 }
 projectsPreviewWrapper.eq(randomProjectIndex).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
 animating = false;
 });
 }
 }

 //http://stackoverflow.com/questions/19351759/javascript-random-number-out-of-5-no-repeat-until-all-have-been-used
 function makeUniqueRandom() {
 var index = Math.floor(Math.random() * uniqueRandoms.length);
 var val = uniqueRandoms[index];
 // now remove that value from the array
 uniqueRandoms.splice(index, 1);
 return val;
 }

 function createArrayRandom() {
 //reset array
 uniqueRandoms.length = 0;
 for (var i = 0; i < numRandoms; i++) {
 uniqueRandoms.push(i);
 }
 }
});

 /*
 * BG Loaded
 * Copyright (c) 2014 Jonathan Catmull
 * Licensed under the MIT license.
 */
 (function($){
 $.fn.bgLoaded = function(custom) {
 var self = this;

 // Default plugin settings
 var defaults = {
 afterLoaded : function(){
 this.addClass('bg-loaded');
 }
 };

 // Merge default and user settings
 var settings = $.extend({}, defaults, custom);

 // Loop through element
 self.each(function(){
 var $this = $(this),
 bgImgs = $this.css('background-image').split(', ');
 $this.data('loaded-count',0);
 $.each( bgImgs, function(key, value){
 var img = value.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
 $('<img/>').attr('src', img).load(function() {
 $(this).remove(); // prevent memory leaks
 $this.data('loaded-count',$this.data('loaded-count')+1);
 if ($this.data('loaded-count') >= bgImgs.length) {
 settings.afterLoaded.call($this);
 }
 });
 });

 });
 };
})(jQuery);

 

 

 ПРОВЕРЕНО! 

View demo

Понравился материал? Поделитесь с друзьями

---

С этим материалом смотрят: Похожие материалы не найдены

Feedback: 0