Компонент Параллакс : Parallax

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

Руководство по использованию

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

<div uk-parallax="bgy: -200">...</div>
  • Параллакс UIkit 3

  • <div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('/demo/img/dark.jpg');">
        <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">Параллакс UIkit 3</h1>
    </div>

Анимируемые свойства

Вы можете использовать следующие параметры для анимации ряда свойств CSS.

Опция Описание Единица
по умолчанию
Начало
по умолчанию
x Анимация по горизонтали : translateX. px 0
y Анимация по вертикали : translateY. px 0
bgy Анимация фона : Y position. px Current
bgx Анимация фона : X position. px Current
rotate Анимация вращения по часовой стрелке. deg 0
scale Анимация масштабирования. 1
color Анимирует цвет Current
background-color Анимирует фоновый цвет Current
border-color Анимирует цвет рамки (границы) Current
opacity Анимация прозрачности. Current
blur Анимация фильтра blur (размытие элемента). px 0
hue Анимация фильтра hue-rotate (изменение оттенка). deg 0
grayscale Анимация фильтра grayscale (оттенки серого). % 0
invert Анимация фильтра invert (инвертирование). % 0
saturate Анимация фильтра saturate (насыщенность). % 0
sepia Анимация фильтра sepia (сепия). % 0
stroke Анимированные штрихи в изображениях SVG. 0

Значение может определять любой разрешенный тип единицы, например, x: 20vw. Для некоторых опций единицу измерения можно не указывать. Значение будет сопоставлено с единицей по умолчанию. Например, x: 200 такое же, как x: 200px.


Начальные и конечные значения

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

<div uk-parallax="opacity: 0,1">...</div>
  • Параллакс

    Все, что можно сказать о нем, это то, что раз оно произошло, то оно объясняется элементами, открываемыми в нем анализом.

  • <div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('/demo/img/dark.jpg');">
        <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
            <h1 uk-parallax="opacity: 0,1; y: -100,0; scale: 2,1; viewport: 0.5;">Параллакс</h1>
            <p uk-parallax="opacity: 0,1; y: 100,0; scale: 0.5,1; viewport: 0.5;">Все, что можно сказать о нем, это то, что раз оно произошло, то оно объясняется элементами, открываемыми в нем анализом.</p>
        </div>
    </div>

Несколько шагов

Определите несколько шагов для свойства, используя список значений через запятую.

<div uk-parallax="x: 0,50,150">...</div>
  • Заголовок

    Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.

  • <div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('/demo/img/dark.jpg');">
        <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
            <h1 uk-parallax="opacity: 0,1,1; 
                             y: -100,0,0; 
                             x: 100,100,0; 
                             scale: 2,1,1; 
                             viewport: 0.5;
                             ">Заголовок
            </h1>
            <p uk-parallax="opacity: 0,1,1; 
                            y: 100,0,0; 
                            x: -100,-100,0; 
                            scale: 0.5,1,1; 
                            viewport: 0.5;
                            ">Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
             </p>
        </div>
    </div>

Продолжительность : Позиция viewport

Используя опцию viewport, вы можете настроить продолжительность анимации. Значение определяет, как далеко внутри области просмотра прокручивается целевой элемент до завершения анимации. При значении 1 или false анимация длится до тех пор, пока элемент находится в области просмотра (поведение по умолчанию). Например, если установить значение 0.5, свойство анимируется до тех пор, пока позиция прокрутки не достигнет середины целевого элемента.

<div uk-parallax="viewport: 0.5">...</div>
  • Viewport

  • <div class="uk-height-large uk-background-cover uk-light uk-flex uk-flex-top" style="background-image: url('/demo/img/dark.jpg');">
        <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="opacity: 0,1; y: 100,0; viewport: 0.5">Viewport</h1>
    </div>

Вложенность

Различные параллакс-анимации могут быть легко вложены одна в другую.

<div uk-parallax="bgx: -50">
    <div uk-parallax="x: -100, 100">...</div>
</div>
  • Заголовок

  • <div class="uk-height-large uk-background-cover uk-light uk-flex uk-flex-top" uk-parallax="bgy: -200" style="background-image: url('/demo/img/dark.jpg');">
        <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="y: 100,0">Заголовок</h1>
    </div>

