Параллакс : Parallax

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

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

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

UIkit 2

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

Разметка

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

Опции

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

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

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

Разметка

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

Начало и завершение значения

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

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

Пример

Background Color

Разметка

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

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

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

Пример

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

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

Разметка

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

Target Option

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

Пример

Target Option

Этот текст анимирован, пока заголовок "Target Option" находится в области просмотра.

Разметка

<!-- Цель -->
<div id="target-id">...</div>

<!-- Запускаем анимацию и указываем конечную цель -->
<div data-uk-parallax="{target: '#target-id'}">...</div>

Скорость | Velocity

Чтобы настроить замедление анимации, добавьте опцию velocity.

Пример

0.04

0.2

0.6

Разметка

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

Viewport

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

Пример

Внимание

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

Разметка

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

JavaScript options

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

Init element manually

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