Продолжение предыдущей статьи “Стилизация SVG с помощью CSS - Часть 1”, посвященной формату векторной графики SVG.

Стилизация с помощью CSS

Между языками HTML и CSS существует четкая и ясная взаимосвязь: язык HTML предназначен для структуризации контента на странице; задача языка CSS - внешнее оформление этого контента. Формат SVG размывает четкие границы этой взаимосвязи. Например, формат версии SVG1.1 не нуждается в CSS для стилизации отдельных элементов SVG-объектов - для этой цели имеются так называемые презентационные атрибуты.

Презентационные атрибуты являются сокращениями CSS-свойств для SVG-элементов. Можно думать об этих атрибутах, как о CSS-свойствах для SVG с особым синтаксисом. К этим свойствам применима каскадность стилей, но в этой статье мы поступим более кратким способом.

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

1
"border" (stroke)
и фоновой заливки
1
"background color" (fill)
многоугольника в виде пятиконечной звезды:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
  <polygon
    fill = "#FF931E"
    stroke = "#ED1C24"
    stroke-width = "5"
    points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
</svg>

Star SVG

В этом примере атрибуты

1
fill
,
1
stroke
,
1
stroke-width
являются презентационными атрибутами.

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

1
opacity
или
1
transform
. Другие же, такие как
1
fill
,
1
stroke
или
1
stroke-width
, абсолютно не похожи на свои CSS-аналоги.

В формате SVG2 имеются несколько презентационных атрибутов, таких как

1
x
,
1
y
,
1
width
,
1
height
,
1
cx
,
1
cy
и некоторые другие, которые невозможно задать с помощью CSS в SVG1.1. Список новых SVG-атрибутов можно посмотреть по этой ссылке - SVG2 спецификация.

Другим способом стилизации SVG-элементов является использование для этой цели CSS-свойств. Точно также, как и в случае в HTML-элементами, CSS-свойства могут быть заданы с помощью inline-стиля:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 300px;" viewBox="0 0 300 300">
  <polygon
    style = "fill: #FF931E; stroke: #ED1C24; stroke-width: 5;"
    points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
</svg>

Каскады стилей SVG

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

Презентационные атрибуты позиционируются как “авторские стилевые правила” и могут быть переопределены любыми другими определениями: внешними таблицами стилей, внутренними таблицами стилей или же inline-стилями.

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

Таблица каскадности стилей SVG

Например, представленный ниже образец кода является кругом, написанным на SVG. Цвет заливки круга в виде атрибута

1
fill="blue"
будет переопределен цветом
1
deep pink
с помощью правила
1
style="fill:deepPink;"
:

<circle cx="100" cy="100" r="75" fill="blue" style="fill:deepPink;" />

Селекторы SVG

Большинство CSS-селекторов могут быть использованы для выборки SVG-элементов. В дополнение к основному типу, классам и идентификаторам, SVG-элементы могут быть стилизованы с помощью динамических псевдо-классов (

1
:hover
,
1
:active
,
1
:focus
) и псевдо-классов (
1
:first-child
,
1
:visited
,
1
:link
и
1
:lang
). Остальные псевдо-классы, включая тех, которые генерируют контент (такие как
1
::before
и
1
::after
) не являются частью спецификации SVG и поэтому не могут быть использованы для стилизации SVG-элементов.

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

1
:hover
.

Этот пример является простым, но можно создать и гораздо более сложные и интересные примеры. Еще одним простым, но интересным примером может послужить набор иконок Iconic, с помощью которых можно создать зажигающуюся лампочку. Демо-пример представлен здесь - demo of the effect .

Замечания

Так как презентационные атрибуты имеют XML-синтаксис, то они чувствительны к регистру. Например, при задании цвета заливки SVG-элемента атрибут должен быть записан как

1
fill="..."
, но не как
1
Fill="..."
.

Более того, ключевые значения этих атрибутов, такие как

