August 01, 2014gearmobile Reading time ~5 minutes

Слайдер Owl Carousel

Встретил на Google+ упоминание о плагине под jQuery для создания карусели - OWL Carousel.

Попробовал с ним разобраться и посмотреть примеры создания слайдеров на официальной странице. Могу сказать, что я впечатлен данным скриптом и его возможностями. Слайдер адаптивный, имеет множество настроек, обладает хорошими эффектами “из коробки”. Мое личное мнение - отличный выбор для применения на практике!

Официальная страница проекта располагается здесь - OWL Carousel. Стабильная версия скрипта на данный момент -

v1.3.2

, но на странице упоминается о версии

1
2.0.0-beta

. Для своей работы плагин требует библиотеки jQuery версии не ниже

1
1.7

Ниже я попробую создать простой вариант карусели с помощью плагина OWL Carousel. Более интересные и продвинутые варианты, я думаю, показывать не имеет смысла. По той простой причине, что разобравшись с базовым вариантом, всегда можно его улучшить. И для этой цели как ничто лучше подойдут примеры на официальной странице - Demo и More Demo. Стоит сказать, что для себя я увидел там готовые решения практически на все случаи жизни.

Подключение OWL Carousel

Для подключения плагина OWL Carousel к готовому проекту необходимо получить архив плагина с официальной страницы - OWL Carousel или с GitHub - OwlCarousel. В архиве имеется все, что необходимо - библиотека jQuery, плагин

1	owl.carousel.min.js

, готовые CSS-стили для карусели. Ничего сложного или необычного в подключении плагина OWL Carousel нет - все стандартно.

HTML-разметка и подключение скрипта будут выглядеть следующим образом:

<ul id="carousel" class="owl-carousel carousel">
  <li><img src="images/owl1.jpg" width="300" height="200" alt="Owl_1" /></li>
  <li><img src="images/owl2.jpg" width="300" height="200" alt="Owl_2" /></li>
  <li><img src="images/owl3.jpg" width="300" height="200" alt="Owl_3" /></li>
  <li><img src="images/owl4.jpg" width="300" height="200" alt="Owl_4" /></li>
  <li><img src="images/owl5.jpg" width="300" height="200" alt="Owl_5" /></li>
  <li><img src="images/owl6.jpg" width="300" height="200" alt="Owl_6" /></li>
  <li><img src="images/owl7.jpg" width="300" height="200" alt="Owl_7" /></li>
  <li><img src="images/owl8.jpg" width="300" height="200" alt="Owl_8" /></li>
</ul>
<!--  SCRIPTS  -->

head

подключаются две готовых CSS-таблицы из архива -

1
owl.carousel.css

1
owl.theme.css

. Таблица

1
style.css

- опциональная, для настройки плагина под конкретные условия.

Тип HTML-элементов для создания разметки слайдера, по большому счету, не имеет особого значения, так как скрипт OWL Carousel умеет работать со всеми типами. Главное, чтобы у блока-обертки имелся обязательный класс

1	owl-carousel

, к которому будет производиться привязка стилей из файла

1
owl.carousel.css

В конце тела

body

документа подключаются библиотека jQuery, скрипт плагина OWL Carousel и файл настроек данного скрипта.

Базовая конфигурация js-файла

1	settings.js

выглядит следующим образом:

$(document).ready(function() {
  $("#carousel").owlCarousel();
});

Все, можно смотреть на готовый (слегка подредактированный) результат:

Базовый вариант слайдера OWL Carousel

Настройка плагина OWL Carousel

Скрипт OWL Carousel имеет большое количество настроек, которые добавляются или убираются в файле настроек. Ссылка на страницу с полным списком настроек располагается здесь - Customizing OWL Carousel.

К примеру, переменная

items

задает количество одновременно показываемых в слайдере изображений:

items: 5

Переменные

1	itemsDesktopSmall

1
itemsTablet

1
itemsTabletSmall

1
itemsMobile

устанавливают количество одновременно отображаемых изображений в зависимости от размера окна браузера. Например, запись вида

1
itemsDesktop: [1199,4]

“говорит” браузеру, что при размере окна меньше или равному 1199px следует отображать одновременно только четыре изображения:

itemsDesktop: [1199,4]

Переменная

1	singleItem

устанавливает, отображать ли только одно изображение в слайдере или несколько:

singleItem: false

Переменные

1	navigation

1
pagination

управляют возможностью включения или выключения навигации\пагинации у слайдера:

navigation: true,
pagination: true

Автоматическая прокрутка изображений в слайдере включается с помощью переменной

autoPlay

autoPlay: true

Имеются множество других настроек плагина OWL Carousel, с которыми можно легко разобраться на официальной странице. Все перечислять здесь я не буду.

Варианты слайдера OWL Carousel

Стоит “побродить” по странице с демонстрационными примерами работы плагина OWL Carousel. Там есть на что посмотреть и что подобрать для себя.

