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

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

Parallax: Применение

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

Чтобы применить компонент Параллакс, добавьте атрибут 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('images/dark.webp');">
    <h3 class="uk-h1 uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">Параллакс UIkit 3</h3>
</div>

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

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

Опция Описание Значение Начало
по умолчанию
x Анимация по горизонтали : translateX. Length 0
y Анимация по вертикали : translateY. Length 0
bgy Анимация фона : Y position. Length Current
bgx Анимация фона : X position. Length Current
rotate Анимация вращения по часовой стрелке. deg 0
scale Анимация масштабирования. Number, Length 1
color Анимирует цвет Color Current
background-color Анимирует фоновый цвет Color Current
border-color Анимирует цвет рамки (границы) Color Current
opacity Анимация прозрачности. Number Current
blur Размытие элемента. Анимация с применением функции CSS blur(). px 0
hue Изменение оттенка. Анимация с применением функции CSS 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. Единица пикселя может быть опущена.
Можно использовать единицы px, %, vw и vh. Основные математические операнды + и - также поддерживаются.

Начало и конец

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

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

<div uk-parallax="opacity: 0,1">...</div>

Параллакс

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

<div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.webp');">
    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
        <h3 class="uk-h1" uk-parallax="opacity: 0,1; y: -100,0; scale: 2,1; end: 50vh + 50%;">Параллакс</h3>
        <p uk-parallax="opacity: 0,1; y: 100,0; scale: 0.5,1; end: 50vh + 50%;">
            Все, что можно сказать о нем, это то, что раз оно произошло, то оно объясняется элементами, открываемыми в нем анализом.
        </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" style="background-image: url('images/dark.webp');">
    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
        <h3 uk-parallax="opacity: 0,1,1; 
                         y: -100,0,0; 
                         x: 100,100,0; 
                         scale: 2,1,1; 
                         end: 50vh + 50%;
                         " class="uk-h1">Заголовок
        </h3>
        <p uk-parallax="opacity: 0,1,1; 
                        y: 100,0,0; 
                        x: -100,-100,0; 
                        scale: 0.5,1,1; 
                        end: 50vh + 50%;
                        ">Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
        </p>
    </div>
</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-parallax="bgy: -200" style="background-image: url('images/dark.webp');">
    <h3 class="uk-h1 uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="y: 100,0">Заголовок</h3>
</div>

Target

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

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

Заголовок 

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

Start и End

С помощью параметров start и end вы можете настроить продолжительность анимации.

Опция start
Определяет, когда начинается анимация. Значение 0 по умолчанию означает, что верхняя граница цели и нижняя граница области просмотра пересекаются.
Опция end
Определяет, когда анимация заканчивается. Значение 0 по умолчанию означает, что нижняя граница цели и верхняя граница области просмотра пересекаются.

Значения могут быть установлены в любых размерных единицах, а именно vh, % и px. Единица % относится к высоте цели. Оба варианта допускают базовые математические операнды + и -. 

<div uk-parallax="start: 100%; end: 100%;">...</div>
<div uk-parallax="start: 30vh; end: 30vh;">...</div>
<div uk-parallax="start: 100% + 100; end: 100% + 100;">...</div>
0 / 0
100% / 100%
30vh / 30vh
100% + 100 / 100% + 100
<div id="test-start-end" class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.webp');">
    
    <div class="uk-grid uk-margin-auto uk-flex-inline">
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; y: 398; easing: 0;">0 / 0</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100%; end: 100%; y: 398; easing: 0;">100% / 100%</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 30vh; end: 30vh; y: 398; easing: 0;">30vh / 30vh</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 100; end: 100% + 100; y: 398; easing: 0;">100% + 100 / 100% + 100</div></div>
    </div>
    
</div>

VH

<div class="uk-height-large uk-background-cover uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.webp');">
    
    <h3 class="uk-h1 uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical"
        uk-parallax="start: 100vh; end: 50vh; opacity: 0,1;">VH</h3>
    
</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('images/dark.webp');">
    <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="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -2">-2</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -1">-1</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; 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-parallax="start: 100%; 
                  end: 100%; 
                  background-color: orange,white; 
                  border-color: #00f,#f00;" 
     style="border: 10px solid #000;">
	
    <h3 class="uk-h2 uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" 
        uk-parallax="target: #test-target; start: 100%; end: 100%; color: #0f0;">Цветность</h3>

</div>

Фильтры

CSS-фильтры

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-parallax="sepia: 100;" style="background-image: url('images/light.webp');">
    <h3 class="uk-h2 uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-filter; blur: 0,10;">Размытие</h3>
</div>

Штрихи SVG

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

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

<div uk-parallax="stroke: 45">
    <img src="" width="" height="" alt="" uk-svg>
</div>
Совет Рекомендуется использовать процентную единицу %. Используя проценты % не нужно знать точную длину штрихов.
Заполнитель 
<div class="uk-text-center" uk-parallax="stroke: 100%; start: 100%; end: 100%;">
    <img src="images/strokes.svg" width="350" height="340" alt="Заполнитель" uk-svg>
</div>

SVG

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>

Sticky Parallax

Вместе с компонентом Sticky вы можете добиться сложных эффектов липкого параллакса. Посмотрите несколько примеров в тестах для Sticky Parallax.

Параметры для атрибута

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

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

Опция Значение По умолчанию Описание
easing Number 1 Плавность анимации при прокрутке
target CSS Selector false Ссылка-цель для продолжительности анимации.
start Length 0 Начальное смещение (Start offset).
Значение может быть в vh, % и px.
Поддерживает базовые математические операнды + и -.
Значение по умолчанию 0 означает, что верхняя граница цели и нижняя граница области просмотра пересекаются.
end Length 0 Конечное смещение (End offset).
Значение может быть в vh, % и px.
Поддерживает базовые математические операнды + и -.
Значение по умолчанию 0 означает, что нижняя граница цели и верхняя граница области просмотра пересекаются.
media Boolean, Number, String false Условие для активного состояния - ширина в виде целого числа (например, 640) или точка останова (например, @s, @m, @l, @xl) или любой допустимый медиа-запрос (например, (min-width: 900px)).
viewport Number 1 Устарело. Подробности см. Миграция 3.10 - 3.11

JavaScript

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

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

UIkit.parallax(element, options);