1
italic
в
1
font-style="italic"
, также чувствительны к регистру и должны записываться в коде точно так, как это указано в спецификации.

Все остальные стили указываются как CSS-свойства, вне зависимости, где они расположены. Будь то стилевые атрибуты, тег

1
<br>
,
1
<style>
или внешние таблицы стилей.

На этом все.


Краткий обзор плагина Sass CSS Importer для импортирования файлов CSS в файлы Sass.

В чем заключается вопрос? Как хорошо известно всем, кто постоянно работает с Sass, с помощью директивы

1
@import
можно подключать одни Sass-файлы в другие Sass-файлы.

Например, подключить файл

1
typography.scss
в файл
1
main.scss
можно так:

@import '_typography';

Оба файла

1
main.scss
и
1
typography.scss
будут объединены препроцессором в один файл
1
main.scss
, который уже будет компилироваться в файл
1
main.css
.

Знак подчеркивания в данном случае является дополнительной опцией. Этим знаком препроцессору Sass указывается не выполнять предварительную компиляцию файла

1
typography.scss
в файл
1
typography.css
перед его подключением в
1
main.scss
.

Но что, если стоит задача подключения файлов формата CSS в файлы формата Sass? Директива

1
@import
в этом случае помочь не может. CSS-файл нельзя просто так подключить в Sass-файл.

Задача подключения CSS-файлов в Sass-файлы наиболее часто может возникнуть в случае использования различных готовых слайдеров или каруселей, которые зачастую идут “в комплекте” с минимальными правилами на CSS. Что же делать?

Плагин Sass CSS Importer

Совсем недавно (17 июля сего года) Chris Eppstein выпустил специальный плагин, задачей которого и является импортирование CSS-файлов в Sass-файлы. Страничка с официальной документацией по плагину Sass CSS Importer расположена на GitHub - Sass CSS Importer Plugin.

Там все описано кратко и предельно ясно. Однако, я был так доволен тем фактом, что теперь могу свободно подключать CSS в Sass, что решил потратить часть своего времени, чтобы описать его своими словами, по-русски.

Установка Sass CSS Importer

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

1
gem
:

$ sudo gem install --pre sass-css-importer

Подключение Sass CSS Importer

При использовании фреймворка Compass нужно добавить строку в конфигурационный файл

1
config.rb
своего текущего проекта:

require 'sass-css-importer'

Импортирование CSS в Sass

Теперь, чтобы импортировать CSS в Sass, нужно воспользоваться все той же директивой

1
@import
, но со специальным синтаксисом.

В общем случае этот синтаксис выглядит таким образом:

@import 'CSS:имя_директории/имя_css_файла';

В частном случае синтаксис будет выглядеть таким образом:

@import 'CSS:carousel';

Обратите внимание на важный момент: имя CSS-файла нужно указывать без расширения!

Можно запустить процесс компиляции через командную строку:

$ compass watch

… и проверить, что CSS-файл будет включен в общий вывод:

Плагин Sass CSS Importer

Заключение

В принципе, вот и все, что можно сказать о Sass CSS Importer.


Статья посвящена вопросу “тихих” placeholder’ов в препроцессоре Sass. Что это такое и в чем преимущество их использования.

Оригинал статьи размещен здесь - Understanding placeholder selectors.

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

Например, можно воспользоваться миксинами (

1
mixins
) для вставки группы CSS-свойств (или CSS-правил) в CSS-коде.

Или же использовать директиву

1
@extend
для расширения набора CSS-свойств одного HTML-элемента за счет CSS-свойств другого HTML-элемента.

В Sass версии 3.2 введена новая концепция под названием

1
placeholder
, которая делает использование директивы
1
@extend
еще более эффективным способом.

Но прежде чем мы перейдем к рассмотрению этого нововведенния, давайте остановимся на моменте, каким образом работает расширение (

1
@extend
) CSS-свойств в Sass.

Как работает @extend

Директива

