gearmobile Reading time ~16 minutes

При изучении Susy одним из вопросов, который всегда стоял передо мной, заключался в следующем: “Как удалить 

1

padding
или 
1

margin
у первого и последнего столбца 
1

column
в разметке Susy без применения CSS-свойств 
1

first-child
и 
1

last-child?
”.

Этот вопрос является один из самых главных для всех, кто только начинает изучение Susy. Если посмотреть в корень данного вопроса, то его основную суть можно свести к следующему (если судить по многочисленным постам в Интернет): необходимо использовать значение 

1

inside
вместо значения 
1

after
. Для того, чтобы точно ответить на этот вопрос, необходимо хорошо понимать, каким образом положение отступов 
1

gutter
в целом оказывает влияние на всю разметку, созданную в Susy.

Как мне кажется, вопрос о расположении отступов 

1

gutter
в разметке Susy является самой важной настройкой, поскольку он оказывает влияние на весь код в целом. Если у вас перед прочтением статьи существовал такой вопрос, то данная статья именно для вас.

Что такое - расположение отступов gutter

Расположение отступа 

1

gutter
позволяет полностью менять всю разметку страницы, созданную в Susy. Данный параметр определяет, где должны находиться отступы 
1

gutter
относительно столбцов 
1

columns
. Также данная настройка определяет, будут ли отступы 
1

gutter
являться CSS-свойством 
1

padding
или 
1

margin
.

Эта параметр находиться среди глобальных настроек переменной 

1

$susy
. Как вариант, данный параметр можно использовать локально, внутри миксина 
1

span
. Давайте начнем с рассмотрения случая, когда расположение отступа 
1

gutter
управляется из глобальной переменной 
1

$susy
.

По умолчанию, расположение отступов в Susy определено ключевым словом 

1

after
. Помимо этого, существуют еще варианты: 
1

before
, 
1

split
, 
1

inside
и 
1

inside-static
. Ниже представлен полный вариант синтаксиса параметра 
1

gutter-position
в глобальной переменной 
1

$susy
:

$susy: (
  gutter-position: after ( before | after | split | inside | inside-static )
);

Ключевые слова в круглых скобках являются возможными вариантами значения параметра 

1

gutter-position
.

Для ясности понимания тонкостей разметки в Susy при использовании параметра 

1

gutter-position
необходимо создать простую структуру:

Базовая разметка в Susy

Gutter-position: after

Значением по умолчанию для параметра 

1

gutter-position
является ключевое слово 
1

after
. Данное значение заставляет Susy располагать отступы gutters после каждого столбца разметки. В этом режиме необходимо удалить отступ у последнего столбца в разметке. В этом случае отступы gutters являются CSS-свойством margin и размещаются в разметке следующим образом:

Gutter-position: after

При использовании значения по умолчанию для параметра 

1

gutter-position
миксин 
1

span
создает три CSS-правила - 
1

width
, 
1

margin-right
и 
1

float: left
:

.test {
  @include span(3 of 4);
}

Результирующий CSS-код:

.test {
  width: 73.68421%;
  float: left;
  margin-right: 5.26316%;
}

В этом коде свойство 

1

margin-right
- это отступ 
1

gutter
, созданный Susy в данной разметке.

Можно использовать ключевое слово 

1

last
для удаления крайнего 
1

margin
у столбца:

.last {
  @include span(1 of 4 last);
}

В результате получим результат в виде 

1

margin-right: 0
:

.last {
  width: 21.05263%;
  float: right;
  margin-right: 0;
}

В рассматриваемой нами разметке область контента занимает 3 столбца из 4. При этом область боковой панели размещается в одном столбце из 4-х. Кроме того, боковая панель является последним элементом разметки, поэтому код для подобного случая будет таким:

.content {
  @include span(3 of 4);
}
.sidebar {
  @include span(1 of 4 last);
}

Краткое заключение: значение 

1

after
параметра 
1

gutter-position
является наиболее интуитивно понятным случаем создания разметки в Susy. При использовании значения по умолчанию единственный момент, о котором следует помнить - это убрать отступ у последнего столбца разметки с помощью ключевого слова 
1

