—»     —»   Разработка навигации с анимированными стрелками при помощи FlexSlider и CSS3
  Раздел: Меню и Навигация   Нет комментариев  

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



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

Демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.


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

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

Вот чем мы сегодня займемся:

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

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

Не забудьте поделиться руководством с друзьями и оставить комментарии ниже!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 3596   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код




















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031