1
@extend
в препроцессоре Sass позволяет CSS-селекторам с легкостью обмениваться между собой своими CSS-свойствами. Лучше всего вышесказанное можно проиллюстрировать на живом примере:

.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend .icon;
  /* здесь - специфичные стили класса .error-icon */
}

.info-icon {
  @extend .icon;
  /* здесь - специфичные стили класса .info-icon */
}

Результатом компиляции этого SCSS-кода в CSS-код будет следующий фрагмент:

.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* здесь - специфичные стили класса .error-icon */
}

.info-icon {
  /* здесь - специфичные стили класса .info-icon */
}

Рассмотрим “механизм” показанного выше примера более детально. В нем директива

1
@extend
играет ключевую роль. С помощью нее селекторы
1
.error-icon
и
1
.info-icon
наследуют свойства селектора
1
.icon
. При изменении CSS-свойств селектора
1
.icon
автоматически будут меняться свойства селекторов
1
.error-icon
и
1
.info-icon
, так как они наследуют определенный набор CSS-свойств у селектора
1
.icon
. Довольно изящный подход, не правда ли?

А вот теперь наступает интересный момент. Что, если элемент с классом

1
.icon
не планируется использовать и он даже не будет присутствовать в HTML-разметке? Но CSS-свойства этого элемента нам нужны для стилизации элементов
1
.error-icon
и
1
.info-icon
.

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

И тут наступает момент для выхода на сцену героя этой статьи - селектора

1
placeholder
(его еще называют “тихим”
1
placeholder
‘ом):

Тихий placeholder

Знакомимся с селектором placeholder

Селекторы

1
placeholder
были введены в Sass как раз для того, чтобы решать вышеназванную проблему. Синтаксис
1
placeholder
очень похож на синтаксис обычных CSS-классов, только вместо точки (
1
.
) перед именем ставиться символ процента
1
%
.

Селекторы

1
placeholder
имеют одну специфичную для них особенность - они никак не проявляют себя в скомпилированном CSS-коде. Можно сказать по другому - вы никогда не найдете селекторов
1
placeholder
в результирующем CSS-коде (поэтому они и носят такое название - “тихие”
1
placeholder
). В скомпилированном CSS-коде будут только селекторы, которые используют “тихие”
1
placeholder
‘ы, но никак не сами “тихие”
1
placeholder
‘ы.

Вернемся назад, к нашему начальному примеру. Заменим в нем имя класса

1
.icon
на имя “тихого” placeholder’а -
1
%icon
:

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend %icon;
  /* здесь - специфичные стили класса .error-icon */
}

.info-icon {
  @extend %icon;
  /* здесь - специфичные стили класса .info-icon */
}

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

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* здесь - специфичные стили класса .error-icon */
}

.info-icon {
  /* здесь - специфичные стили класса .info-icon */
}

Обратите внимание на важный момент - класс

1
.icon
теперь не присутствует в результирующем CSS-коде! Его там нет!

@extend или @include

На первый взгляд может показаться, что “тихие”

1
placeholder
- это почти тоже самое, что и миксины (
1
mixin
). С функциональной точки зрения такое утверждение абсолютно верно - результат в браузере получается идентичным. А вот с точки зрения CSS разница очень существенная!

Давайте снова изменим наш первоначальный пример и теперь воспользуемся миксином

1
@mixin icon
:

@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @include icon;
  /* здесь - специфичные стили класса .error-icon */
}

.info-icon {
  @include icon;
  /* здесь - специфичные стили класса .info-icon */
}

Посмотрим на сгенерированный CSS-код:

.error-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* здесь - специфичные стили класса .error-icon */
}

.info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* здесь - специфичные стили класса .info-icon */
}

С точки зрения разработки данный пример ничем не хуже примера с использованием “тихого”

1
placeholder
‘а.

Но обратите внимание на тот факт, что CSS-правила