Target

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

<div id="target">
    <div uk-parallax="target: #target">...</div>
</div>
  • Headline

  • <div id="test-target" class="uk-height-large uk-background-cover uk-light uk-flex uk-flex-top" uk-parallax="bgy: -200" style="background-image: url('/demo/img/dark.jpg');">
        <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-target; y: 100,0">Headline</h1>
    </div>

Плавность : Скорость течения : Easing

Чтобы настроить скорость течения анимации (easing), добавьте опцию easing. В значении 0 переходы происходят с равномерной скоростью. Положительное значение начинается быстро, замедляясь до завершения, в то время как отрицательное значение начинается медленно, увеличивая скорость до завершения.

  • -2
    -1
    -0.5
    0
    0.5
    1
    2
  • <div id="test-easing" class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('/demo/img/dark.jpg');">
         <div class="uk-grid uk-margin-auto uk-margin-auto-vertical uk-flex-inline">
            <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: -2">-2</div></div>
            <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: -1">-1</div></div>
            <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: -0.5">-0.5</div></div>
            <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 0">0</div></div>
            <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 0.5">0.5</div></div>
            <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 1">1</div></div>
            <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 2">2</div></div>
        </div>
    </div>

Цвета

Переход от одного цвета к другому, например, для границ (border), фона (background) или цвета текста (color). Определите цвета, используя цветовую модель rgb(), код цвета или шестнадцатеричное значение (цвет в формате HEX).

<div uk-parallax="border-color: #00f,#f00">...</div>
  • Цветность

  • <div id="test-color" class="test-color uk-height-large uk-overflow-hidden uk-flex uk-flex-top" uk-parallax="background-color: yellow,white; border-color: #00f,#f00; viewport: 0.5" style="border: 10px solid #000;">
        <h2 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-target; color: #0f0; viewport: 0.5">Цветность</h2>
    </div>

Фильтры

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

<div uk-parallax="blur: 10; sepia: 100;">...</div>
  • Размытие

  • <div id="test-filter" class="uk-height-large uk-background-cover uk-overflow-hidden uk-flex uk-flex-top" uk-parallax="sepia: 100;" style="background-image: url('/demo/img/light.jpg');">
        <h2 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-filter; blur: 0,10;">Размытие</h2>
    </div>

Штрихи SVG

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

Поскольку компонент SVG внедряет SVG после (ниже) элемента изображения, атрибут uk-parallax должен быть добавлен к родительскому элементу.

<div uk-parallax="stroke: 45">
    <img src="" alt="" uk-svg>
</div>
  • <div class="uk-text-center" uk-parallax="stroke: 100%; viewport: 0.7">
        <img src="/demo/img/strokes.svg" alt="" uk-svg>
    </div>
Примечание Рекомендуется использовать процентную единицу %, поэтому вам не нужно знать точную длину штрихов.

SVG изображения

Компонент Параллакс можно применять к элементам встроенных изображений SVG, таким как rect, circle и path.

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="10" height="10" uk-parallax="rotate: 360"/>
</svg>

Отзывчивость

Рекомендуется использовать vw или vh в качестве единиц длины вместо пикселей. Параллакс будет адаптироваться в зависимости от области просмотра.

Параллакс также может применяться только к определенным областям просмотра.

Добавьте опцию media с одним из возможных значений. Например, можно добавить число в пикселях, указав значение в виде 640 или точку останова, такую как @s, @m, @l или @xl. Параллакс будет срабатывать для указанной ширины области просмотра и более.

<div uk-parallax="media: @m"></div>

Опции компонента

При использовании компонента Параллакс к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция Значение По умолчанию Описание
easing Number 1 Animation easing during scrolling
target String false Element dimension reference for animation duration.
viewport Number 1 Диапазон анимации в зависимости от области просмотра.
media Integer, String false Условие для активного состояния - ширина в виде целого числа (например, 640) или точка останова (например, @s, @m, @l, @xl) или любой допустимый медиа-запрос (например, (min-width: 900px)).

JavaScript

Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.

Инициализация

UIkit.parallax(element, options);
Документация
Компоненты