last
.

Gutter-position: before

Значение 

1

before
является одним из вариантов предыдущего значения - 
1

after
. Суть этого значения также простая. Вместо размещения отступов gutter после столбцов (как в случае с 
1

after
), при значении 
1

before
отступы gutters размещаются перед столбцами. В этом случае необходимо удалить отступ у первого столбца в разметке. Отступы gutter также являются в данном случае CSS-свойством 
1

margin
:

Gutter-position: before

При использовании значения 

1

before
для параметра 
1

gutter-position
миксин 
1

span
генерирует три CSS-правила: 
1

width
, 
1

margin-left
и 
1

float: left
с помощью кода:

.test {
  @include span(3 of 4);
}

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

.test {
  width: 73.68421%;
  float: left;
  margin-left: 5.26316%; /* Notice this is margin left, not right */
}

Так как значение 

1

before
является прямой противоположностью значения 
1

after
, то его очень легко понять, если до этого вы хорошо разобрались с 
1

after
. Вместо использования ключевого слова 
1

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

first
для удаления отступа у первого столбца разметки:

.content {
  @include span(3 of 4 first);
}

.sidebar {
  @include span(1 of 4);
}

В результате получим точно такую же разметку, что и в предыдущем случае.

Краткое заключение: при использовании значения 

1

before
разметка получается точно такой же, как и в предыдущем случае. Единственное отличие заключается в применении ключевого слова 
1

first
для первого столбца разметки.

Gutter-position: split

Значение 

1

split
параметра 
1

gutter-position
кардинально отличается от двух предыдущих значений 
1

before
и 
1

after
. Если установлено значение 
1

split
, то ширина отступа 
1

gutter
делиться пополам (надвое) и обе половинки отступа располагаются по обеим сторонам одного столбца. В этом режиме отступы 
1

gutters
генерируются в CSS-коде в виде CSS-свойства 
1

margin
. В этом случае нет необходимости удалять отступы для крайних столбцов разметки:

Gutter-position: split

Если, как в нашем случае, имеются только два блока (с классом 

1

.content
и 
1

.sidebar
), то создание такой разметки выполняется просто. Для этого достаточно воспользоваться функцией 
1

span
, как обычно:

.content {
  @include span(3 of 4);
}
.sidebar {
  @include span(1 of 4);
}

Разметка с двумя блоками

Однако, ситуация становиться не такой ясной, если блок 

1

.content
или блок 
1

.sidebar
будут содержать внутри себя блоки-потомки.

Давайте добавим два блока 

1

div
с классом 
1

.child-one
и классом 
1

.child-two
внутрь блока 
1

.content
для того, чтобы проиллюстрировать эту ситуацию:

<div class="content">
  <h2>
    Content
  </h2>
  <div class="child-one">
    <h2>
      Child One
    </h2>
  </div>
  <div class="child-two">
    <h2>
      Child Two
    </h2>
  </div>
</div>

Для обоих вновь созданных блока применим тот же подход, что и ранее. Блок с классом 

1

.child-one
будет иметь ширину 2-х столбцов из 3-х; блок с классом 
1

.child-two
будет иметь ширину 1-го столбца из 3-х.