1
transition: background-color ease .2s;
и
1
margin: 0 .5em;
дублируются между селекторами
1
.error-icon
и
1
.info-icon
, что приводит к неоправданному раздутию кода. В случае использования “тихого”
1
placeholder
этого не происходит.

Ограничения

Использование директивы

1
@extend
имеет одно ограничение, связанное с тем, что применение “тихих”
1
placeholder
‘ов никак не оправдывает себя в медиа-запросах
1
@media
.

Рассмотрим такой пример:

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

@media screen {

  .error-icon {
    @extend %icon;
  }

  .info-icon {
    @extend %icon;
  }

}

Видим, что в данном случае “тихий”

1
placeholder
добавлен для селекторов, находящихся внутри медиа-запроса
1
@media
.

Однако, при попытке компиляции этого SCSS-кода в CSS-код получиться ошибка:

You may not @extend an outer selector from within @media. You may only @extend selectors within the same directive. From “@extend %icon” on line 8 of icons.scss

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

Механизм работы директивы

1
@extend
основан на добавлении одного селектора к другому селектору без необходимости дублировать CSS-свойства этих селекторов. Однако невозможно объединять селекторы, находящиеся в разных медиа-запросах
1
@media
.

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

1
placeholder
, распространяют свои свойства на селекторы, не размещенные внутри этого запроса.

Выражение достаточно запутанное, поэтому лучше приведу пример:

@media screen {
  %icon {
    transition: background-color ease .2s;
    margin: 0 .5em;
  }
}

.error-icon {
  @extend %icon;
}

.info-icon {
  @extend %icon;
}

Компиляция пройдет без ошибок и ее результатом будет CSS-код:

@media screen {
  .error-icon, .info-icon {
    transition: background-color ease .2s;
    margin: 0 .5em;
  }
}

Заключение

Обе директивы

1
@extend
и
1
@include
являются очень полезными инструментами, между которыми существует тонкое различие. Если вопрос производительности генерируемого CSS-кода имеет для вас важное значение или же перед вами стоит проблема повторяемости кода, то решением будет являться директива
1
@extend
. В некоторых случая
1
@extend
значительно упрощает получаемый CSS-код и улучшает его производительность.

Конечно же, ничто не мешает вам смешивать между собой директиву

1
@extend
и миксин
1
mixin
(если этого требуют обстоятельства):

@media screen {
  %icon {
    transition: background-color ease .2s;
    margin: 0 .5em;
  }
}

@mixin icon($color, $url) {
  @extend %icon;
  background-color: $color;
  background-url: url($url);
}

.error-icon {
  @include icon(red, '/images/error.png');
}

.info-icon {
  @include icon(blue, '/images/info.png');
}

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


В этом посте поделюсь своим опытом реализации задачи компиляции jade-файлов в HTML-формат.

Рассмотрю два способа реализации этой задачи. Первый - самый нативный, с помощью родной утилиты

1
jade
. Второй - с помощью плагина
1
gulp-jade
под Gulp.

Но способов компиляции Jade в HTML существует больше - есть плагин под Sublime Text, существует плагин под Grunt. Обладатели Mac OS X могут воспользоваться прекрасной программой CodeKit. И я уверен, что это только малая часть того, чем можно воспользоваться.

Кратко остановлюсь на вопросе, зачем мне понадобился Jade. Честно сказать, до недавнего момента я даже не подозревал о сущестовании такого шаблонизатора. Тихо-спокойно пользовался Sublime Text + Emmet и считал, что я на вершине современных требований к web-разработчику.

Однако это оказалось не совсем так. Мне посоветовали посмотреть в сторону Jade и разобраться с работой в нем. Хотя бы с синтаксисом, для начала.

И я скажу вам - мне понравилось! Даже простое использование синтаксиса. Первое впечатление и ощущение - использование этого шаблонизатора освобождает от рамок HTML при написании кода. Точнее - при создании кода сосредотачиваешься на содержимом, которое создаешь.

