Эта статья поможет вам разобраться, как создать для своего сайта интересные, визуальные эффекты, используя уникальное свойство SVG – наличие перемещаемого viewBox на бесконечном полотне SVG.
Немного теории. Пользователь видит на своем мониторе только один фрагмент полотна SVG – viewport, остальные фрагменты изображения скрыты от него левее или правее, выше или ниже viewport.
Перемещая viewBox вдоль оси х-ов полотна SVG мы реализуем тем самым – горизонтальный параллакс – смещение фонового изображения влево или вправо относительно viewport. Осуществляется это с помощью изменения первого атрибута viewBox – “min-x”. см. подробнее о viewBox
Для большей наглядности процесса – взаимодействия “viewport” и “viewBox” смотри картинку ниже.

Если все атрибуты viewport и viewBox совпадают, а именно: начало координат viewBox находится в верхнем левом углу (0 0) и у viewport и viewBox соответственно одинаковые ширина и высота, то ничего не изменяется, всё выглядит как есть. Но стоит увеличить атрибут “min-x” viewBox в положительную сторону, то изображение на экране смещается влево. подробнее здесь. Нажмите кнопку “Start” на картинке, чтобы увидеть это в действии.
Цифры на фрагментах изображения: “1168”, “2336”, “3504”, “4672” это велечины горизонтального смещения viewBox и они выбраны не случавйным образом, так как “1168” – это ширина одного фрагмента фонового изображения. В нашем случае это панорама города.
Размещаем фрагменты изображения по горизонтали одно за другим. Для этого первому фрагменту присваивается уникальный номер <g id=”viewBox-move”>, а остальные фрагменты изображения располагаются правее со смещением на ширину экрана.

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

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

И размещаем ее в центре экрана.

Задача в лоб не решается – блондинка уезжает вместе с фоновым изображением и это понятно, так как машинка находится в первом фрагменте в одном файле с фоновым изображением.
Попробуем использовать идею с многослойной анимацией. Фон будет двигаться в нижнем слое, а машинка с блондинкой будет находиться на слой выше. В третьем слое будут вращаться колеса машины. Для каждого слоя анимации будет свой файл и все они объединяются в новом файле путем добавления ссылок на соответствующие файлы. <use xlink:href=”#car-woman” x=”400″ y=”370″ />

Анимация атрибута “d” path – весьма мощный инструмент для получения эффектной анимации: будь то, преобразование одной геометрической фигуры в другую фигуру, плавное превращение одной иконки в другую и т.д. В нашем случае это развевающиеся волосы на ветру .
Принцип везде один – создать начальный подпуть, описывающий начальную фигуру и конечный подпуть для финальной фигуры, при необходимости можно создать промежуточные подпути для промежуточных состояний.
Все подпути, кроме первого, находятся в аттрибуте values=“m259.5 ……2.2z; m257.8……7.8-1.9z; m257.8 …..1.9z;” и отделяются друг от друга символом “z;” и точкой с запятой.

Для создания подпутей можно использовать любой векторный редактор. Технология несложная, но требует некоторой аккуратности.
Создаем копию файла и в ней изменяем форму волос девушки. Для этого щелкаем по волосам и перетаскиваем узлы подпути волос, при этом рычагами узлов корректируем форму подпути волос. Сохраняем файл с новым названием. Нас интересует новый подпуть для новой формы волос девушки.
Для этого сравниваем два файла: оригинал и измененную копию по содержимому, например в “Total commander”.
В моем примере это будет подпуть id=”path3203″ в файле “car-woman.svg” из скаченного выше архива.
Копируем подпуть “m259.5….z; в атрибут values= оригинального файла. Снова изменяем форму волос девушки в копии файла и снова копируем подпуть в оригинальный файл. Далее создаем комманду анимации подпутей – <animate attributeName=”d”

Команда keyTimes=”0;0.1;0.3;0.8;1″ обеспечивает неравномерность движения анимации.

Данный пример работает во всех современных браузерах, кроме старых версий IE.
Жду ваших комментариев.
⇚ Добавление звука к SVG файлам⇛ Анимация иконки – разбитое сердце