Параллакс

Анимировать CSS свойства в зависимости от положения прокрутки документа.

Использование

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

Заголовок

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Разметки

<div data-uk-parallax="{bg: '-200'}">...</div>

Варианты

UIkit обеспечивает ряд опций, которые вы можете добавить к data-uk-parallax атрибут:

Вариант	Описание
`x`	Анимировать транслатекс в пикселях.
`xp`	Анимировать транслатекс в процентах.
`y`	Анимировать translateY в пикселях.
`yp`	Анимировать translateY (в процентах).
`bg`	Анимировать фоновое изображение.
`bgp`	Анимации фонового изображения в процентах.
`rotate`	Анимировать вращение по часовой стрелке в градусах.
`scale`	Анимировать масштабирование.
`color`	Анимировать цвет (должен запускать и останавливать значение).
`background-color`	Анимировать фон-цвет (должен запускать и останавливать значение).
`border-color`	Анимировать цвет границы (потребности запускать и останавливать значение).
`opacity`	Анимировать непрозрачность.
`blur`	Анимировать фильтр размытия.
`hue`	Анимировать вращение фильтра оттенок.
`grayscale`	Анимировать фильтр оттенки серого.
`invert`	Анимировать фильтр инвертировать.
`saturate`	Анимировать фильтр насытить.
`sepia`	Анимировать фильтр сепия.

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

Разметки

<div data-uk-parallax="{y: '-200', opacity: '0'}">...</div>

Пуск и остановка значений

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

Примечание некоторые свойства, как цветы, требуют Пуск и остановку стоимости!

Разметки

<div data-uk-parallax="{x: '-100,100', 'background-color': '#EBF7FD,#FFF1F0'}">...</div>

Вложенная анимация

Использование различных анимаций для вложенных элементов-это простая задача. Просто создать еще один контейнер в течение первых параллакс контейнер и добавить свои варианты, чтобы новый data-uk-parallax атрибут.

Пример

Заголовок

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Разметки

<div data-uk-parallax="{bg: -200}">
    <div data-uk-parallax="{opacity: '0,1', scale: '0,1'}">...</div>
</div>

Целевой Вариант

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

Пример

Заголовок

Этот текст анимированные покуда заголовком "целевой параметр" в области просмотра.

Разметки


<div id="target-id">...</div>
<div data-uk-parallax="{target: '#target-id'}">...</div>

Скорость

Для регулировки замедления анимации, добавить velocity опция.

Пример

0.04

0.2

0.6

Разметки

<div data-uk-parallax="{velocity: '0.5'}">
    ...
</div>

Просмотра

С помощью директивы viewport опция, анимация Продолжительность может быть скорректирована. Со значением 1 или false анимация длится так долго, как элемент в области просмотра. Установка 0.5, например, оживляет собственности только в первой половине просмотра.

Пример

Заголовок

Этот текст анимированный, пока не достигнет середины смотрового окна.

Разметки

<div data-uk-parallax="{viewport: '0.5'}">...</div>

JavaScript варианты

Вариант	Возможное значение	По умолчанию	Описание
`velocity`	float	0.5	Скорость анимации при прокрутке
`target`	mixed	false	Элемент измерения " ссылка на Длительность анимации.
`viewport`	float (0 to 1)	false	Анимация пределах в зависимости от области просмотра.
`media`	integer / string	false	Условие для активного состояния с шириной как целое число (например, 640) или CSS медиа-запросов

Инициализации элементов вручную

var parallax = UIkit.parallax(element, { /* options */ });