Мне понравились примеры создания слайдеров - Lazy Load и Auto Height.

Наиболее интересные (для меня) примеры расположены в списке со ссылками.

К примеру, по ссылке CSS3 Transitions располагается образец слайдера с эффектом перехода, основанном на CSS3-свойстве transition. Более того, из выпадающего списка можно прямо на странице подобрать себе подходящий эффект - своеобразный конструктор получается:

Слайдер OWL Carousel с эффектом transition

Или пример создания слайдера с расположенной вверху полосой progress bar - Progress Bar.

Заключение

Плагин OWL Carousel мне понравился и я буду стараться применять его на практике, при верстке страниц.

July 19, 2014gearmobile Reading time ~12 minutes

Hexagon на CSS

В этой статье будет детально рассмотрен вопрос создания фигуры шестиугольника (hexagon) на CSS.

Материал целиком основан на замечательной статье CSS Hexagon Tutorial. В Сети имеется хорошая статья по примерам создания различных видов фигур на CSS, и располагается эта статья на блоге известного CSS-гуру Chris Coyier Shapes of CSS. Среди прочих фигур там есть и желанный шестиугольник

hexagon

с готовым CSS-кодом что называется, “бери и пользуйся”.

Но ведь такой подход для нас не интересен, правда? Это потом, когда мы изучим вопрос создания шестиугольника, мы будем делать так - нашел готовый код, скопировал к себе, подредактировал и готово! А сейчас мы пошагово пройдем весь путь, от начала и до конца - это даст нам понимание процесса.

Как будем строить hexagon

Фигура hexagon изначально кажется неприступной - не понятно, с какого боку к ней подойди, чтобы начать постороение шестиугольника на CSS. Однако, если внимательно присмотреться, то hexagon можно разделить на три простые фигуры:

Три части фигуры hexagon

Видно, что фигура состоит из двух одинаковых треугольников и одного прямоугольника. Построение треугольников на CSS выполняется очень просто - “CSS – почему треугольник это треугольник”, прямоугольника - вообще в два движения.

Поэтому, построение шестиугольника hexagon на CSS сводится к двух задачам:

создать два треугольника
создать один прямоугольник

Построение треугольников на CSS

Задачу создания треугольников на CSS начнем с построения обычного квадрата со стороной в

100px

и широкой границей

1
30px

определенного цвета

1
#789

<div class="hexagon">

.hexagon{
  width: 100px;
  height: 100px;
  border: 30px solid #789;
}

Квадрат на CSS

“Раскрасим” границы квадрата для того, чтобы можно было визуально отличать их друг от друга:

<div class="hexagon hexagon_colors"></div>