Но у Jade есть еще и миксины, с которыми мне предстоит познакомиться. Так что - лучшее только впереди!

Написание кода в этом шаблонизаторе чем-то похоже на написание текста в Markdown. Под Markdown имеются (и должны иметься) утилиты\программы для компиляции в HTML. Точно также для Jade должны иметься (и имеются) утилиты\программы для компиляции в HTML.

Jade - синтаксис для Sublime Text

Прежде чем писать код в редакторе, в моем случае необходимо настроить поддержку синтаксиса Jade. Я использую Sublime Text 3, который изначально не имеет таковой.

Исправить это легко - достаточно через

1
Package Control
установить пакет
1
Jade
. Помимо подсветки синтаксиса, появиться поддержка автоматической табуляции, что значительно упрощает процесс написания кода.

Пример подсветки синтаксиса Jade в Sublime Text:

Пример подсветки синтаксиса Jade в Sublime Text

Jade - родная утилита шаблонизатора

Разработчиками была создана родная утилита для преобразования jade-файлов в HTML-файлы. Имя утилиты легко запомнить - это

1
jade
.

Утилита является модулем под Node.js, поэтому последний у вас должен быть заранее установлен (если еще не установлен по какой-то необъяснимой причине).

Инсталляция утилиты производиться банально:

$ sudo npm install -g jade

Утилита имеет немногочисленные параметры, с кратким описанием которых можно ознакомиться на странице официальной документации - Jade - Command Line.

Но стоит обратить внимание на некоторые интересные параметры:

К примеру:

  • 1
    
    -P, --pretty
    
    - создание “удобочитаемого” HTML-кода
  • 1
    
    -w, --watch
    
    - мониторинг изменений файлов

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

1
templates
:

$ jade templates

Утилита может сама создавать jade-файлы:

$ jade {foo,bar}.jade

Или же можно реализовать два способа вывода:

$ jade > my.jade > my.html
$ echo "h1 Jade!" | jade

Или же осуществить рендеринг двух директорий

1
foo
и
1
bar
в директорию
1
tmp
:

$ jade foo bar --out /tmp

Gulp-jade - компиляция под Gulp

Кто знаком с task-manager’ом Gulp, тот может воспользоваться соответствующим плагином

1
gulp-jade
под него. Страничка плагина размещена здесь - gulp-jade.

Установка плагина стандартная:

$ npm install --save-dev gulp-jade

Затем нужно создать задачу (task) для компиляции jade-файлов в HTML-файлы. Ниже приведу свой рабочий task:

var gulp = require('gulp'),
jade = require('gulp-jade');

