27.08.14, 19:48
0 комментарий
  Уроки

Разработка навигации с анимированными стрелками при помощи FlexSlider и CSS3

Наверняка все вы знакомы с руководствами от Codrops. Они действительно вдохновляют на собственные проекты. Мы немного поиграли с демо той навигации, и были впечатлены. Тут же назрел вопрос о том, насколько сложно реализовать подобную навигацию на слайдере без использования непосредственного слайдера. Первой же пришедшей в голову опцией стал FlexSlider.

Нам очень нравится FlexSlider. Им довольно просто пользоваться и, более того, он позволяет создавать адаптивные слайдеры, которые будут идеально отображаться во всех современных браузерах. Кроме этого, он предлагает множество опций и, что более важно, несколько удобных callback-событий. Учитывая то, сколько раз мы уже использовали FlexSlider в заказных проектах, мы были просто уверены в том, что нам удастся комбинировать навигацию от Mary Lou вместе с FlexSlider.

Вот чем мы сегодня займемся:
Мы попробуем реализовать 4 стиля при помощи собственного кода, а вам в рамках данного руководства придется воспользоваться CSS3 и jQuery.

Настраиваем FlexSlider

Прежде чего, вам нужно уметь настраивать FlexSlider. Мы не будем рассказывать об этом в данном руководстве, но вы можете ознакомиться с процессом здесь.

Вот так выглядит стандартная HTML-разметка для слайдера:

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>


Как только мы запустим его, нам нужно будет настроить его и добавить несколько скриптов для работы с разметкой навигации в FlexSlider, чтобы у нас была возможность позже изменить ее внешний вид. По умолчанию при запуске слайдера вы получите следующую HTML-разметку (мы получили ее при помощи Web Inspector).

<ul class="flex-direction-nav">
	<li><a class="flex-prev" href="#">Previous</a></li>
	<li><a class="flex-next" href="#">Next</a></li>
</ul>


Callback-события

Нам нужно добавить подпись и изображение в слайдер. Выше приведена уже готовая HTML-разметка, а ниже вы можете видеть ту, что вам нужно будет использовать.

<div class="flexslider">
  <ul class="slides">
    <li>
			<img src="img/full/5.jpg" alt="icy Mountain" data-thumbnail="img/thumbnail/5.jpg" />	
		</li>		
 		<li>
			<img src="img/full/3.jpg" alt="Stoney Creek" data-thumbnail="img/thumbnail/3.jpg" />	
		</li>
    <li>
			<img src="img/full/2.jpg" alt="Narrow Road" data-thumbnail="img/thumbnail/2.jpg" />	
		</li>						 		
    <li>
			<img src="img/full/1.jpg" alt="Grey Sky" data-thumbnail="img/thumbnail/1.jpg"/>	
		</li>		
    <li>
			<img src="img/full/4.jpg" alt="Wood Pattern" data-thumbnail="img/thumbnail/4.jpg" />	
		</li>
	</ul>
</div>


Нам нужно добавить alt, а также data-thumbnail к подписи, и указать путь до миниатюры.

Наконец, мы используем callback-события для того, чтобы применить разметку к nav.

$(function () {

	//Initialize FlexSlider
	$('#hero .flexslider').flexslider({
		slideshow: false,
		slideshowSpeed: 5000,
		pauseOnHover: true,
		start: renderPreview,	//render preview on start
		before: renderPreview //render preview before moving to the next slide
	});
		
	function renderPreview(slider) {
	
		 var sl = $(slider);
		 var prevWrapper = sl.find('.flex-prev');
		 var nextWrapper = sl.find('.flex-next');		 
		 
		 //calculate the prev and curr slide based on current slide
		 var curr = slider.animatingTo;
		 var prev = (curr == 0) ? slider.count - 1 : curr - 1;
		 var next = (curr == slider.count - 1) ? 0 : curr + 1;		 

		 //add prev and next slide details into the directional nav
		 prevWrapper.find('.preview, .arrow').remove();
		 nextWrapper.find('.preview, .arrow').remove();		 		 
		 prevWrapper.append(grabContent(sl.find('li:eq(' + prev + ') img')));
		 nextWrapper.append(grabContent(sl.find('li:eq(' + next + ') img')));		 

	}
	
	// grab the data and render in HTML
	function grabContent(img) {		
		var tn = img.data('thumbnail');
		var alt = img.prop('alt');		
		var html = '';
		
		//you can edit this markup to your own needs, but make sure you style it up accordingly
		html = '<div class="arrow"></div><div class="preview"><img src="' + tn + '" alt="" /><div class="alt">' + alt + '</div></div>';	
		return html;
	}
	
});