.hexagon_colors{
  border-top-color: lighten(#789, 5%);
  border-right-color: lighten(#789, 10%);
  border-bottom-color: darken(#789, 10%);
  border-left-color: darken(#789, 5%);
}

Квадрат на CSS с границами разного цвета

Затем обнулим высоту

height

и ширину

1
width

нашего квадрата. Он “схлопнется”, оставив для нас видимой только его широкую границу со всех четырех сторон:

<div class="hexagon hexagon_colors hexagon_zero"></div>

.hexagon_zero{
  width: 0;
  height: 0;
}

Квадрат на CSS с нулевой высотой и шириной

Теперь превратим полученную фигуру в настоящий треугольник. Для этого обнулим (уберем) у нее верхнюю границу

1	border-top

, а обе боковые границы

1
border-left

1
border-right

сделаем прозрачного

1
transparent

цвета:

<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up"></div>

.hexagon_triangle_up{
  border-top-width: 0;
  border-right-color: transparent;
  border-left-color: transparent;
}

Треугольник на CSS

У получившегося треугольника все стороны равны - высота и ширина по 30px каждая. Нам же необходимо “растянуть” треугольник в ширину, чтобы он у него появился тупой угол. Для этого нужно увеличить ширину боковых границ

1	border-left

1
border-right

треугольника, а ширину нижней границы

1
border-bottom

оставить прежней:

<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>

.hexagon_triangle_up_large{
  border-left-width: 52px;
  border-right-width: 52px;
}

Удлиненный треугольник на CSS

Задача создания треугольника нами выполнена. Теперь необходимо получить точно такой треугольник, только “направленный” вниз. Это просто - достаточно поменять нулевое значение между верхней и нижней границей фигуры. Все остальные значения останутся неизменными. Чуть не забыл сказать, что для “повернутого” треугольника придется создать в HTML-коде новый блок:

<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>

...

.hexagon_triangle_down{
  border-bottom-width: 0;
  border-right-color: transparent;
  border-left-color: transparent;
}

.hexagon_triangle_down_large{
  border-left-width: 52px;
  border-right-width: 52px;
}

Два треугольника на CSS

Первый шаг по созданию шестиугольника hexagon на CSS выполнен - у нас есть два одинаковых разнонаправленных треугольника. Теперь нужно создать “тело” для шестиугольника - прямоугольник.

Построение прямоугольника на CSS

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

А вот с размерами для прямоугольника нужно разобраться немного подробнее. У него ширина должна быть равна удвоенной ширине боковой границы треугольника:

border-left-width: 52px + border-right-width: 52px = 104px

А высота должна быть равна удвоенной высоте треугольника (или ширине верхней\нижней границы - кому как нравиться):

border-top: 30px * 2 = 60px

В результате код будет следующим:

<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
<div class="inside"></div>
<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>

...

.inside{
  width: 104px;
  height: 60px;
  background-color: #789;
}

Hexagon на CSS

Все - задача построения шестиугольника hexagon на CSS выполнена - все оказалось достаточно просто!

Создание сетки из hexagon

Теперь можно усложнить задачу и создать из фигур hexagon своеобразную сетку, а-ля пчелиные соты. Задача тривиальная и весь вопрос сводиться к нескольким CSS-свойствам:

float

1
overflow

1
margin

1
padding

Создаю первый ряд сетки:

<div class="row">
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
</div>
<!--  end row  -->

...

.inside{
  width: 104px;
  height: 60px;
  background-color: #778899;
}

.hexa{
  float: left;
  margin: 0 3px 0 0;
}

.row{
  overflow: hidden;
}

Первый ряд сетки из hexagons

Второй ряд сетки строиться аналогично, за тем лишь исключением, что его необходимо сдвинуть влево и вверх:

<!--  ROW  -->
<div class="row left_padding top_margin">
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
</div>
<!--  end row  -->

.left_padding{
  padding-left: 53px;
}

.top_margin{
  margin-top: -28px;
}

Первый и второй ряды сетки из hexagons

Дальше продолжать не имеет смысла - все остальные ряды строятся аналогично. Нужно только управлять ими с помощью соотвествующих классов, смещая влево или вверх:

Несколько рядов сетки из hexagons

Лучше перейдем к другому интересному вопросу - созданию такого же шестиугольника hexagon, но несколько иной формы, “повернутого”. У которого углы развернуты по-горизонтали, а не по-вертикали.

Построение повернутого hexagon на CSS

Задача создания развернутого hexagon почти ничем не отличается от задачи построения обычного шестиугольника. Только потребуется несколько дополнительных строчек кода.

Дело в том, что в этом случае нужны углы, которые будут располагаться горизонтально и “смотреть” влево или вправо. Помимо этого, понадобиться “плавание” влево

1	float: left;

Для блока - “тела” hexagon нужно будет изменить значения высоты или ширины на прямопротивоположные.

Но не буду голословным, а лучше создам один такой

hexagon

<div class="hexa">
  <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_left hexagon_triangle_left_large left"></div>
  <div class="inside_rotate left"></div>
  <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_right hexagon_triangle_right_large left"></div>
</div>
<!--  end hexa  -->

/*  LEFT ARROW  */

.hexagon_triangle_left{
  border-left-width: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.hexagon_triangle_left_large{
  border-top-width: 52px;
  border-bottom-width: 52px;
}

/*  RIGHT ARROW  */

.hexagon_triangle_right{
  border-right-width: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.hexagon_triangle_right_large{
  border-top-width: 52px;
  border-bottom-width: 52px;
}

.inside_rotate{
  width: 60px;
  height: 104px;
  background-color: #778899;
}

.left{
  float: left;
}

Развернутый hexagon

Добавлю несколько таких шестиугольников, чтобы получился полный ряд:

Несколько развернутых hexagons в ряд

Отлично! Теперь нужно добавить еще один ряд - нижний. При этом опять придется немного модифицировать код, чтобы произвести смещение фигур влево и вверх:

<!--  ROW  -->
<div class="row top_margin_double">
  <div class="hexa left_padding_double_middle">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_left hexagon_triangle_left_large left"></div>
    <div class="inside_rotate left"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_right hexagon_triangle_right_large left"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa left_padding_double">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_left hexagon_triangle_left_large left"></div>
    <div class="inside_rotate left"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_right hexagon_triangle_right_large left"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa left_padding_double">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_left hexagon_triangle_left_large left"></div>
    <div class="inside_rotate left"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_right hexagon_triangle_right_large left"></div>
  </div>
  <!--  end hexa  -->
</div>
<!--  end row  -->

.left_padding_double{
  padding-left: 64px;
}

.left_padding_double_middle{
  padding-left: 94px;
}

.top_margin_double{
  margin-top: -50px;
}

Развернутые hexagons в два ряда

Можно продолжать постороние рядов до бесконечности, получая сетку из hexagons все большего размера:

Развернутые hexagons в несколько рядов

3D-проекция hexagons

Можно видоизменить внешний вид сетки из hexagons, воспользовавшись CSS3-свойством

transform

. Создаю отдельный класс, в котором прописываю такие свойстсва:

.hexa_transform{
  -webkit-transform: perspective(600px) rotateX(60deg);
  -moz-transform: perspective(600px) rotateX(60deg);
  -ms-transform: perspective(600px) rotateX(60deg);
  -o-transform: perspective(600px) rotateX(60deg);
  transform: perspective(600px) rotateX(60deg);
}

… и проверяю в окне браузера:

3D-проекция сетки из hexagons

Hexagons с помощью псевдо-классов

Рассмотренный выше способ создания hexagons хорош, но имеет один недостаток - слишком много дополнительных блоков, одними из которых являются блоки для создания треугольников.

Можно (и нужно) значительно сократить код, воспользовавшись для этой цели псевдо-классами

:before

1
:after

. Давайте я так и поступлю, при этом возьму код из примера, не буду ничего выдумывать:

.hex:before {
  content: - ";
  width: 0; height: 0;
  border-bottom: 30px solid #778899;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  position: absolute;
  top: -30px;
}

.hex {
  margin-top: 30px;
  width: 104px;
  height: 60px;
  background-color: #778899;
  position: relative;
  float: left;
}

.hex:after {
  content: "";
  width: 0;
  position: absolute;
  bottom: -30px;
  border-top: 30px solid #778899;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
}

Hexagon на CSS с помощью псевдо-классов :before и :after

CSS Hexagon

Рассмотренный выше способ неплох, причем оба его варианта. Но для практического применения оба они достаточно трудоемкие. В Сети, помимо многих других подобного рода, имеется online CSS-генератор для создания hexagon в считанные минуты.

Адрес сервиса располагается здесь - CSS Hexagon. Помимо создания самого hexagon, там можно “прикрутить” к фигуре тень и границу, что просто великолепно!

Все - на этом обзор закончен.

July 18, 2014gearmobile Reading time ~6 minutes

Цикл for в Sass

Очень краткий пример работы с циклом
1
for
в препроцессоре Sass.

С чего вдруг мне приспичило воспользоваться циклом в препроцессоре? Все, как всегда, просто - в предыдущей статье, посвященной плагину Smooth Scroll (Плагин Smooth Scroll), мне потребовался создать пример разметки HTML-документа с заголовками всех уровней, с первого (h1) до шестого (h6). Все бы ничего, но вручную создавать стили для заголовков всех уровней как-то утомительно.

HTML-разметка для цикла for

Вот я и озаботился задачей автоматизировать этот процесс, через цикл. Для этой цели я использовал цикл

for

. Упростил пример, выкинув параграфы и оставив только заголовки всех уровней:

<div class="wrapper">
  <h1>header 1</h1>
  <h2>header 2</h2>
  <h3>header 3</h3>
  <h4>header 4</h4>
  <h5>header 5</h5>
  <h6>header 6</h6>
</div>

Базовые CSS-стили

Затем пропишу основные стили для этой разметки:

$color: #778899;
$percent: 5%;
$percentStep: 5;
$fontSize: 76px;
$fontSizeStep: 10;

.wrapper{
  width: 60%;
  margin: 5% auto 0;
  text-align: center;
}

h1,h2,h3,h4,h5,h6{
  font-family: Arial, sans-serif;
  text-transform: capitalize;
  margin-bottom: 4%;
}

Использую цикл for в Sass

Теперь у меня стоит задача “покрасить” все заголовки в оттенки цвета, указанного в переменной

1	$color: #778899;

. Для создания оттенков воспользуюсь функцией

1
lighten()

из препроцессора Sass.

Цвет будет меняться с шагом в 5% (

1	$percentStep: 5;

h1{
  color: lighten($color,5%);
}

h2{
  color: lighten($color,10%);
}

h3{
  color: lighten($color,15%);
}
...

Также будет изменяться размер шрифта (кегль) в заголовках уровней с первого (

h1

) до шестого (

1
h6

), с шагом 10px (

1
$fontSizeStep: 10

h1 {
  font-size: 76px;
}

h2 {
  font-size: 66px;
}

h3 {
  font-size: 56px;
}
...

Как видим, задача и вправду не для ленивых - это же надо тупо вбивать столько значений! Но мне поможет Sass и его циклы, а точнее - цикл

for

Для этого создаю такую конструкцию цикла

for

@for $i from 1 through 6 {
  h#{$i}{
    color: lighten($color,$percent);
    font-size: $fontSize;
    $percent: $percent + $percentStep;
    $fontSize: $fontSize - $fontSizeStep;
  }
}

Небольшая расшифровка приведенного выше цикла. В данном случае используется цикл

for

, в котором счетчик

1
$i

изменяет свое значение в диапазоне от 1 до 6 включительно. Конструкция

1
#{$i}

называется экранированием в Sass и служит для того, чтобы значение счетчика

1
$i

подставилось в коде “как есть”, в виде текста.

В результате получается такой вывод:

Далее идут CSS-правила с использованием функции

lighten()

препроцессора Sass и переменных

1
$color

1
$percent

1
$fontSize

. Последние две строки производят увеличение значения переменных на указанный шаг:

$percent: $percent + $percentStep;
$fontSize: $fontSize - $fontSizeStep;

Приведенный выше SCSS-код скомпилируется в готовый CSS-код подобного вида:

h1 {
  color: #8695a4;
  font-size: 76px;
}

h2 {
  color: #94a2af;
  font-size: 66px;
}

h3 {
  color: #a3aeba;
  font-size: 56px;
}

h4 {
  color: #b1bbc5;
  font-size: 46px;
}

h5 {
  color: #c0c8d0;
  font-size: 36px;
}

h6 {
  color: #ced5db;
  font-size: 26px;
}

Смотрим результат в браузере и радуемся успеху:

Результат работы цикла for в Sass

Полный код примера цикла for в Sass

Полный код рассмотренного примера создания цикла

for

в Sass приведен ниже:

<div class="wrapper">
  <h1>header 1</h1>
  <h2>header 2</h2>
  <h3>header 3</h3>
  <h4>header 4</h4>
  <h5>header 5</h5>
  <h6>header 6</h6>
</div>

@import "compass/reset";

$color: #778899;
$percent: 5%;
$percentStep: 5;
$fontSize: 76px;
$fontSizeStep: 10;

.wrapper{
  width: 60%;
  margin: 5% auto 0;
  text-align: center;
}

h1,h2,h3,h4,h5,h6{
  font-family: Arial, sans-serif;
  text-transform: capitalize;
  margin-bottom: 4%;
}

@for $i from 1 through 6 {
  h#{$i}{
    color: lighten($color,$percent);
    font-size: $fontSize;
    $percent: $percent + $percentStep;
    $fontSize: $fontSize - $fontSizeStep;
  }
}

Скомпилированный в CSS-код результат нашего кодинга:

.wrapper {
  width: 60%;
  margin: 5% auto 0;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Arial, sans-serif;
  text-transform: capitalize;
  margin-bottom: 4%;
}

h1 {
  color: #8695a4;
  font-size: 76px;
}

h2 {
  color: #94a2af;
  font-size: 66px;
}

h3 {
  color: #a3aeba;
  font-size: 56px;
}

h4 {
  color: #b1bbc5;
  font-size: 46px;
}

h5 {
  color: #c0c8d0;
  font-size: 36px;
}

h6 {
  color: #ced5db;
  font-size: 26px;
}

На этом все.

July 17, 2014gearmobile Reading time ~14 minutes

Плагин Smooth Scroll

Обзор краткий такого же небольшого плагина Smooth Scroll, написанного под библиотеку jQuery.

Этот скрипт предназначен только для одной цели - плавного скроллинга (прокрутки) страницы. Благодаря этому улучшается юзабилити страницы и сайта в целом, так как нет резких скачков при переходе по ссылкам.

Подключение плагина Smooth Scroll

Подключение Smooth Scroll к HTML-странице производится как обычно:

<!--  SCRIPTS  -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/settings.js"></script>
...

… где первая строка - это библиотека jQuery, вторая строка - плагин Smooth Scroll, третья строка - файл инициализации плагина Smooth Scroll.

Инициализация Smooth Scroll

Для того, чтобы заработал плагин Smooth Scroll и на странице появилась плавная прокрутка, нужно в js-файле скрипта прописать строки:

$(document).ready(function(){
  $('a').smoothScroll();
});

… то есть - всем ссылкам страницы присвоить метод

1	smoothScroll()

, что дает плавный скроллинг. В принципе, этого достаточно - больше ничего и не надо.

Варианты выборки в Smooth Scroll

Помимо показанной выше строчки, скрипт Smooth Scroll имеет несколько других вариантов режима работы. Другими словами, эти режимы работы - все навсего усложненный первый вариант, вариации на тему выборки HTML-элемента в библиотеке jQuery.

Примеры выборок взяты мною из файла

readme.md

, переводить их мне совсем не хочется; да и нет в этом необходимости - все понятно даже по коду:

Allows for easy implementation of smooth scrolling for same-page links.
Works like this: 1 $('a').smoothScroll();
Specify a containing element if you want: 1 $('#container a').smoothScroll();

Exclude links if they are within a containing element:

1
$('#container a').smoothScroll({excludeWithin: ['.container2']});

Exclude links if they match certain conditions:

1
$('a').smoothScroll({exclude: ['.rough','#chunky']});

Adjust where the scrolling stops:

1
$('.backtotop').smoothScroll({offset: -100});

Add a callback function that is triggered before the scroll starts: `$(‘a’).smoothScroll({beforeScroll: function() { alert(‘ready to go!’); }});

Add a callback function that is triggered after the scroll is complete:

1
$('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});

Пример работы Smooth Scroll

Ниже привожу пример HTML, SCSS и JS-кода, на котором проходил “испытание” плагин Smooth Scroll у меня, в моей “лаборатории”.

<head>
  <meta charset="utf-8">
  <title>Smooth Scroll Plugin</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <h1 class="head">smooth scroll plugin</h1>

  <ul class="scroll">
    <li><a href="#h1">header 1</a></li>
    <li><a href="#h2">header 2</a></li>
    <li><a href="#h3">header 3</a></li>
    <li><a href="#h4">header 4</a></li>
    <li><a href="#h5">header 5</a></li>
  </ul>

  <h1>header 1</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h2>header 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h3 id="h3">header 3</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h4>header 4</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5 id="h5">header 5</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 6</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 7</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h1>header 1</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h2 id="h2">header 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h3>header 3</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h4>header 4</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 5</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 6</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 7</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h1 id="h1">header 1</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h2>header 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h3>header 3</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h4 id="h4">header 4</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 5</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 6</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 7</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <!--  SCRIPTS  -->
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.smooth-scroll.min.js"></script>
  <script src="js/settings.js"></script>

</body>

$color: #789;

h1,h2,h3,h4,h5{
  text-transform: uppercase;
  font-family: Georgia, sans-serif;
  text-align: center;
}

h1{
  font-size: 36px;
  color: $color;
}
h2{
  font-size: 32px;
  color: lighten($color,5%);
}
h3{
  font-size: 28px;
  color: lighten($color,10%);
}
h4{
  font-size: 24px;
  color: lighten($color,15%);
}
h5{
  font-size: 24px;
  color: lighten($color,20%);
}
h6{
  font-size: 20px;
  color: lighten($color,25%);
}
h7{
  font-size: 18px;
  color: lighten($color,30%);
}

.head{
  text-transform: capitalize;
  font-size: 48px;
  color: darken($color,5%);
}

.scroll{
  list-style-type: none;
  padding: 0 0 0 100px;
  li{
    margin-bottom: 10px;
    a{
      text-transform: capitalize;
      text-decoration: none;
      color: darken($color,10%);
      &:hover{
        color: darken($color,15%);
      }
    }
  }
}

$(document).ready(function(){
  $('a').smoothScroll();
});

На этом все.

July 16, 2014gearmobile Reading time ~8 minutes

Слайдер FlexSlider

Люблю я разбирать новые слайдеры и пробовать с ними работать. На этот раз я столкнулся с неизвестным для себя плагином FlexSlider в одном из готовых HTML-макетов австралийского фрилансера Peter Finlan.

Домашняя страничка слайдера FlexSlider располагается здесь - FlexSlider 2. Как сказано на официальной страничке, слайдер является адаптивным, периодически.

В арсенале у плагина заготовлена возможность автоматического генерирования перемотки изображений, пагинации страниц; показ не только изображений, но и видео. А вот заголовок для данного слайдера не предусмотрен, насколько я понял (поправьте меня, если я неправ - буду только рад, ибо слайдер понравился).

Зато у FlexSlider я впервые (для себя) встретил такую удобную возможность, как управление отображением стрелок перемотки или пагинацией через опции самого слайдера. То есть, не нужно копаться в сгенерированном коде DOM-дерева с помощью Firebug, чтобы найти там блок пагинации (к примеру) и отключить его через CSS-правило

1	display: block;

. В случае с FlexSlider все делается проще - прописал одну строчку

1
controlNav: false

и пагинация отключена.

Подключение FlexSlider

Подключение плагина FlexSlider к HTML-странице производится абсолютно стандартно, как и для любого другого плагина, написанного под библиотеку jQuery (я не забыл сказать, что FlexSlider написан под jQuery?). В моем случае я использовал версию jQuery 1.11.1. Здесь есть небольшое ограничение - FlexSlider 2.3.0 требует для своей работы как минимум jQuery 1.4.2. Кнопка для скачивания FlexSlider находиться там же, где вся остальная информация - FlexSlider Download.

Подключение FlexSlider в HTML:

HTML-разметка для FlexSlider

Разметка для слайдера на странице выполняется в виде блока-обертки и маркированного списка:

<!-- FLEXSLIDER -->
<div class="flexslider">
  <ul class="slides">
    <li><img src="images/caramel.jpg"    width="800" height="504" alt="FlexSlider" title="Flexslider" /></li>
    <li><img src="images/cheesecake.jpg" width="800" height="504" alt="FlexSlider" title="Flexslider" /></li>
    <li><img src="images/donut.jpg"      width="800" height="504" alt="FlexSlider" title="Flexslider" /></li>
    <li><img src="images/lemon.jpg"      width="800" height="504" alt="FlexSlider" title="Flexslider" /></li>
  </ul>
</div><!--  end flexslider  -->

Пример взят с официальной странички и в нем оставлены имена классов для обоих блоков, как есть. Плагин при своей инициализации генерирует два дополнительных блока:

ol class=”flex-control-nav” - для пагинации изображений
ul class=”flex-direction-nav” - для стрелок перемотки изображений

… а также создает блок-обертку

1	div class="flex-viewport"

для списка

1
ul class="slides"

. То есть, разметка получается прозрачной и ясной.

Инициализация FlexSlider

Для инициализации плагина FlexSlider нужно в конфигурационном js-файле для случая самого простого вида написать такие строки:

$(document).ready(function(){
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

В принципе, уже этого достаточно для создания слайдера FlexSlider - он уже работает. Можно стилизовать его самому с помощью CSS, или же подключить уже готовые CSS-стили и отредактировать их - кому как удобно. Я попробую отредактировать внешний вид слайдера сам:

$color: #778899;

.flexslider{
  position: relative;
  width: 800px;
  margin: 20px auto 0;
  border: 10px solid darken($color,20%);
  @include border-radius(5px);
  @include box-shadow(lighten($color,5%) 0 0 10px);

  /*  PAGINATION  */
  .flex-control-nav{
    position: relative;
    z-index: 3;
    padding: 5px 0;
    margin-top: -30px;
    @include pie-clearfix;
    @include squish-text;
    li{
      float: left;
      margin-left: 10px;
      a{
        display: block;
        width: 20px;
        height: 20px;
        background-color: lighten($color,5%);
        cursor: pointer;
        @include border-radius(50%);
        @include single-transition(background-color, .2s, ease-in-out);
        &.flex-active{
          background-color: darken($color,10%);
          cursor: default;
        }
        &:hover,&:focus{
          background-color: darken($color,10%);
        }
      }
    }
  }

  /*  ARROWS  */
  .flex-direction-nav{
    @include squish-text;
    .flex-prev,
    .flex-next{
      position: absolute;
      top: 50%;
      margin-top: -10px;
      display: block;
      width: 20px;
      height: 20px;
      background-color: lighten($color,5%);
      border: 2px solid darken($color,10%);
      @include border-radius(50%);
      @include single-transition(background-color, .2s, ease-in-out);
      &:hover,&:focus{
        outline: none;
        background-color: darken($color,10%);
      }
    }
    .flex-prev{
      left: 10px;
    }
    .flex-next{
      right: 10px;
    }
  }
  /*  IMAGES  */
  .flex-viewport{
    li{
      @include box-shadow(rgba(0,0,0,.6) 0 0 8px 4px inset);
      img{
        vertical-align: top;
        position: relative;
        z-index: -2;
      }
      }
    }
  }

Стилизованный слайдер FlexSlider

Опции слайдера FlexSlider

Плагин имеет большое количество настроек, которые представлены ниже. Список взят отсюда - Flexslider - адаптивный слайдер.

Опции по умолчанию:

namespace: “flex-“, //{Новое} String: Префикс, прикрепляемый к классу каждого элемента сгенерированного плагином
selector: “.slides > li”, //{Новое} Selector: Должен соответствовать простому шаблону. ‘{container} > {slide}’ — Игнорируйте шаблон на свой страх и риск
animation: “fade”, //String: Тип анимации, “fade” или “slide”
easing: “swing”, //{Новое} String: Определяет переход поддерживаемый плагином jQuery easing.
direction: “horizontal”, //String: Выбор направления смены изображений “horizontal” или “vertical”
reverse: false, //{NEW} Boolean: реверс направления анимации
animationLoop: true, //Boolean: Цикличность анимации. Если false, directionNav будет добавлять класс “disable” на обоих концах слайдера
smoothHeight: false, //{Новое} Boolean: Allow height of the slider to animate smoothly in horizontal mode
startAt: 0, //Integer: Слайд с какого должно начинаться слайдшоу. Массив (0 = первый слайд)
slideshow: true, //Boolean: Включение автослайдшоу
slideshowSpeed: 7000, //Integer: Скорость слайдшоу в мс
animationSpeed: 600, //Integer: Скорость анимации в мс
initDelay: 0, //{Новое} Integer: Задержка инициализации в мс -randomize: false, //Boolean: Случайный порядок слайдов

Использование функций

pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true, //{Новое} Boolean: Slider will use CSS3 transitions if available
touch: true, //{Новое} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{Новое} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

Первичное управление

controlNav: true, //Boolean: Создание навигации для постраничного управления каждым слайдом. Замечание: оставьте true для использования manualControls
directionNav: true, //Boolean: Создание навигации для кнопок назад/вперед (true/false)
prevText: “Previous”, //String: Тест для кнопки “previous” пункта directionNav
nextText: “Next”, //String: Тест для кнопки “next” пункта directionNav

Вторичная навигация

keyboard: true, //Boolean: Разрешает навигацию с помощью стрелок на клавиатуре (влево/вправо)
multipleKeyboard: false, //{Новое} Boolean: Разрешает управление с помощью клавиатуры по несколькими слайдерами. Поведение по умолчанию вырезает возможность управления клавиатурой при использовании более одного слайдера
mousewheel: false, //{Обновление} Boolean: Требуется плагин jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Управление навигацией по слайдам с помощью колесика мыши
pausePlay: false, //Boolean: Создание динамического pause/play элемента
pauseText: “Pause”, //String: Текста для кнопки “pause” элемента pausePlay
playText: “Play”, //String: Текст для кнопки “play” элемента pausePlay

Специальные свойства

controlsContainer: “”, //{Обновление} jQuery Object/Selector: Объявление какой контейнер элементов навигации будет применен. По умолчанию это FlexSlider. Например, можно использовать так $(“.flexslider-container”). Свойство игнорируется если элемент не найден.
manualControls: “”, //{Обновление} jQuery Object/Selector: Объявление пользовательской панели управления навигацией. Примером может быть $(“.flex-control-nav li”) или “#tabs-nav li img”, и т.п.. Количество элементов в вашей controlNav должно совпадать с количеством слайдов/табов.
sync: “”, //{Новое} Selector: Зеркало действий выполняемых над этим слайдером с помощью другого слайдера. Используйте с осторожностью.
asNavFor: “”, //{Новое} Selector: Внутренние свойства направленные на превращение слайдера в миниатюры с возможностью навигации для другого слайдера

Опции карусели

itemWidth: 0, //{Новое} Integer: Ширина Box-model отдельных элементов карусели, включая горизонтальные границы и отступы (padding)
itemMargin: 0, //{Новое} Integer: Отступ между элементами карусели
minItems: 0, //{Новое} Integer: Минимальное количество элементов карусели, которые будут видимы. Элементы будут плавно изменять размер при значении ниже заданного
maxItems: 0, //{Новое} Integer: Максимальное количество элментов карусели, которые будут видимы. Элементы будут плавно изменять размер при превышении этого лимита.
move: 0, //{Новое} Integer: Количество элментов в карусели, которые должны двигаться по анимации. Если 0, то слайдер будет двигать все видимые элементы

Callback API

start: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер загружает первый слайд
before: function(){}, //Callback: function(slider) - Срабатывает асинхронно с каждой анимацией слайдера
after: function(){}, //Callback: function(slider) - Срабатывает после каждой завершенной анимацией слайдера
end: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер доходит до последнего элемента (асинхронный)
added: function(){}, //{Новое} Callback: function(slider) - Срабатывает после того, как слайд добавлен
removed: function(){} //{Новое} Callback: function(slider) - Срабатывает после того, когда слайд удален

Варианты слайдера FlexSlider

На официальной страничке плагина в прекрасно оформленном виде представлены [различные варианты][6] создания слайдера. Все они реализуются с помощью опций этого плагина и дополнительной HTML-разметки.

Например, чтобы создать слайдер с thumbnail-пагинацией, нужно прописать в js-файле настроек:

$('.flexslider').flexslider({
  animation: "slide",
  controlNav: "thumbnails"
});

… а HTML-разметку изменить таким образом:

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li data-thumb="slide1-thumb.jpg"><img src="slide1.jpg" /></li>
    <li data-thumb="slide2-thumb.jpg"><img src="slide2.jpg" /></li>
    <li data-thumb="slide3-thumb.jpg"><img src="slide3.jpg" /></li>
    <li data-thumb="slide4-thumb.jpg"><img src="slide4.jpg" /></li>
  </ul>
</div>

Но, в принципе, в этом случае рассказывать о возможных вариантах слайдера достаточно глупо - можно и нужно посетить официальную страничку и там смотреть примеры создания.

На этом все.

[6]: http://flexslider.woothemes.com/index.html “”

Zencoder

Frontend Developer Notebook

Слайдер Owl Carousel

Подключение OWL Carousel

Настройка плагина OWL Carousel

Варианты слайдера OWL Carousel

Заключение

Hexagon на CSS

Как будем строить hexagon

Построение треугольников на CSS

Построение прямоугольника на CSS

Создание сетки из hexagon

Построение повернутого hexagon на CSS

3D-проекция hexagons

Hexagons с помощью псевдо-классов

CSS Hexagon

Цикл for в Sass

HTML-разметка для цикла for

Базовые CSS-стили

Использую цикл for в Sass

Полный код примера цикла for в Sass

Плагин Smooth Scroll

Подключение плагина Smooth Scroll

Инициализация Smooth Scroll

Варианты выборки в Smooth Scroll

Пример работы Smooth Scroll

Слайдер FlexSlider

Подключение FlexSlider

HTML-разметка для FlexSlider

Инициализация FlexSlider

Опции слайдера FlexSlider

Опции по умолчанию:

Использование функций

Первичное управление

Вторичная навигация

Специальные свойства

Опции карусели

Callback API

Варианты слайдера FlexSlider