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 точно вдохновили нас на несколько ближайших дней. Мы всегда поражаемся тому, как можно додуматься до таких впечатляющих проектов! Итак, наша задумка вполне воплощена в реальность, и теперь вы можете использовать эту навигацию в собственных проектах.

Исходники в архиве.

СКАЧАТЬ

Вес файла
1.04 Mb

Реклама

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

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204