// Jade
gulp.task('jade', function(){
  gulp.src('./template/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('./dist/'))
});

// Watch
gulp.task('watch', function(){
 gulp.watch('./template/*.jade',['jade']);
});

В Сети есть еще один интересный Gulp-task. Работоспособность его не проверял, взял как есть, для - “чтобы было”.

Как говориться на странице-оригинале, эта задача производит компиляцию файлов из директории

1
app/
в директорию
1
_public/
:

jade = require 'gulp-jade'

gulp.task 'jade', ->
  gulp.src parameters.app_path + '/*.jade'
  .pipe jade pretty: true
  .pipe gulp.dest parameters.web_path
  .on 'error', gutil.log

Заключение

Я запомнил (записал для себя), а вы (уважаемый читатель) познакомились (если не знали) с двумя способами настройки компиляции jade-файлов в HTML-файлы.

На этом все.


Отличный пример создания parallax scrolling с помощью Stellar.js. Оригинал статьи размещен здесь - An Introduction to Parallax Scrolling Using Stellar.js.

Одним из наиболее обсуждаемых трендов в web-дизайне последние несколько лет является эффект

1
parallax scrolling
. Нравиться он вам или нет, но этот эффект сегодня применяется на очень многих сайтах. В этой статье будет дано краткое описание принципа
1
parallax scrolling
и будет показано, как применить этот эффект на странице с помощью jQuery-плагина под названием Stellar.js.

Что такое parallax scrolling

Основная идея parallax scrolling заключается в том, что при прокрутке страницы вниз фоновое изображение движется с меньшей скоростью, нежели содержимое страницы. Таким образом создается иллюзия 3D на странице. Этот эффект является прекрасным дополнением к web-странице, однако он становиться навязчивым при чрезмерном злоупотреблении им. Время от времени вы встречаете на просторах Сети сайты, перегруженные подобными эффектами. И вам не всегда может такое понравиться. Потому что в основном при реализации такого эффекта используется анимация фоновых изображений, что значительно увеличивает вес страницы, в результате чего она очень медленно загружается в браузере.

Примерами сайтов со злоупотреблением таких эффектов, на мой взгляд, могут послужить Saucony Kinavara 3 и Oakley Airbrake MX. Первый сайт “весит” 50Mb(!), второй сайт - около 20Mb.

Теперь, когда вы имеете представление о том, как на деле выглядит эффект parallax scrolling, давайте попробуем реализовать его с помощью плагина Stellar.js.

Что такое Stellar.js

Stellar.js - это jQuery-плагин, с помощью которого можно легко реализовать эффект parallax scrolling на web-странице. Несмотря на то, что этот плагин уже не поддерживается разработчиком, он все еще остается очень надежным, совместим с самыми последними версиями библиотеки jQuery и часто применяется web-разработчиками в проектах (что является показателем). Stellar.js в списке популярных плагинов The jQuery Plugin Registry находится на высших позициях, поэтому вы наверняка о нем слышали или же читали упоминание о нем.

Отлично, вкратце мы познакомились, что такое Stellar.js и можно приступать к процессу создания parallax scrolling на странице с его помощью.

Stellar.js - начинаем работу

Начать работать с плагином Stellar.js очень просто. Для начала нужно скачать этот плагин и подключить к странице. Получить плагин Stellar.js можно двумя способами - из Git-репозитория или с помощью менеджера пакетов Bower. Если остановится на использовании Bower, то в консоли нужно набрать такую команду:

bower install jquery.stellar

Когда плагин Stellar.js получен любым из вышеописанных способов, необходимо подключить его к странице как обычно.

После подключения плагина Stellar.js все готово для того, чтобы применить эффект

1
parallax scrolling
на странице. Этот плагин позволяет применить данный эффект к любому scrolling-элементу на странице, будь то объект
1
window
или любой другой. Для этого нужно выполнить выборку нужного элемента с помощью jQuery, а затем применить к выбранному элементу метод
1
stellar()
.

Самый простой пример применения плагина Stellar.js к объекту показан ниже:

$('#someElement').stellar();

Для объекта

1
window
можно использовать и более краткий синтаксис вышеприведенного примера:

$.stellar();

В этом коде производится поиск фоновых изображений или элементов, к которым применяется эффект

1
parallax
; и для этих элементов выполняется пересчет их расположения на web-странице при ее прокрутке.

Если вам хочется взглянуть хотя бы на один готовый пример страницы с

1
parallax scrolling
, созданной с помощью Stellar.js, то можете посетить эту ссылку - Stellar.js Backgrounds Demo.

Настройки Stellar.js

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

Глобальные настройки передаются методу

1
stellar()
в качестве аргументов, в момент вызова этого метода. Специфичные для элемента настройки передаются в виде
1
data-*
-атрибутов. В этом разделе статьи я не буду подробно останавливаться на рассмотрении всех возможных параметров плагина Stellar.js. Если у вас возникнет желание детально ознакомиться с ними, то можно обратиться к разделу, посвященному этому вопросу - Configuring Everything.

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

1
parallax scrolling
является направление
1
parallax
по вертикали - сверху вниз или же наоборот. Однако, с помощью настроек можно задать parallax по горизонтали - слева направо и наоборот. И даже можно задать сразу два направления - по вертикали и по горизонтали. Для управления направлением
1
parallax
в плагине Stellar.js имеются два параметра Boolean-типа:

  • 1
    
    horizontalScrolling
    
    - для управления parallax по горизонтали
  • 1
    
    verticalScrolling
    
    - для управления parallax по вертикали

По умолчанию оба параметра имеют значение

1
true
.

Другим интересным параметров плагина Stellar.js является

1
responsive
. Данная настройка отвечается за возможность обновления содержимого блока с эффектом parallax при наступлении событий
1
load
и
1
resize
объекта
1
window
. Значением по умолчанию является
1
false
.

Последним (достойным внимания) глобальным параметром плагина Stellar.js является

1
hideDistantElements
. Значением по умолчанию этого параметра является
1
true
. Данный параметр отвечает за эффект скрытия объекта в том случае, когда он выходит на границы viewport. Если такое поведение вам не нужно, то можно поставить значение
1
hideDistantElements
в
1
false
.

Единственным специфичным для элемента параметром плагина Stellar.js, о котором я расскажу в этой статье, является

1
data-stellar-background-ratio
. Расскажу только потому, что он используется очень часто при работе с плагином Stellar.js. Параметр принимает в качестве значения положительное число и управляет скоростью parallax для выбранного элемента.

Например,

1
data-stellar-background-ratio="0.5"
означает, что скорость перемещения элемента при scrolling будет в два раза меньше обычной. Если вы будете использовать данный параметр со значением, меньшим 1, то, согласно документации, для элемента с parallax необходимо применить CSS-правило
1
background-attachment: fixed;
.

Теперь, когда мы познакомились с плагином Stellar.js и научились управлять им с помощью параметров, самое время посмотреть его в действии.

Demo

В этом разделе статьи мы создадим пример кода, в котором применим плагин Stellar.js и настроим его с помощью параметров, рассмотренных ранее. Первым делом нам понадобиться HTML-разметка. Для этого создадим шесть блоков

1
div
, внутри которых будет содержаться некоторый текст:

<div class="content" id="content1">
  <p>text here</p>
</div>
<div class="content" id="content2">
  <p>text here</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
  <p>text here</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
  <p>text here</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
  <p>text here</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
  <p>text here</p>
</div>

Для представленной выше HTML-разметки необходимо написать некоторые CSS-стили для задания фоновых изображений. В нашем примере будут использоваться три изображения, при этом каждое из них будет использоваться дважды. Так как к последним трем блокам

1
div
применен атрибут
1
data-stellar-background-ratio
, то в CSS-стилях также необходимо прописать правило
1
background-attachment: fixed;
.

Финальный вариант CSS-кода будет выглядеть таким образом:

@import "compass";
@import "compass/reset";

$white: #fff;
$black: #000;

body {
  font-size: 20px;
  color: $white;
  text-shadow: 0 1px 0 $black, 0 0 5px $black;
}

p {
  padding: 0 .5em;
  margin: 0;
}

.content {
  background-attachment: fixed;
  height: 400px;
  line-height: 400px;
  text-align: center;
}

#content1 {
  background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}

#content2 {
  background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}

#content3 {
  background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}

#content4 {
  background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}

#content5 {
  background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}

#content6 {
  background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}

Последний шаг, который нужно выполнить, это запустить эффект, вызвав метод

1
stellar()
. Этому методу также передадим несколько аргументов:

$.stellar({
  horizontalScrolling: false,
  responsive: true
});

Stellar.js - parallax scrolling with jQuery

Заключение

В данной статье был рассмотрен плагин Stellar.js для создания эффекта parallax на web-странице. Мною не были рассмотрены все настройки и возможности этого плагина. Но целью этой статьи было заинтересовать читателей плагином Stellar.js для того, чтобы продолжить его изучение самостоятельно.

Что вы думаете о плагине Stellar.js? Вы слышали о таком или же используете его давно?