.content {
  @include span(3 of 4);
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Разметка с двумя дополнительными блоками

Обратите внимание на тот факт, что границы обоих блоков 

1

.child-one
и 
1

.child-two
не совпадают с границами фоновой сетки!

Это происходит потому, что при задании для параметра 

1

gutter-position
значения 
1

split
нужно учитывать взаимосвязь между блоками-родителями и блоками-потомками. В данном конкретном случае блоком-родителем является 
1

.content
, а блоками-потомками являются 
1

.child-one
и 
1

.child-two
.

Для создания правильной разметки в данном случае необходимо добавить для блока-родителя ключевое слово 

1

nest
для того, чтобы показать, что этот блок как раз и является блоком-родителем:

.content {
  @include span(3 of 4 nest); // Добавлен ключ nest
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Применение ключевого слова nest

Теперь посмотрите, как точно оба блока .child-one

1

и
.child-two` вписались в границы сетки, “нарисованной” фоновым изображением!

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

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

1

.child-one
и 
1

.child-two
он совершенно различный:

.content {
  width: 75%;
  float: left;
}

.child-one {
  width: 60%;
  float: left;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}

.child-two {
  width: 26.66667%;
  float: left;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}

Блок-родитель имеет плавание влево 

1

float: left
и ширину, которая указана в процентах; при этом ширина отступов 
1

gutters
этого блока не учитывается (75% равно 3/4).

Блоки-потомки имеют все те же свойства, что и блок-родитель. Но при этом отступы gutters имеют место быть для этих блоков.

Краткое заключение: значение 

1

split
кардинально отличается от двух рассмотренных ранее значений 
1

before
и 
1

after
. При использовании значения 
1

split
необходимо добавлять ключевое слово 
1

nest
к блоку-родителю и использовать миксин 
1

span
для всех блоков-потомков.

Gutter-position: inside/inside-static

Оба значения 

1

inside
и 
1

inside-static
очень похожи на предыдущее значение 
1

split
. Отступы gutters также делятся пополам (надвое) и обе половинки располагаются по обеим сторонам каждого столбца. Однако, в этом случае в CSS-выводе отступы являются свойством 
1

padding
, а не 
1

margin
. Также в этом случае нет необходимости удалять отступы у крайних столбцов в разметке:

Gutter-position: inside

Отступы 

1

gutters
в случае 
1

gutter-position: inside
имеют тот же принцип, что и при значении 
1

split
. Если для блока-родителя не будет указано ключевое слово 
1

nest
, то блоки-потомки выйдут за границы разметки.

.content {
  @include span(3 of 4);
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Блоки-потомки выходят за границы разметки

Если просто добавить ключевое слово 

1

nest
для блока-родителя 
1

.content
, то в результате получим следующее:

.content {
  @include span(3 of 4 nest); // The nest key is needed
}
.child-one {
  @include span(2 of 3);
}
.child-two {
  @include span(1 of 3);
}

Блоки-потомки в границах разметки

Значение 

1

inside-static
работает точно также, как и значение 
1

inside
. Единственное исключение заключается в том, что отступы gutters получаются в фиксированных единицах измерения, а не в процентах. Кроме этого, в глобальной переменной 
1

$susy
необходимо задать параметр 
1

column-width
с указанием ширины столбца 
1

column
.

Краткое заключение: значение 

1

inside
работает точно также, как и значение 
1

split
. При использовании значения 
1

inside
необходимо добавлять ключевое слово 
1

nest
к блоку-родителю и использовать миксин 
1

span
для всех блоков-потомков.

Значение 

1

inside
и 
1

split
имеют одинаковый сгенерированный CSS-код, поэтому можно с легкостью менять между собой эти значения в глобальной переменной 
1

$susy
для параметра 
1

gutter-position
.

Заключение

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

1

gutters
. Различное местоположение отступов 
1

gutters
в каждом случае имеет свои тонкости и требует понимания процесса, если вы хотите эффективно их использовать.

Существует два основных способа создания разметки при содействии отступов 

1

gutters
:

  • значения 

    1

    before
    и 
    1

    after
    имеют создают отступы 
    1

    gutters
    с одной стороны каждого столбца 
    1

    column
    ; для крайнего столбца необходимо удалить отступ 
    1

    gutter
    с помощью ключевого слова 
    1

    first
    или 
    1

    last
    .

  • значения 

    1

    inside
    , 
    1

    inside-static
    , 
    1

    split
    разделяют каждый отступ 
    1

    gutter
    на две равные половины, которые располагаются по обе стороны каждого столбца 
    1

    column
    . Такие отступы не нуждаются в удалении.

Эта статья является небольшой выдержкой из книги Learning Susy, а точнее - из главы 8, посвященной позиционированию отступов 

1

gutter
в разметке Susy. В книге вопрос позиционирования рассмотрен подробнее на основе более сложного примера. Если материал, поданный в статье, вам понравился, то книга понравиться еще больше.

Примечание переводчика: данный пост является переводом статьи Understanding Gutter Positions in Susy, созданным мною с любезного разрешения ее автора Zell Liew.

gearmobile Reading time ~1 minute

Коротенькая заметка о небольшом баге в Photoshop CC 2014, связанном с невозможностью узнать размер pattern’а.

В предыдущих версиях Photoshop все было проще - выбираешь в палитре слоев примененный образец и в окне “Pattern Overlay” достаточно навести курсор мыши на пример pattern’а. Появляется всплывающая подсказка, в которой видны размеры образца.

В Photoshop CC 2014 теперь таким образом невозможно получить подсказку о размере образцов изображения. Это баг или фича Photoshop CC 2014 - непонятно. Но жить стало труднее без такой возможности.

Однако, выход все же есть, хоть и через всем известное место. Решение таково.

Шаг первый - Pattern Stamp

В палитре инструментов выбираем инструмент Pattern Stamp:

Инструмент Pattern Stamp

Шаг второй - верхняя панель инструментов

Переводим взгляд вверх, на верхнюю панель инструментов (или как она там называется - неважно). На ней находим иконку окна Pattern Overlay:

Окно Pattern Overlay

Шаг третий - окно Pattern Overlay

Щелкаем мышкой по этой иконке. Появится окно Pattern Overlay со списком образцов изображений. Наводим курсор мыши на нужный образец и в появившемся tooltip видим размеры (момент появления tooltip я не заснял - но оно работает):

Размер pattern'а в Photoshop

Заключение

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

gearmobile Reading time ~3 minutes

Тема достаточно освещенная, но для меня, как новичка в мире Mac OS X - очередное маленькое открытие. Вопрос связан с одной небольшой проблемой - выбором файловой системы для флешек.

Для пары Windows + Linux обычным решением является файловая система NTFS. Обе операционные системы с ней прекрасно работают - чтение+запись.

Для пары Mac OS X + Linux такой выбор не подойдет, так как NTFS в Mac OS X имеет поддержку только чтения. Для записи нужно ставить сторонний софт, типа Paragon. Это не является решением - нужна нативная поддержка в обеих системах.

Решением является файловая система ExFAT. В Mac OS X у нее есть поддержка “из коробки”. В Linux поддержки “из коробки” нет - но проблема решается установкой дополнительных пакетов (как почти всегда).

Более того, в Сети пишут о системе ExFAT как изначально созданной для флеш-накопителей. Что она умеет бережно относится к флешкам и поддерживает размер более 4Gb.

Все отлично - ставлю ее на обе свои флешки: Apacer 8Gb и Transcend 16Gb. Начну с более сложного - с системы Linux.

ExFAT - установка в Linux

Для включения поддержки файловой системы в Linux нужно установить пару пакетов - 

1

exfat-fuse
и 
1

exfat-utils
:

$ sudo apt-get install exfat-fuse exfat-utils

Скажу, что приведенная выше команда на моей системе Linux Mint 17 Cinnamon оказалась действенной - все пакеты установились без проблем и поддержка ExFAT в системе появилась сразу же.

В Интернете почти на всех ресурсах приведена другая команда для установки пакетов 

1

exfat-fuse
и 
1

exfat-utils
(причем - один в один, перепечатывают друг у друга вслепую):

$ sudo add-apt-repository ppa:relan/exfat
$ sudo apt-get update
$ sudo apt-get install fuse fuse-exfat exfat-utils

Однако, эта команда на моей системе не запустилась - выдала ошибку ключа при подключении репозитория 

1

ppa:relan/exfat
. Именно этот факт и послужил для меня поводом написать этот краткий обзор.

Все - дело сделано. Теперь отформатирую флешку под файловую систему ExFAT в Linux.

Для этого сначала нахожу, где она расположена в файловой системе (в моем случае это устройство 

1

/dev/sdb1
):

$ sudo fdisk -l

… и затем произвожу форматирование флешки командой:

$ sudo mkfs.exfat -n large_flash /dev/sdb1

где ключ 

1

-n
- это задание для флешки имени как устройства.

Форматирование происходит буквально за пару секунд, ждать не придется. Первая флешка готова и операция форматирования выполнена под Linux.

ExFAT - форматирование под Mac OS X

Как уже говорилось мною выше, система Mac OS X имеет нативную поддержку файловой системы ExFAT. То есть, ничего дополнительно ставить не придется - все готово “из коробки”.

Операции по форматированию накопителей и другим действиям с жесткими дисками производится в стандартной утилите “Disk Utility”.

Вставляю вторую флешку и запускаю “Disk Utility”:

Создание ExFAT в дисковой утилите Disk Utility

Разобраться с работой этой утилиты нетрудно, но вкратце опишу.

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

Справа на вкладке “Erase” производиться настройка и выполнение форматирования (в терминологии Mac OS X форматирование называется “Erase”). В списке “Format” выбирается нужная файловая система (кстати, выбор небогатый).

В списке “Name” выбирается диск, который будет форматироваться. Там же находиться одноименная кнопка “Erase” для запуска форматирования.

Ниже располагается информативное (я был приятно впечатлен объемом и качеством подачи информации в нем) окно, в котором можно увидеть всю информацию по подключенному диску. Внимательный читатель заметит, что флешка у меня уже отформатирована в ExFAT - обзор делал “по горячим следам”.

В принципе - и все. Осталось нажать кнопку “Erase” и моя флешка отформатируется под систему ExFAT.

Если ее открыть в Finder, то теперь мне будут доступны как чтение с нее, так и запись на нее.

Заключение

Вот так “неожиданно” я решил проблему совместимости флешки под Mac OS X и Linux. Более того, данная система ExFAT является разработкой Microsoft, поэтому с ее поддержкой в Windows вообще нет проблем.

А если учитывать обещанный создателями ExFAT бережный способ обращения с флеш-накопителями, то этому решению вообще цены нет.

На этом все.

gearmobile Reading time ~6 minutes

В данном примере рассмотрим создание parallax с эффектом вертикального скроллинга. Это самый популярный вид parallax’а для страниц типа Landing Page.

Создавать эффект будет с помощью скрипта Parallax.js. По странному стечению обстоятельств данный скрипт имеет точно такое же имя, что и скрипт из предыдущего примера - “Parallax.js - создаем простой parallax”. Однако, это разные скрипты и авторы у них разные; данный скрипт расположен на странице GitHub по адресу - Parallax.js.

Домашняя страничка скрипта выполнена также с эффектом parallax - Simple Parallax Scrolling.

Parallax.js - создаем HTML-разметку

Разметка для скрипта Parallax.js проста. Это обычный блок, который может быть 

1

div
, 
1

section
или что-либо еще. Обязательным условием является подключение для блока класса 
1

class="parallax-window"
и двух data-атрибутов: 
1

data-parallax="scroll"
и 
1

data-image-src="images/one.jpg"
.

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

  • 1

    data-natural-width
    - реальная ширина изображения
  • 1

    data-natural-height
    - реальная высота изображения

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

1

section
с содержимым:

<!-- begin one -->
<section data-parallax="scroll" data-image-src="images/one.jpg" class="parallax-window">
  <div class="wrap one">
    <h1>Welcome to Parallax!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus consequatur, nulla neque voluptatum deserunt at voluptatibus eos. Magni sapiente rem, suscipit assumenda provident, quaerat doloribus libero? Eaque doloremque, quo sequi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nemo cum, dignissimos blanditiis iusto quasi, quis! Ducimus aperiam sunt libero deleniti numquam rerum esse architecto, officiis amet, officia recusandae aut.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reiciendis vitae, amet! Quas saepe consequuntur, nisi quia, cupiditate dignissimos laborum incidunt soluta repellat, libero id quibusdam mollitia maiores omnis tempore.</p>
  </div>
</section>
<!-- end one -->

<!-- begin two -->
<section data-parallax="scroll" data-image-src="images/two.jpg" class="parallax-window">
  <div class="wrap two">
    <h2>Parallax is great!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi accusamus deserunt ipsum nesciunt odit vero corporis eaque, quibusdam, enim, beatae, repellendus iusto. Amet corporis beatae, inventore officiis est aut. Ab!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime possimus sint a facere dignissimos! Labore at, beatae consequuntur corporis perspiciatis! Asperiores illum esse repellat veniam vero totam debitis! Quos, consectetur.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, totam maxime dolorum similique, ipsa a. Ea illo eligendi, ex, officia id eum sit sint nobis aperiam, error nihil ab dolorum.</p>
  </div>
</section>
<!-- end two -->

<!-- begin three -->
<section data-parallax="scroll" data-image-src="images/three.jpg" class="parallax-window">
  <div class="wrap three">
    <h3>Parallax is easy!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quia ex doloremque et, eum soluta culpa ipsum placeat consectetur, error at, accusamus iure! Doloribus corporis, earum quo modi omnis hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ab distinctio omnis repellendus exercitationem maiores ad sed, deleniti dolorem tempore praesentium nobis suscipit nihil quidem qui nostrum debitis ipsam culpa.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repellendus, qui. Aspernatur reiciendis eligendi, totam eaque iusto illo officia. Facere dicta harum, dolore sit perferendis in neque mollitia eligendi dignissimos?</p>
  </div>
</section>
<!-- end three -->

<!-- begin four -->
<section data-parallax="scroll" data-image-src="images/four.jpg" class="parallax-window">
  <div class="wrap">
    <h4>Let's start use it!</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ab voluptates alias corporis, laborum provident corrupti assumenda dignissimos vel repellendus obcaecati, aspernatur earum ipsum rem. Voluptatum ipsum nostrum in! Rerum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit alias illum minus asperiores culpa, modi veritatis quibusdam, aperiam accusantium repellendus at possimus qui cupiditate dolorem quod accusamus a. Mollitia, repudiandae.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo nulla officia sapiente a tenetur maxime sunt mollitia accusantium aut, eius minus maiores fugit necessitatibus obcaecati ex eos quibusdam sequi.</p>
  </div>
</section>
<!-- end four -->

Parallax.js - стилизация страницы

Стилизацию страницы буду выполнять на Sass/Compass с использованием вертикального ритма “Vertical Rhythm” - в данном случае он подойдет как раз к месту, как мне кажется:

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

$base-font-size: 24px;
$base-line-height: 36px;
$rhythm-unit: "rem";
$rem-with-px-fallback: true;

@include establish-baseline;

.parallax-window {
  min-height: 1080px;
  background: transparent;
  .wrap{
    margin-top: 100px;
    text-align: center;
    width: 1200px;
    margin: 0 auto;
    @include leader($lines: 7, $property: padding);
    p{
      @include rhythm-margins;
    }
    h1{
      @include adjust-font-size-to(2.074rem);
    }
    h2{
      @include adjust-font-size-to(1.728rem);
    }
    h3{
      @include adjust-font-size-to(1.44rem);
    }
    h4{
      @include adjust-font-size-to(1.2rem);
    }
    &.one{
      text-align: center;
      color: rgba(255,255,255,.8);
    }
    &.two{
      text-align: left;
      color: rgba(0, 0, 0, .8);
    }
    &.three{
      text-align: right;
      color: rgba(255, 255, 255, .8);
    }
  }
}

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

.parallax-window {
  min-height: 1080px;
  background: transparent;
  ...

Parallax.js - добавление Javascript

Разметка и стили готовы - осталось подключить скрипт Parallax.js и библиотеку jQuery:




jQuery “забираем” с Google, а скрипт Parallax.js - с GitHub-страницы проекта - Parallax.js. Все это “добро” пихаем в самый низ, подвал HTML-документа - перед закрывающим тегом 
1

</body>

.



В дальнейшие украшательства вдаваться не буду - это дело техники. Мне важен сам принцип создания parallax с эффектом вертикального скроллинга.



В принципе, у меня все готово для того, чтобы полюбоваться результатом. Открываю страницу в браузере и любуюсь (не забывая скролить саму страницу):



Страница на Parallax.js с вертикальным скроллингом



Отлично! Получился прямо таки совсем неплохой parallax с вертикальным скроллингом. Готовый пример со всеми исходниками можно посмотреть на GitHub - Parallax.js Scrolling.






  






  

    
    

      gearmobile
      
      
        
        
        Reading time ~5 minutes
      
      
    

    
      

    
  

  

    

  
Небольшой обзор новой для меня темы - создание эффекта 
1

parallax

 на странице сайта. Вместе с вами буду учиться создавать такой эффект и начну с самого простого - Parallax.js.





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



Кратко о parallax



Что такое 
1

parallax

 как эффект сам по себе, хорошо видно на самой страничке и расписывать его я не буду. В Интернет есть лучшее и более подробное описание эффекта 
1

parallax

. Единственное, что можно сказать по поводу 
1

parallax

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

landing page

 и призван скрасить и разнообразить их относительную монотонность.



Способов реализации 
1

parallax

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



Одним из преимуществ метода на основе скрипта Parallax.js является то, что в этом случае не требуется библиотеки jQuery. Скрипт может работать и с ней, но ее присутствие совсем необязательно. Получается выгода в весе страницы и скорости ее загрузки в браузере.



Parallax.js - начальная разметка



HTML-разметка для нашего будущего 
1

parallax

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

ul

 с идентификатором (имя его произвольное) и элементами списка 
1

li

 (имя класса обязательно и неизменно).



Еще одним обязательным атрибутом для элементов списка 
1

li

 является атрибут 
1

data-depth

, у которого значение может меняться в диапазоне от 0 до 1. Чем выше значение в 1, тем выше скорость перемещения объекта на странице.



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

parallax

.



Ниже приведен пример такой разметки:



<ul id="scene">
  <li class="layer" data-depth="0.10">
    <img src="images/one.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/two.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.20">
    <img src="images/three.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/four.png" height="100" width="100" alt="Image" />
  </li>
</ul>



Parallax.js - стилизация parallax



Произведем небольшую стилизацию нашего будущего 
1

parallax

 с помощью Sass/Compass. Для элемента 
1

ul

 добавим фоновое изображение, чтобы был лучше виден эффект parallax.



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

#scene{
  width: 95%;
  margin: 20px auto 0;
  min-height: 775px;
  background: url(../images/bg.jpg) 0 0 no-repeat;
  img{
    display: inline-block;
    width: 100px;
    height: 100px;
    @include border-radius(50%);
  }
  img[src="images/one.png"]{
    margin: 200px 0 0 200px;
  }
  img[src="images/two.png"]{
    margin: 200px 0 0 1000px;
  }
  img[src="images/three.png"]{
    margin: 500px 0 0 700px;
  }
  img[src="images/four.png"]{
    margin: 600px 0 0 300px;
  }
}



Parallax.js - добавляем javascript



Наш 
1

parallax

 почти готов - осталось “вдохнуть в него жизнь” с помощью Javascript.



Тут все просто. Первой строкой подключается файл скрипта Parallax.js. Второй строкой сначала в теле документа отыскивается элемент с идентификатором 
1

scene

, который помещается внутрь переменной 
1

scene

. Затем создается новый экземпляр 
1

parallax

 объекта Parallax и ему передается в качестве аргумента эта переменная 
1

scene

.



Все - смотрим результат:



Готовый эффект на Parallax.js



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



Мы получили эффект parallax.



Ниже приведен полный код HTML и CSS рассмотренного нами примера:



<ul id="scene">
  <li class="layer" data-depth="0.10">
    <img src="images/one.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/two.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.20">
    <img src="images/three.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/four.png" height="100" width="100" alt="Image"
  </li>
</ul><!-- scripts -->



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

scene{
width: 95%;
 margin: 20px auto 0;
 min-height: 775px;
 background: url(../images/bg.jpg) 0 0 no-repeat;
 img{
 display: inline-block;
 width: 100px;
 height: 100px;
 @include border-radius(50%);
 }
 img[src="images/one.png"]{
 margin: 200px 0 0 200px;
 }
 img[src="images/two.png"]{
 margin: 200px 0 0 1000px;
 }
 img[src="images/three.png"]{
 margin: 500px 0 0 700px;
 }
 img[src="images/four.png"]{
 margin: 600px 0 0 300px;
 }
}



Полный исходный код примера можно посмотреть на GitHub - Parallax.js