Как только вы обновите и запустите скрипт, в nav будет использована новая разметка:

<ul class="flex-direction-nav">
	<li>
		<a class="flex-prev" href="#">Previous
			<div class="arrow"></div>
			<div class="preview">
				<img src="img/thumbnail/3.jpg" alt="">
				<div class="alt">Stoney Creek</div>
			</div>
		</a>
	</li>
	<li>
		<a class="flex-next" href="#">Next
			<div class="arrow"></div>
			<div class="preview">
				<img src="img/thumbnail/1.jpg" alt="">
				<div class="alt">Grey Sky</div>
			</div>
		</a>
	</li>
</ul>


CSS3-анимация

Что же касается анимации, то здесь все сильно зависит от CSS3. В результате вам следует учитывать то, что пример из данного руководства будет работать только в современных браузерах. Мы протестировали его в Chrome, Safari, Firefox и IE10. Также, адаптивная разметка не требует дополнительной стилизации. Наконец, как и в случае с руководством от Codrops, этот пример не оптимизирован под touch-устройства.

Ниже вы можете видеть стилизацию slide out. Мы добавляем переход к .preview и, за счет изменения параметров left и right, у нас ест возможность прокручивать контент туда-сюда.

/* general style */
.preview {
	width: 360px;
	height:90px;
	position: absolute;
	top:0;
	left:-90px;
	z-index:100;
	-webkit-transition:  all 0.3s ease-out; 
	-moz-transition:  all 0.3s ease-out; 
	transition:  all 0.3s ease-out; 	
	opacity:0;
}

.preview img {
	position: absolute;
	left:90px;
	top:0;
	width: 90px;
}

.preview .alt {
	position: absolute;
	left:180px;
	top:0;
	background: #fff;
	width: 180px;
	height:90px;
	color:#000;
	text-indent:0;
	text-transform: uppercase;
	text-align:center;
	font-size:16px;
	line-height:90px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}


/* next button */			
.flex-next .preview {
	right:-50px;
	left:auto;	
}

.flex-next .preview img {
	position: absolute;
	left:180px;
	top:0;
	width: 90px;
}

.flex-next .preview .alt {
	left:0;
}


/* hover style */		
.flex-prev:hover .preview {
	left:0;
	opacity:1;
}

.flex-next:hover .preview {
	right:0;
	opacity:1;
}


А ниже представлен CSS-код для простой анимации Flip Out. Flip Out будет немного сложнее ввиду того, что здесь используется 3D transform. Нам нужно выставить несколько таких параметров как perspective-origin, perspective, transform-origin и так далее, чтобы получить привлекательный эффект переворота.

/* general style */
.preview {
	width: 90px;
	height:90px;
	position: absolute;
	top:0;
	left:90px;
	z-index:100;
	-webkit-transition:  all 0.3s ease-out; 
	-moz-transition:  all 0.3s ease-out; 
	transition:  all 0.3s ease-out; 	
}

.preview img {
	position: absolute;
	left:0;
	top:0;
	width: 90px;
}

.preview .alt {
	display:none;
}


/* prev button */				
.flex-prev {
	-webkit-perspective-origin: 100% 50%;
	perspective-origin: 100% 50%;
	-webkit-perspective: 1000px;
	perspective: 1000px;			
}

.flex-prev .preview {
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}


/* next button */				
.flex-next {
	-webkit-perspective-origin: 0% 50%;
	perspective-origin: 0% 50%;			
	-webkit-perspective: 1000px;
	perspective: 1000px;				
}

.flex-next .preview {
	right:90px;
	left:auto;	
	-webkit-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.flex-next .preview img {
	position: absolute;
	left:0;
	top:0;
	width: 90px;
}


/* hover style */				
.flex-direction-nav a:hover .preview {
	opacity:1;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);			
}


/* different hover style for flexslider nav */
.flex-direction-nav a {
	-webkit-transition:  none; 
	-moz-transition: none; 
	transition:  none;		
}


Разработка навигации с анимированными стрелками при помощи FlexSlider и CSS3


Разработка навигации с анимированными стрелками при помощи FlexSlider и CSS3




В завершение

Codrops точно вдохновили нас на несколько ближайших дней. Мы всегда поражаемся тому, как можно додуматься до таких впечатляющих проектов! Итак, наша задумка вполне воплощена в реальность, и теперь вы можете использовать эту навигацию в собственных проектах.

Исходники в архиве.шаблоны для dle 11.2

Напишите своё мнение